HTML Academy · Lezione

Pagina alternativa offline

Servire una pagina alternativa dalla cache quando l’utente è offline

Pagina alternativa offline è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Perché una pagina offline?

Quando la rete non è disponibile, un service worker può fornire un fallback offline personalizzato invece dell'errore generico "nessuna connessione" del browser. L'utente vede il brand, informazioni utili ed eventuali contenuti memorizzati nella cache: molto meglio del dinosauro di Chromium o della scheda triste di Firefox.

Memorizzazione nella cache del fallback

Nell'evento install del service worker, precarichi nella cache la pagina offline.html, così sarà sempre disponibile anche prima che l'utente visiti una pagina in modalità offline. Il browser garantisce che la cache resti disponibile fino alla modifica successiva di sw.js.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

Servire in caso di errore

Nell'evento fetch, provi prima la rete; in caso di errore, restituisca offline.html dalla cache. Questo schema (network-first con fallback offline) è la ricetta PWA più semplice e funziona per la maggior parte dei siti ricchi di contenuti.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

Controllo della modalità navigate

Utilizzi offline.html solo come fallback per le richieste di navigazione (caricamenti della pagina di livello superiore). Per le richieste di immagini, script e altre sotto-risorse, lasci che falliscano oppure utilizzi copie memorizzate nella cache specifiche per risorsa: fornire una pagina HTML al posto di un'immagine mancante danneggia ulteriormente la pagina.

Progettazione della pagina offline

Mantenga leggera la pagina offline: usi CSS minimo ed eviti risorse esterne, a meno che non siano anch'esse memorizzate nella cache. Mostri il logo del brand, un messaggio amichevole ("È offline: i contenuti verranno caricati quando ristabilirà la connessione") e un pulsante Riprova che chiami location.reload().

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

Memorizzazione nella cache delle pagine visitate

Oltre a una singola pagina offline, memorizzi nella cache le pagine caricate correttamente con una strategia stale-while-revalidate o di runtime cache. Tornando a un articolo visualizzato di recente senza rete, il contenuto viene comunque mostrato; il caricamento fallisce solo per le pagine mai visitate.

Aggiornamento della versione della cache

Quando aggiorna offline.html, modifichi la costante CACHE in sw.js (CACHE = "v2"). Nell'evento activate, elimini le cache precedenti: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Le pagine offline obsolete creano confusione.

Test della modalità offline

La limitazione "Offline" nel pannello Network di Chrome DevTools simula l'assenza di rete. Navighi nell'app; verifichi che la pagina offline venga mostrata per i percorsi non visitati e che le pagine visitate in precedenza continuino a essere caricate dalla cache.

Errore delle sotto-risorse

Se la pagina offline stessa fa riferimento a un file CSS non memorizzato nella cache, quel file non viene caricato offline e la pagina viene visualizzata senza stili. Precarichi nella cache ogni risorsa necessaria alla pagina offline (CSS, logo e font) nel gestore dell'evento install.

Oltre l'offline statico

Le PWA avanzate accodano le azioni dell'utente quando sono offline utilizzando Background Sync, le ritentano quando la connessione viene ripristinata e nel frattempo mostrano un'interfaccia ottimistica. La libreria Workbox fornisce ricette per questi schemi; è anche possibile realizzarli autonomamente, ma richiede più lavoro.

Ripristino della connessione

Ascolti l'evento online nella pagina offline per rilevare la riconnessione: window.addEventListener("online", () => location.reload()). La pagina si ricarica non appena la connessione viene ripristinata, senza che l'utente debba premere Riprova.

Non inganni l'utente

I pulsanti "Riprova" devono eseguire davvero un nuovo tentativo: chiami location.reload(), non mostri un falso indicatore di caricamento che non fa nulla. Un'interfaccia onesta mantiene la fiducia dell'utente; le pagine offline ingannevoli danneggiano rapidamente la credibilità quando gli utenti se ne accorgono.

Verifica delle conoscenze

Perché il fallback offline.html dovrebbe essere restituito solo per le richieste di navigazione (e.request.mode === "navigate") e non per tutte le richieste non riuscite?

Riepilogo

I service worker possono fornire una pagina offline personalizzata invece dell'errore generico del browser. Precarichi offline.html nella cache durante install e lo serva in fetch quando la rete fallisce e la richiesta è una navigazione. Mantenga la pagina autonoma, assegni una versione alla cache per gli aggiornamenti e ascolti l'evento online per ricaricarla automaticamente. Esegua i test con la limitazione offline di DevTools.

Domande Frequenti

La lezione «Pagina alternativa offline» è gratuita?

Sì — il testo completo di «Pagina alternativa offline» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Pagina alternativa offline»?

Servire una pagina alternativa dalla cache quando l’utente è offline Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Pagina alternativa offline»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy