La memorizzazione nella cache degli asset con un service worker può velocizzare le visite ripetute e fornire supporto offline. Workbox semplifica questa operazione ed è incluso in Create React App per impostazione predefinita.
Workbox è integrato in Create React App (CRA) con una configurazione predefinita che prememorizza nella cache tutti gli asset statici dell'applicazione a ogni build.
Perché è utile?
I service worker ti consentono di memorizzare risorse importanti nella cache (memorizzazione nella pre-cache) in modo che, quando un utente carica la pagina web per la seconda volta, il browser possa recuperarle dal service worker anziché inviare richieste alla rete. In questo modo, i caricamenti pagina sono più veloci durante le visite ripetute e i contenuti possono essere mostrati quando l'utente è offline.
Workbox in CRA
Workbox è una raccolta di strumenti che ti consentono di creare e gestire i service worker. In CRA,
workbox-webpack-plugin
è già incluso nella build di produzione e deve essere attivato solo nel
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 che ha un service worker attivato tramite questo file:
Per vedere quali asset vengono memorizzati nella cache:
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero
. - Premi "Ctrl+Maiusc+J" (o "Cmd+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica l'app.
Noterai che, anziché 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 mentre sei offline:
- Nella scheda Rete di 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 connessione di rete.
Modifica delle strategie di memorizzazione nella cache
La strategia di pre-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 va a buon fine (ad esempio se la risorsa non è memorizzata nella cache), viene effettuata la richiesta di rete. In questo modo, i contenuti possono essere pubblicati per gli utenti anche quando sono completamente offline.
Sebbene Workbox fornisca il supporto per definire diverse strategie e approcci 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, esiste una proposta aperta per valutare l'aggiunta del supporto per un file workbox.config.js esterno. In questo modo, gli sviluppatori possono eseguire l'override delle 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 alla rete è un ottimo modo per creare siti che si caricano più velocemente nelle visite successive e funzionano offline in una certa misura. Tuttavia, ci sono alcuni aspetti da prendere in considerazione:
- Come si possono testare i comportamenti di memorizzazione nella cache di un service worker?
- Dovrebbe esserci un messaggio per gli utenti che li informi che stanno visualizzando contenuti memorizzati nella cache?
La documentazione del CRA spiega questi punti e altri in dettaglio.
Conclusione
Utilizza un service worker per pre-memorizzare nella cache le risorse importanti della tua applicazione per offrire un'esperienza più veloce ai tuoi utenti e il supporto offline.
- Se utilizzi CRA, attiva il service worker preconfigurato in
src/index.js. - Se non utilizzi CRA per creare un'applicazione React, includi una delle
tante librerie fornite da Workbox, ad esempio
workbox-webpack-plugin, nel tuo processo di build. - Tieni d'occhio quando CRA supporterà un file di override
workbox.config.jsin questo problema di GitHub.