Service Worker

Un Service Worker e' uno script in background registrato dal browser che gira indipendentemente da una pagina web aperta. Puo' intercettare le richieste di rete, mettere in cache i dati offline e - cosa piu' importante per il marketing - ricevere eventi push in entrata e mostrare notifiche, anche quando la scheda del browser e' chiusa.

Cos'e' un Service Worker?

Un Service Worker e' uno script JavaScript registrato nel browser che viene eseguito come worker completamente separato dalla pagina web. Mentre una normale pagina web termina con la chiusura della scheda, il Service Worker continua a girare in background, anche senza schede aperte. E' la base tecnica delle moderne Progressive Web App (PWA) e l'unico modo per ricevere notifiche push nel browser.

I Service Worker sono stati introdotti da Google nel 2014 e sono oggi supportati in tutti i browser moderni (Chrome, Edge, Firefox, Safari, Samsung Internet, Opera). Sostituiscono la vecchia e ormai obsoleta API Application Cache.

Ciclo di vita di un Service Worker

  1. Registrazione: il sito chiama navigator.serviceWorker.register('/sw.js'). Il browser carica lo script e lo analizza.
  2. Installazione: il Service Worker esegue il suo evento install. Di solito qui vengono pre-messe in cache le risorse.
  3. Attivazione: dopo la corretta installazione il browser attiva il Service Worker. Le versioni precedenti vengono eventualmente disattivate.
  4. Idle / Attivo: il Service Worker riposa in background e viene risvegliato solo quando arriva un evento (push, sync, fetch).
  5. Terminazione: i browser possono terminare i Service Worker inattivi in qualsiasi momento per risparmiare memoria. Al prossimo evento il worker viene riavviato.

Service Worker e notifiche push

Per le notifiche browser push il Service Worker e' indispensabile: e' l'unico ricevitore dell'evento push. Non appena arriva un messaggio push cifrato dal push service, il browser sveglia il Service Worker e consegna l'evento:

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      badge: data.badge,
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

La notifica di sistema appare anche quando la scheda del browser e' chiusa. Se l'utente vi fa clic, il browser apre l'URL di destinazione.

Funzionalita' offline e caching

Una seconda caratteristica principale del Service Worker: l'intercettazione delle richieste di rete tramite l'evento fetch. Cosi' i siti possono essere usabili anche offline (pattern PWA), mettendo in cache risorse statiche e risposte API. Per i siti delle PMI senza aspirazione app la push e' il caso d'uso principale; le funzionalita' PWA sono opzionali.

Obbligo HTTPS e scope

I Service Worker funzionano esclusivamente su HTTPS (eccezione: localhost per lo sviluppo). Un Service Worker puo' intercettare solo le richieste all'interno del proprio scope - di default il percorso del suo file. Un Service Worker registrato sotto /sw.js copre l'intero dominio; uno sotto /blog/sw.js solo /blog/*.

Debugging

Chrome DevTools offre sotto «Application → Service Workers» una panoramica di tutti i worker registrati con stato, sorgente, test push e annullamento manuale della registrazione. Firefox ha una scheda simile sotto about:debugging. Gli eventi push possono essere simulati dagli strumenti di sviluppo senza dover effettivamente inviare un messaggio.

Best practice per le PMI

  • Un solo file Service Worker per dominio. Worker diversi per percorsi diversi portano rapidamente a comportamenti incoerenti.
  • Evitare il versioning nel nome del file. I Service Worker vengono identificati dal browser tramite URL; con i suffissi di versione ogni aggiornamento deve essere registrato di nuovo. Meglio versionare il contenuto del file (ad esempio costanti const SW_VERSION = '1.4').
  • Implementare sempre il gestore del clic sulla notifica, altrimenti al clic non si apre nessuna pagina e l'utente rimane deluso.
  • Rinnovo subscription: i browser possono invalidare le subscription senza preavviso. Alla prossima visita al sito verificare di nuovo ed eventualmente registrare di nuovo.

Service Worker con SendSeven

SendSeven fornisce per il canale browser push un Service Worker preconfigurato che copre l'intero ciclo di vita push (subscribe, receive, click, unsubscribe). Integrazione con una riga di codice, nessuna configurazione JavaScript propria necessaria. Chi vuole personalizzazioni proprie riceve il codice sorgente del Service Worker e puo' farne un fork. Ogni messaggio push viene consegnato cifrato tramite la Web Push API - conforme al GDPR, hosting nell'UE, contratto di elaborazione dei dati ai sensi dell'art. 28 GDPR.