Sebbene il ciclo di vita del service worker garantisca un processo di installazione e aggiornamento prevedibile, può rendere il ciclo di sviluppo locale un po' più complesso.
Nel tipico ciclo di sviluppo locale, gli sviluppatori salvano le modifiche ai file in un editor di testo, quindi passano al browser per verificare le modifiche e il processo si ripete. Quando un service worker si trova nel mix, questo ciclo è per lo più lo stesso, ma potrebbero esserci differenze tra ciò che lo sviluppatore si aspetta e ciò che fa il browser.
Eccezioni per lo sviluppo locale
In generale, le API dei service worker sono disponibili solo nelle pagine pubblicate tramite HTTPS, ma esistono eccezioni a questa regola in cui potrebbero essere disponibili tramite HTTP.
Un'eccezione degna di nota sono le pagine pubblicate con più di 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 locale quando più progetti richiedono nomi host separati.
In questi casi, è possibile eseguire il provisioning di un certificato autofirmato.
Una soluzione alternativa più pratica è indicare al browser di creare eccezioni per i test dei service worker.
Per Chrome, vai a chrome://flags/#unsafely-treat-insecure-origin-as-secure
e specifica 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 con un service worker nel mix può portare a comportamenti apparentemente inaspettati.
Ad esempio, supponiamo che venga applicata una strategia solo cache per le risorse statiche senza versione o per una pagina "Sei offline" pre-memorizzata nella cache che dovrebbe essere aggiornata al ricaricamento dopo aver apportato modifiche.
Poiché una versione obsoleta di questi asset viene sempre pubblicata da un'istanza Cache, sembra che non vengano mai aggiornati.
Per quanto è frustrante, il service worker sta solo facendo ciò per cui è stato creato, ma esistono alcuni modi per semplificare i test.
Il modo più efficace per testare un service worker è sicuramente quello di utilizzare finestre di navigazione private, ad esempio le finestre di navigazione in incognito di Chrome o la funzionalità Navigazione privata di Firefox.
Ogni volta che apri una finestra di navigazione privata, ricomincia da capo.
Non sono presenti service worker attivi né istanze Cache aperte. La routine per questo tipo di test è la seguente:
- Apri una finestra di navigazione privata.
- Vai a una pagina in cui viene registrato un service worker.
- Verifica se il service worker si comporta come previsto.
- Chiudi la finestra di navigazione in incognito.
- 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 essere utili, anche se in qualche modo possono modificare 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 persino annullarne del tutto la registrazione. In alto ci sono anche tre pulsanti di attivazione/disattivazione che aiutano lo sviluppo.
- Offline simula condizioni offline. Ciò è utile per verificare se un service worker attivo sta pubblicando contenuti offline.
- Aggiorna al ricaricamento: se attivata/disattivata, recupera nuovamente e sostituisce l'attuale service worker ogni volta che la pagina viene ricaricata.
- L'opzione Bypass per rete, se attivata/disattivata, aggira qualsiasi codice nell'evento
fetchdi un service worker e recupera sempre i contenuti dalla rete.
Si tratta di pulsanti di attivazione/disattivazione utili, in particolare l'opzione Bypass per la rete. Si tratta di una soluzione eccellente per lo sviluppo di un progetto con un service worker attivo, ma anche per garantire che l'esperienza funzioni come previsto senza un service worker.
Firefox ha un riquadro dell'applicazione simile negli strumenti per sviluppatori, ma la funzionalità è limitata alla visualizzazione di quali service worker sono installati, nonché alla possibilità di annullare manualmente la registrazione di qualsiasi service worker attivo per la pagina corrente. È altrettanto utile, ma richiede uno sforzo manuale maggiore nel ciclo di sviluppo locale.
Maiusc e ricarica
Quando sviluppi localmente con un service worker attivo senza bisogno della funzionalità fornita da aggiornamento all'aggiornamento o ignora per la rete, è utile anche tenere premuto Maiusc e premere il pulsante di aggiornamento.
Questo processo è chiamato aggiornamento forzato, che ignora la cache HTTP per la rete. Quando un service worker è attivo, anche un aggiornamento forzato ignorerà completamente il service worker.
Questa funzionalità è ottima se c'è incertezza sul funzionamento di una particolare strategia di memorizzazione nella cache come previsto ed è utile recuperare tutto dalla rete per confrontare i comportamenti con e senza un service worker. Meglio ancora, è un comportamento specifico, quindi tutti i browser che supportano i service worker lo osservano.
Ispezione dei contenuti della cache
È difficile capire se una strategia di memorizzazione nella cache funziona come previsto se non è possibile ispezionare la cache.
Certo, la cache potrebbe essere ispezionata nel codice,
ma questo è un processo che coinvolge debugger e/o istruzioni console quando uno strumento visivo sarebbe più adatto all'attività.
Il riquadro dell'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. - La 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
Cache.
Questa Graphic User Interface semplifica l'ispezione delle cache dei service worker per verificare se gli elementi sono stati aggiunti, aggiornati o rimossi del tutto 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.
Simulare una quota di spazio di archiviazione
Nei siti web con molti asset statici di grandi dimensioni (come immagini ad alta risoluzione), è possibile raggiungere le quote di spazio di archiviazione. In questo caso, il browser rimuove dalla cache gli elementi che ritiene obsoleti o che debbano essere sacrificati per fare spazio a nuovi asset.
La gestione delle quote di spazio di archiviazione dovrebbe essere parte dello sviluppo dei service worker e Workbox rende questo processo più semplice rispetto alla gestione autonoma. Con o senza Workbox, tuttavia, potrebbe essere consigliabile simulare una quota di archiviazione personalizzata per testare la logica di gestione della cache.
Il riquadro dell'applicazione in DevTools di Chrome ha un riquadro secondario Spazio di archiviazione che offre informazioni sulla quantità di spazio di archiviazione attualmente utilizzata dalla pagina. Consente inoltre di specificare una quota personalizzata in megabyte. Quando questa funzionalità è attiva, Chrome applica la quota di spazio di archiviazione personalizzata in modo che possa essere testata.
Per inciso, questo riquadro secondario contiene anche un pulsante Cancella dati del sito e un'intera serie di caselle di controllo associate relative all'opzione che deve essere deselezionata quando l'utente fa clic sul pulsante.
Tra questi elementi sono presenti eventuali istanze Cache aperte e la possibilità di annullare la registrazione di qualsiasi service worker attivo che controllano la pagina.
Sviluppo semplificato, 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 variegato, ma non deve essere doloroso. Grazie a questi suggerimenti, lo sviluppo con un service worker attivo dovrebbe essere molto più trasparente e prevedibile, in modo da offrire una migliore esperienza di sviluppo.