La memorizzazione degli asset nella cache con un service worker può velocizzare le visite ripetute e fornire supporto offline. Workbox semplifica l'operazione ed è inclusa in Create React App per impostazione predefinita.
Workbox è integrato in Create React App (CRA) con una configurazione predefinita che memorizza nella cache tutti gli asset statici della tua applicazione con ogni build.
Perché è utile?
I service worker consentono di archiviare risorse importanti nella propria cache (pre-cache) in modo che, quando un utente carica la pagina web per la seconda volta, il browser possa recuperarle dal service worker invece di effettuare richieste alla rete. Ciò si traduce in un caricamento più rapido delle pagine in caso di visite ripetute, nonché nella capacità di mostrare i contenuti quando l'utente è offline.
Casella di lavoro in CRA
Workbox è una raccolta di strumenti che consentono di creare e gestire i worker. In CRA, workbox-webpack-plugin è già incluso nella build di produzione e deve essere abilitato nel file src/index.js per registrare un nuovo service worker per 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 per cui è abilitato un service worker tramite questo file:
Per controllare quali asset vengono memorizzati nella cache:
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
. - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica l'app.
Invece di mostrare le dimensioni del payload, la colonna Size mostra un messaggio (from ServiceWorker) per indicare che queste risorse sono state recuperate dal service worker.
Poiché il service worker memorizza nella cache tutti gli asset statici, prova a utilizzare l'applicazione in modalità offline:
- Nella scheda Rete in DevTools, seleziona la casella di controllo Offline per simulare un'esperienza offline.
- Ricarica l'app.
L'applicazione funziona esattamente allo stesso modo, anche senza una connessione di rete.
Modifica delle strategie di memorizzazione nella cache
La strategia di memorizzazione nella cache predefinita utilizzata da Workbox in CRA è cache-first, in cui tutti gli asset statici vengono recuperati dalla cache del service worker e se l'operazione non riesce (ad esempio se la risorsa non è memorizzata nella cache), viene effettuata la richiesta di rete. In questo modo, i contenuti possono essere comunque forniti agli utenti anche quando si trovano in stato offline completamente.
Sebbene Workbox fornisca il supporto per definire strategie e approcci diversi alla memorizzazione nella cache di risorse statiche e dinamiche, la configurazione predefinita in CRA non può essere modificata o sovrascritta a meno che non venga espulsa completamente. Tuttavia, è presente una
proposta aperta
per valutare l'aggiunta del supporto per un file workbox.config.js esterno. Ciò
consente agli sviluppatori di ignorare le impostazioni predefinite semplicemente creando un
singolo file workbox.config.js.
Gestione di una strategia cache-first
Affidarsi prima alla cache del service worker e poi fare ritorno sulla rete è un modo eccellente per creare siti che si caricano più velocemente alle visite successive e funzionano offline in una certa misura. Tuttavia, ci sono alcuni aspetti che devono essere presi in considerazione:
- Come è possibile testare i comportamenti di memorizzazione nella cache da parte di un service worker?
- Deve essere visualizzato un messaggio che informa gli utenti che stanno visualizzando i contenuti memorizzati nella cache?
La documentazione CRA spiega in dettaglio questi punti e molto altro.
Conclusione
Utilizza un service worker per prememorizzare le risorse importanti dell'applicazione in modo da offrire un'esperienza più rapida agli utenti e il supporto offline.
- Se utilizzi CRA, abilita il service worker preconfigurato in
src/index.js. - Se non utilizzi CRA per creare un'applicazione React, includi una delle numerose librerie fornite da Workbox, ad esempio
workbox-webpack-plugin, nel processo di compilazione. - Tieni d'occhio quando CRA supporterà un file di override
workbox.config.jsin questo problema di GitHub.