Trasformare il tuo sito in una PWA installabile e funzionante offline

Prompt

Agisci come sviluppatore web specializzato in Progressive Web App, service worker e strategie di cache.

Contesto:
- Sito o applicazione: {{sito}}
- Stack e hosting: {{stack}}
- Livello di funzionamento offline: {{livello_offline}}
- Priorità: {{priorita}}

Se il sito ha aree riservate, dati personali o contenuti che cambiano spesso, chiedimi come vengono gestiti prima di decidere cosa mettere in cache.

Consegna:
1. Il manifest dell'applicazione web: nome, nome breve, colori, display, start_url, scope e icone (192 e 512 px, più una versione maskable), con i tag da aggiungere all'HTML.
2. Il service worker con una strategia per tipo di risorsa, spiegata in una tabella: precache dello scheletro dell'app, stale-while-revalidate per CSS, JS e immagini, network-first con timeout per l'HTML e solo rete per le API autenticate.
3. La pagina offline e come viene servita quando la rete non risponde.
4. Versionamento delle cache, pulizia di quelle vecchie nell'evento activate e un flusso di aggiornamento che avvisi l'utente della nuova versione invece di ricaricare a sorpresa.
5. Il codice di registrazione del service worker e l'alternativa con Workbox se si adatta meglio a {{stack}}.
6. I limiti noti su iOS e Safari da verificare, precisando che vanno controllati nella documentazione attuale.
7. Come testarlo: pannello Application dei DevTools, simulazione offline, verifica di installabilità e casi di test concreti.

Vincoli:
- Il sito deve essere servito in HTTPS; ricordamelo se l'hosting non lo garantisce.
- Non mettere in cache risposte con dati personali o di sessione.
- Non aggiungere notifiche push né sincronizzazione in background se non lo chiedo nelle priorità.
- Segna con [DA COMPLETARE] colori, nomi e icone che non ti ho fornito.

Formato: tabella delle strategie, un blocco di codice per file con il suo percorso e un elenco di test.

Come usarlo

Esempio d'uso

Esempio di risultato

const VERSION = 'v1';
const SHELL = `shell-${VERSION}`;
const PAGINE = `pagine-${VERSION}`;
const RISORSE = `risorse-${VERSION}`;
const PRECACHE = ['/', '/offline/', '/manifest.webmanifest']; // [DA COMPLETARE: CSS/JS con hash di Astro]

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL).then((cache) => cache.addAll(PRECACHE)));
});

self.addEventListener('activate', (event) => {
  const attuali = [SHELL, PAGINE, RISORSE];
  event.waitUntil(caches.keys().then((chiavi) =>
    Promise.all(chiavi.filter((c) => !attuali.includes(c)).map((c) => caches.delete(c)))));
});

const salva = (nome, request, res) => {
  if (res.ok) { const copia = res.clone(); caches.open(nome).then((c) => c.put(request, copia)); }
  return res;
};

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET' || new URL(request.url).origin !== location.origin) return;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).then((res) => salva(PAGINE, request, res))
      .catch(async () => (await caches.match(request)) ?? caches.match('/offline/')));
    return;
  }
  event.respondWith(caches.match(request).then((inCache) => {
    const rete = fetch(request).then((res) => salva(RISORSE, request, res)).catch(() => inCache);
    return inCache ?? rete;
  }));
});

Dati chiave

Categoria

Programmazione e sviluppo · Creare siti web

Tipo di output

Codice

Livello

Intermedio

Pensato per

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Sito o applicazione, Stack e hosting, Funzionamento offline e Priorità

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti