Aggiorna

Hai pubblicato la tua PWA: alcuni utenti la utilizzano dal browser, altri la installano sui propri dispositivi. Quando aggiorni l'app, è importante applicare le best practice per evitare gli errori.

Puoi aggiornare:

  • Dati delle app.
  • Asset già memorizzati nella cache nei dispositivi.
  • Il file del service worker o le sue dipendenze.
  • Metadati del file manifest.

Diamo un'occhiata alle best practice per ciascuno di questi elementi.

Aggiornamento dati

Per aggiornare i dati, come quelli archiviati in IndexedDB, puoi utilizzare strumenti come Fetch, WebRTC o WebSocket API. Se la tua app supporta le funzionalità offline, ricordati di tenere aggiornati anche i dati che le supportano.

Sui browser compatibili ci sono opzioni per sincronizzare i dati, non solo quando l'utente apre la PWA, ma anche in background. Le opzioni sono le seguenti:

  • Sincronizzazione in background: salva le richieste non riuscite e le riprova utilizzando la sincronizzazione del service worker.
  • Sincronizzazione periodica in background sul web: sincronizza periodicamente i dati in background, in orari specifici, consentendo all'app di fornire dati aggiornati anche se l'utente non ha ancora aperto l'app.
  • Recupero in background: scarica file di grandi dimensioni, anche quando la PWA è chiusa.
  • Push web: invia un messaggio dal server che riattiva il service worker e invia una notifica all'utente. In genere, questa operazione viene chiamata "notifica push". Questa API richiede l'autorizzazione dell'utente.

Tutte queste API vengono eseguite dal contesto del service worker. Attualmente sono disponibili solo sui browser basati su Chromium, su Android e sui sistemi operativi desktop. Quando utilizzi una di queste API, puoi eseguire il codice nel thread del service worker, ad esempio per scaricare i dati dal server e aggiornare i dati IndexedDB.

Aggiornamento degli asset

L'aggiornamento degli asset include le eventuali modifiche ai file che utilizzi per visualizzare l'interfaccia dell'app, ad esempio HTML, CSS, JavaScript e immagini. Ad esempio, una modifica nella logica della tua app, un'immagine che fa parte dell'interfaccia o un foglio di stile CSS.

Pattern di aggiornamento

Di seguito sono riportati alcuni pattern comuni per gestire gli aggiornamenti delle app, ma puoi sempre personalizzare la procedura in base alle tue esigenze:

  • Aggiornamento completo: ogni modifica, anche minima, attiva la sostituzione dell'intero contenuto della cache. Questo pattern riproduce il modo in cui le app specifiche per dispositivo gestiscono gli aggiornamenti e consumerà più larghezza di banda e richiederà più tempo.
  • Aggiornamento degli asset modificati: vengono sostituiti nella cache solo gli asset modificati dall'ultimo aggiornamento. Viene spesso implementato utilizzando una libreria come Workbox. Si tratta della creazione di un elenco di file memorizzati nella cache, di una rappresentazione hash del file e dei timestamp. Con queste informazioni, il service worker confronta l'elenco con gli asset memorizzati nella cache e decide quali asset aggiornare.
  • Aggiornamento dei singoli asset: ogni asset viene aggiornato singolarmente in caso di modifica. La strategia di aggiornamento dei dati non aggiornata descritta nel Capitolo Pubblicazione è un esempio di aggiornamento dei singoli asset.

Quando eseguire l'aggiornamento

Un'altra buona pratica è trovare un buon momento per verificare la presenza di aggiornamenti e applicarli. Ecco alcune possibilità a disposizione:

  • Quando il service worker si riattiva. Non ci sono eventi da rimanere in ascolto per questo momento, ma il browser eseguirà qualsiasi codice nell'ambito globale del service worker quando si riattiva.
  • Nel contesto della finestra principale della PWA, dopo che il browser ha caricato la pagina, per evitare di rallentare il caricamento dell'app.
  • Quando vengono attivati eventi in background, ad esempio quando la PWA riceve una notifica push o si attiva una sincronizzazione in background. In questo modo, puoi aggiornare la cache e gli utenti avranno la nuova versione dell'asset alla successiva apertura dell'app.

Aggiornamenti in tempo reale

Puoi anche scegliere se applicare un aggiornamento quando l'app è aperta (pubblicata) o chiusa. Con l'approccio chiuso per app, anche se l'app ha scaricato nuovi asset, non apporterà alcuna modifica e utilizzerà le nuove versioni al caricamento successivo.

Un aggiornamento in tempo reale indica che, non appena l'asset viene aggiornato nella cache, la PWA sostituisce l'asset nel caricamento corrente. Si tratta di un'attività complessa non trattata in questo corso. Alcuni strumenti che consentono di implementare questo aggiornamento sono livereload-js e l'API CSSStyleSheet.replace() di aggiornamento degli asset CSS.

Aggiornamento del service worker

Il browser attiva un algoritmo di aggiornamento quando il service worker o le sue dipendenze cambiano. Il browser rileva gli aggiornamenti utilizzando un confronto byte per byte tra i file memorizzati nella cache e le risorse provenienti dalla rete.

Quindi, il browser tenta di installare la nuova versione del service worker e il nuovo service worker sarà nello stato In attesa, come descritto nel Capitolo Service worker. La nuova installazione eseguirà l'evento install per il nuovo service worker. Se memorizzi nella cache gli asset in quel gestore di eventi, anche gli asset verranno memorizzati nella cache.

Rilevamento delle modifiche al service worker

Per rilevare che un nuovo service worker è pronto e installato, utilizziamo l'evento updatefound della registrazione del service worker. Questo evento viene attivato quando inizia l'installazione del nuovo service worker. Dobbiamo attendere che lo stato passi a installed con l'evento statechange. Controlla quanto segue:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

Forza override

Il nuovo service worker verrà installato, ma in attesa di attivazione per impostazione predefinita. Il tempo di attesa impedisce al nuovo service worker di assumere il controllo dei vecchi client che potrebbero non essere compatibili con la nuova versione.

Anche se non è consigliato, il nuovo service worker può saltare il periodo di attesa e avviare l'attivazione immediatamente.

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

L'evento controllerchange viene attivato quando cambia il service worker che controlla la pagina corrente. Ad esempio, un nuovo lavoratore ha saltato l'attesa ed è diventato il nuovo lavoratore attivo.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

Aggiornamento dei metadati

Puoi anche aggiornare i metadati dell'app, che vengono impostati principalmente nel file manifest dell'app web. Ad esempio, aggiorna l'icona, il nome o l'URL di avvio oppure puoi aggiungere una nuova funzionalità, ad esempio le scorciatoie delle app. Ma cosa succede a tutti gli utenti che hanno già installato l'app con l'icona precedente sui propri dispositivi? Come e quando ricevono la versione aggiornata?

La risposta dipende dalla piattaforma. Vediamo le opzioni disponibili.

Safari su browser iOS, iPadOS e Android

Su queste piattaforme, l'unico modo per ottenere i nuovi metadati del file manifest è reinstallare l'app dal browser.

Google Chrome su Android con WebAPK

Una volta che l'utente avrà installato la PWA su Android utilizzando Google Chrome con WebAPK attivato (la maggior parte delle installazioni di PWA di Chrome), l'aggiornamento verrà rilevato e applicato in base a un algoritmo. Controlla i dettagli in questo articolo sugli aggiornamenti del file manifest.

Alcune note aggiuntive sulla procedura:

Se l'utente non apre la PWA, il relativo WebAPK non verrà aggiornato. Se il server non risponde con il file manifest (si verifica un errore 404), Chrome non controllerà la disponibilità di aggiornamenti per almeno 30 giorni, anche se l'utente apre la PWA.

Vai alla pagina about:webapks in Chrome su Android per visualizzare lo stato del flag "richiede aggiornamento" e richiedi un aggiornamento. Per saperne di più su questo strumento di debug, consulta il capitolo Strumenti e debug.

Samsung Internet su Android con WebAPK

La procedura è simile a quella della versione di Chrome. In questo caso, se il manifest PWA richiede un aggiornamento, durante le 24 ore successive il WebAPK verrà aggiornato sulla rete Wi-Fi dopo la minazione del WebAPK aggiornato.

Google Chrome e Microsoft Edge su computer

Sui dispositivi desktop, quando viene avviata la PWA, il browser determina l'ultima volta che ha controllato il manifest locale per rilevare eventuali modifiche. Se il file manifest non è stato esaminato dall'ultimo avvio del browser o non è stato controllato nelle ultime 24 ore, il browser effettua una richiesta di rete per il file manifest, quindi lo confronta con la copia locale.

Quando le proprietà selezionate vengono aggiornate, verrà attivato un aggiornamento dopo la chiusura di tutte le finestre.

Avvisare l'utente

Alcune strategie di aggiornamento richiedono un ricaricamento o una nuova navigazione da parte dei client. Dovrai comunicare all'utente che c'è un aggiornamento in attesa, ma offrigli la possibilità di aggiornare la pagina nel momento più opportuno.

Per informare l'utente, sono disponibili le seguenti opzioni:

  • Utilizza il DOM o l'API Canvas per visualizzare una notifica sullo schermo.
  • Utilizza l'API Web Notifications. Questa API fa parte dell'autorizzazione push per generare una notifica nel sistema operativo. Dovrai richiedere l'autorizzazione web push per utilizzarlo, anche se non usi il protocollo per i messaggi push del tuo server. Questa è l'unica opzione disponibile se la PWA non è aperta.
  • Utilizza l'API Badging per mostrare la disponibilità di aggiornamenti nell'icona installata della PWA

Una notifica di aggiornamento mostrata nel DOM..

Scopri di più sull'API Badging

L'API Badging ti consente di contrassegnare l'icona della PWA con un numero di badge o con un punto del badge sui browser compatibili. Un punto del badge è un piccolo segno all'interno dell'icona installata che indica che qualcosa sta aspettando all'interno dell'app.

Esempio di Twitter con otto notifiche e un'altra app con un badge a forma di bandierina.

Devi chiamare setAppBadge(count) sull'oggetto navigator per impostare un numero di badge. Puoi farlo dal contesto del service worker o della finestra quando sai che c'è un aggiornamento per avvisare l'utente.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

Per cancellare il badge, chiama clearAppBadge() sullo stesso oggetto:

navigator.clearAppBadge();

Risorse