1. Ti diamo il benvenuto
In questo lab, acquisirai un'applicazione web esistente e la utilizzerai offline. Questo è il primo di una serie di codelab companion per il workshop di Progressive Web App. Ci sono altri sette codelab in questa serie.
Obiettivi didattici
- Scrivi un service worker a mano
- Aggiungere un service worker a un'applicazione web esistente
- Utilizzare il service worker e l'API Cache Storage per rendere le risorse disponibili offline
Che cosa devi sapere
- HTML e JavaScript di base
Cosa ti occorre
- Un browser che supporta i service worker
2. Configura
Clona o scarica il codice di avvio necessario per completare questo codelab:
Se cloni il repository, assicurati di essere nel ramo starter. Il file ZIP contiene anche il codice del ramo.
Questo codebase richiede Node.js 14 o versioni successive. Quando hai a disposizione il codice, esegui npm ci dalla riga di comando nella cartella del codice per installare tutte le dipendenze necessarie. Quindi, esegui npm start per avviare il server di sviluppo per il codelab.
Il file README.md del codice sorgente fornisce una spiegazione per tutti i file distribuiti. Inoltre, i seguenti sono i file principali esistenti con cui lavorerai in questo codelab:
File chiave
js/main.js: file JavaScript dell'applicazione principaleservice-worker.js: file del service worker dell'applicazione
3. Test offline
Prima di apportare modifiche, testiamo che l'app web al momento non funzioni offline. A tale scopo, disattiva il computer e ricarica l'applicazione web oppure, se stai utilizzando Chrome:
- Apri Chrome Dev Tools
- Passa alla scheda Applicazione
- Passa alla sezione Service worker
- Seleziona la casella di controllo Offline
- Aggiorna la pagina senza chiudere Chrome Dev Tools
Con il sito testato e il mancato caricamento offline, è ora di aggiungere alcune funzionalità online. Deseleziona la casella di controllo offline e vai al passaggio successivo.
4. Passa alla modalità offline
È ora di aggiungere un service worker di base! L'operazione avviene in due passaggi: la registrazione del service worker e la memorizzazione nella cache delle risorse.
Registra un service worker
C'è già un file del service worker vuoto, quindi per assicurarti che le modifiche vengano visualizzate, registralo nella nostra applicazione. A tale scopo, aggiungi il seguente codice all'inizio di js/main.js:
import swURL from 'sw:../service-worker.js';
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
const reg = await navigator.serviceWorker.register(swURL);
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Spiegazione
Questo codice registra il file vuoto del service worker service-worker.js quando la pagina è stata caricata e solo se il sito supporta i service worker.
Risorse di pre-cache
Per fare in modo che l'applicazione web funzioni offline, il browser deve essere in grado di rispondere alle richieste di rete e di scegliere dove indirizzarle. A tale scopo, aggiungi quanto segue a service-worker.js
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
A questo punto torna al browser, chiudi la scheda e riaprila. Dovresti vedere i console.log corrispondenti ai diversi eventi nel service worker.
Passa di nuovo offline e aggiorna il sito. Dovresti vedere che si carica anche se sei offline.
Spiegazione
Durante l'evento di installazione del service worker, viene aperta una cache denominata utilizzando l'API Cache Storage. I file e le route specificate in precacheResources vengono quindi caricati nella cache utilizzando il metodo cache.addAll. Questa operazione è detta precaching, in quanto memorizza preventivamente nella cache il set di file durante l'installazione, anziché memorizzarlo nella cache quando è necessario o richiesto.
Quando il service worker controlla il sito, le risorse richieste passano attraverso il service worker come un proxy. Ogni richiesta attiva un evento di recupero che, in questo service worker, cerca una corrispondenza nella cache, se esiste una corrispondenza, risponde con la risorsa memorizzata nella cache. Se non esiste una corrispondenza, la risorsa viene richiesta normalmente.
La memorizzazione nella cache delle risorse consente all'app di lavorare offline evitando richieste di rete. Ora l'app può rispondere con un codice di stato 200 offline.
5. Complimenti!
Hai imparato a disattivare la tua app web utilizzando i service worker e l'API cache storage.
Il prossimo codelab della serie è Utilizzo di Workbox