1. Ti diamo il benvenuto
In questo lab, prenderai un'applicazione web esistente e la farai funzionare offline. Questo è il primo di una serie di codelab complementari per il workshop sulle app web progressive. In questa serie sono presenti altri sette codelab.
Obiettivi didattici
- Scrivere 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 di base e JavaScript
Che cosa ti serve
- Un browser che supporta i service worker
2. Configurazione
Inizia clonando o scaricando il codice di avvio necessario per completare questo codelab:
Se cloni il repository, assicurati di trovarti nel ramo starter. Il file ZIP contiene anche il codice per questo ramo.
Questa codebase richiede Node.js 14 o versioni successive. Una volta che il codice è disponibile, esegui npm ci dalla riga di comando nella cartella del codice per installare tutte le dipendenze necessarie. Poi, esegui npm start per avviare il server di sviluppo per il codelab.
Il file README.md del codice sorgente fornisce una spiegazione di tutti i file distribuiti. Inoltre, di seguito sono riportati i file esistenti chiave con cui lavorerai durante questo codelab:
File chiave
js/main.js- File JavaScript dell'applicazione principaleservice-worker.js- File del service worker dell'applicazione
3. Testare offline
Prima di apportare modifiche, eseguiamo un test per dimostrare che l'app web al momento non funziona offline. Per farlo, metti il computer offline e ricarica l'app web oppure, se utilizzi Chrome:
- Apri gli Strumenti per sviluppatori di Chrome
- Passa alla scheda Applicazione
- Passa alla sezione Service worker
- Seleziona la casella di controllo Offline
- Aggiorna la pagina senza chiudere gli Strumenti per sviluppatori di Chrome
Ora che il sito è stato testato e non è stato caricato correttamente offline, è il momento di aggiungere alcune funzionalità online. Deseleziona la casella di controllo offline e continua con il passaggio successivo.
4. Rendere disponibile offline
È il momento di aggiungere un service worker di base. Questa operazione avverrà in due passaggi: la registrazione del service worker e la memorizzazione nella cache delle risorse.
Registrare un service worker
Esiste già un file del service worker vuoto, quindi, per assicurarti che le modifiche vengano visualizzate, registriamolo nella nostra applicazione. Per farlo, aggiungi il seguente codice all'inizio di js/main.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 {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Spiegazione
Questo codice registra il file del service worker service-worker.js vuoto una volta caricata la pagina e solo se il sito supporta i service worker.
Precaricare le risorse
Per far funzionare l'app web offline, il browser deve essere in grado di rispondere alle richieste di rete e scegliere dove indirizzarle. Per farlo, 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);
}),
);
});
Ora torna al browser, chiudi la scheda di anteprima e riaprila. Dovresti vedere console.logs corrispondenti ai diversi eventi nel service worker.
Poi, torna 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 specificati in precacheResources vengono quindi caricati nella cache utilizzando il metodo cache.addAll. Questa operazione è chiamata precaricamento perché memorizza preventivamente nella cache l'insieme di file durante l'installazione, anziché memorizzarli nella cache quando sono necessari o richiesti.
Una volta che 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 e, se la trova, risponde con la risorsa memorizzata nella cache. Se non viene trovata una corrispondenza, la risorsa viene richiesta normalmente.
La memorizzazione nella cache delle risorse consente all'app di funzionare offline evitando le richieste di rete. Ora l'app può rispondere con un codice di stato 200 quando è offline.
5. Complimenti!
Hai imparato a rendere disponibile offline la tua app web utilizzando i service worker e l'API Cache Storage.
Il prossimo codelab della serie è Utilizzare Workbox