La memorizzazione nella cache degli asset con un service worker può velocizzare le visite ripetute e fornire assistenza offline. Workbox semplifica tutto questo ed è incluso per impostazione predefinita nell'app Create React.
Workbox è integrato
Crea l'app React (CRA) con una configurazione predefinita che prememorizza nella cache tutte le
asset statici nella tua applicazione con ogni build.
Perché è utile?
I Service worker consentono di archiviare risorse importanti nella cache (prememorizzazione nella cache) in modo che quando un utente carica la pagina web per una seconda volta, il browser può recuperarle dal service worker invece di effettuare richieste in rete. Ciò si traduce in un caricamento pagina più rapido nelle visite ripetute e nel di mostrare i contenuti quando l'utente è offline.
Workbox in CRA
Workbox è una raccolta di strumenti che ti consentono di creare e gestire i servizi
worker. In CRA,
workbox-webpack-plugin
è già incluso nella build di produzione e deve essere abilitato solo
il file src/index.js per registrare un nuovo service worker con ogni
build:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
Ecco un esempio di app React creata con CRA in cui è abilitato un service worker abilitato tramite questo file:
Per controllare quali asset vengono memorizzati nella cache:
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
. - Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica l'app.
Noterai che, invece di mostrare la dimensione del payload, la colonna Size mostra
un messaggio (from ServiceWorker) per indicare che le risorse sono state recuperate
del Service worker.
Poiché il service worker memorizza nella cache tutti gli asset statici, prova a usare l'applicazione mentre sei offline:
- Nella scheda Rete in DevTools, attiva la casella di controllo Offline per simulare un'esperienza offline.
- Ricarica l'app.
L'applicazione funziona esattamente allo stesso modo, anche senza una rete connessione!
Modifica delle strategie di memorizzazione nella cache
La strategia di pre-memorizzazione predefinita usata da Workbox in CRA è cache-first, per cui tutti gli asset statici vengono recuperati dalla cache del service worker e se l'operazione non riesce (se, ad esempio, la risorsa non viene memorizzata nella cache), viene effettuata la richiesta di rete. Questo è il modo in cui i contenuti possono essere comunque mostrati agli utenti anche quando si trovano in una lo stato offline.
Sebbene Workbox offra il supporto necessario per definire strategie e approcci diversi
alla memorizzazione nella cache di risorse statiche e dinamiche, la configurazione predefinita in CRA non può
modifiche o sovrascritture, a meno che non vengano espulse del tutto. Tuttavia, esiste un
proposta aperta
per scoprire come aggiungere il supporto di un file workbox.config.js esterno. Questo
consente agli sviluppatori di eseguire l'override delle impostazioni predefinite creando
singolo file workbox.config.js.
Gestione di una strategia cache-first
Utilizzando prima la cache del service worker e poi la rete è un ottimo modo per creare siti che si caricano più velocemente alle visite successive e lavorare offline in qualche modo. Tuttavia, ci sono alcune cose che devono da prendere in considerazione:
- Come possono essere testati i comportamenti di memorizzazione nella cache da parte di un service worker?
- Deve essere visualizzato un messaggio che consenta agli utenti di sapere che stanno guardando contenuti memorizzati nella cache?
La CRA documentazione spiega questi punti e altro ancora in dettaglio.
Conclusione
Usa un service worker per prememorizzare nella cache risorse importanti nella tua applicazione per offrire agli utenti un'esperienza più rapida e l'assistenza offline.
- Se utilizzi CRA, abilita il service worker preconfigurato in
src/index.js. - Se non utilizzi CRA per creare un'applicazione React, includi uno dei
molte librerie fornite da Workbox, ad esempio
workbox-webpack-plugin, nei tuoi un processo di compilazione. - Tieni d'occhio quando CRA supporterà un file di override
workbox.config.jsin questo Problema GitHub.