Miglioramento dell'esperienza di sviluppo dei service worker

Sebbene il ciclo di vita del service worker garantisca un processo di installazione e aggiornamento prevedibile, questo può rendere il ciclo di sviluppo locale un po' più dettagliato.

Nel tipico ciclo di sviluppo locale, gli sviluppatori salvano le modifiche ai file in un editor di testo, quindi passa al browser per verificare le modifiche e il processo si ripete. Quando un service worker è nel mix, il ciclo è in gran parte lo stesso, ma potrebbero esserci differenze tra ciò che si aspetta lo sviluppatore e ciò che fa il browser.

Eccezioni per lo sviluppo locale

In generale, le API dei service worker sono disponibili solo sulle pagine pubblicate tramite HTTPS, ma ci sono delle eccezioni a questa regola in cui potrebbero essere disponibili tramite HTTP. Un'eccezione degna di nota sono le pagine pubblicate su localhost, che funzionano bene per lo sviluppo locale.

Tuttavia, non è insolito per gli sviluppatori specificare nomi host locali oltre a localhost in un file host. Questa operazione è necessaria negli ambienti di sviluppo locali quando più progetti richiedono nomi host separati. In questi casi, il provisioning di un certificato autofirmato andrà a buon fine.

Una soluzione alternativa più pratica è indicare al browser di fare eccezioni per i test dei service worker. Per Chrome, vai a chrome://flags/#unsafely-treat-insecure-origin-as-secure e specificare origini non sicure da trattare come origini sicure. Firefox offre un modo per testare i service worker su origini non sicure tramite l'impostazione devtools.serviceWorkers.testing.enabled in about:config.

Ausili per lo sviluppo dei Service worker

Lo sviluppo locale in cui un service worker è integrato può portare a comportamenti apparentemente imprevisti. Ad esempio, supponiamo che venga implementata una strategia solo cache per gli asset statici senza versione o un "sei offline" pre-memorizzato nella cache pagina che dovrebbe essere aggiornata al ricaricamento dopo aver apportato modifiche. Poiché una versione obsoleta di questi asset viene sempre pubblicata da un'istanza Cache, apparentemente non si aggiornano mai! Per quanto frustranti, il service worker sta solo facendo ciò per cui era stato ma ci sono alcuni modi per semplificare i test.

Il modo di gran lunga più efficace per testare un service worker è quello di utilizzare finestre di navigazione privata, come le finestre di navigazione in incognito in Chrome. o la funzione Navigazione privata di Firefox. Ogni volta che apri una finestra di navigazione privata, ricomincia da capo. Non ci sono service worker attivi e nessuna istanza Cache aperta. La routine per questo tipo di test è:

1. Apri una finestra di navigazione privata.
2. Vai a una pagina che registra un service worker.
3. Verifica se il service worker si comporta come previsto.
4. Chiudi la finestra di navigazione in incognito.
5. Ripeti.

Con questo processo puoi imitare fedelmente il ciclo di vita del service worker.

Altri strumenti di test disponibili nel riquadro dell'applicazione Chrome DevTools possono aiutare, ma possono modificare in qualche modo il ciclo di vita dei service worker.

Il riquadro dell'applicazione ha un riquadro secondario denominato Service worker, che mostra i service worker attivi per la pagina corrente. Ogni service worker attivo può essere aggiornato manualmente o addirittura annullare del tutto la registrazione. Nella parte superiore ci sono anche tre pulsanti di attivazione/disattivazione che aiutano lo sviluppo.

1. Offline simula condizioni offline. Questa opzione è utile per verificare se un service worker attivo sta pubblicando contenuti offline.
2. Aggiornamento al ricaricamento: quando questa opzione è attivata, recupera e sostituisce il service worker corrente ogni volta che la pagina viene ricaricata.
3. L'opzione Ignora per la rete, se attivata, aggira qualsiasi codice nell'evento fetch di un service worker e recupera sempre i contenuti dalla rete.

Si tratta di opzioni di attivazione/disattivazione utili, in particolare Ignora per la rete. il che è ottimo per sviluppare un progetto con un service worker attivo, ma vuole anche garantire che l'esperienza funzioni come previsto senza un service worker.

Gli strumenti per sviluppatori di Firefox dispongono di un riquadro dell'applicazione simile, ma la funzionalità si limita a mostrare quali service worker sono installati, nonché la possibilità di annullare manualmente la registrazione di tutti i service worker attivi per la pagina corrente. È altrettanto utile, ma richiede un maggiore impegno manuale nel ciclo di sviluppo locale.

Sposta e ricarica

Quando si sviluppa localmente con un service worker attivo senza la necessità della funzionalità fornita dall'aggiornamento all'aggiornamento o dall'esclusione per la rete, è utile anche tenere premuto Maiusc e premere il pulsante di aggiornamento.

Questa operazione viene chiamata aggiornamento forzato, che ignora la cache HTTP per la rete. Quando un service worker è attivo, un aggiornamento forzato ignorerà completamente anche il service worker.

Questa funzionalità è ottima quando c'è incertezza sul funzionamento di una particolare strategia di memorizzazione nella cache, ed è utile prendere tutti i dati presenti nella rete per confrontare i comportamenti con e senza un service worker. Meglio ancora, si tratta di un comportamento specifico, quindi verrà osservato da tutti i browser che supportano i service worker.

Ispezione dei contenuti della cache

È difficile capire se una strategia di memorizzazione nella cache funziona come previsto se non è possibile ispezionare la cache. Certo, potrebbe essere ispezionato la cache nel codice ma si tratta di un processo che prevede debugger e/o istruzioni console, quando uno strumento visivo è più adatto per l'attività. Il riquadro Applicazione in Chrome DevTools offre un riquadro secondario per esaminare i contenuti delle istanze Cache.

Questo riquadro secondario semplifica lo sviluppo dei service worker offrendo funzionalità quali:

• Visualizza i nomi delle istanze Cache.
• Possibilità di esaminare il corpo della risposta degli asset memorizzati nella cache e le intestazioni delle risposte associate.
• Rimuovi uno o più elementi dalla cache o elimina intere istanze di Cache.

Questa Graphic User Interface semplifica l'ispezione delle cache dei service worker per verificare se gli elementi sono stati aggiunti, aggiornati o rimossi completamente dalla cache di un service worker. Firefox offre un proprio visualizzatore della cache con funzionalità simili, anche se si trova in un riquadro Spazio di archiviazione separato.

Simulazione di una quota di spazio di archiviazione

Nei siti web con molti asset statici di grandi dimensioni (ad esempio immagini ad alta risoluzione), è possibile raggiungere le quote di archiviazione. In questi casi, il browser rimuoverà dalla cache gli elementi ritenuti obsoleti o meritevoli di sacrificare per fare spazio a nuovi asset.

La gestione delle quote di archiviazione dovrebbe far parte dello sviluppo dei service worker, e Workbox semplifica questo processo rispetto alla gestione da parte tua. Con o senza Workbox, però, potrebbe essere una buona idea simulare una quota di spazio di archiviazione personalizzata per testare la logica di gestione della cache.

Il riquadro Applicazione in DevTools di Chrome ha un riquadro secondario Spazio di archiviazione che offre informazioni sulla quantità di spazio di archiviazione attuale utilizzata dalla pagina. Consente inoltre di specificare una quota personalizzata in megabyte. Quando è attiva, Chrome applica la quota di spazio di archiviazione personalizzata in modo che possa essere testata.

Tra l'altro, questo sottoriquadro contiene anche un pulsante Cancella dati del sito e tutta una serie di caselle di controllo associate relative a ciò che deve essere cancellato quando si fa clic sul pulsante. Tra questi elementi sono presenti eventuali istanze Cache aperte e la possibilità di annullare la registrazione di eventuali service worker attivi che controllano la pagina.

Sviluppo più semplice, maggiore produttività

Quando gli sviluppatori sono liberi, possono lavorare con maggiore sicurezza ed essere più produttivi. Lo sviluppo locale con un service worker può essere articolato, ma non deve essere un processo faticoso. Grazie a questi suggerimenti utili, lo sviluppo con un service worker attivo dovrebbe essere molto più trasparente e prevedibile, per migliorare l'esperienza degli sviluppatori.