Precauzione nella cache nell'app Crea reazione con Workbox

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.

Houssein Djirdeh

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:

1. Nella scheda Rete in DevTools, attiva la casella di controllo Offline per simulare un'esperienza offline.
2. 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.

1. Se utilizzi CRA, abilita il service worker preconfigurato in src/index.js.
2. 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.
3. Tieni d'occhio quando CRA supporterà un file di override workbox.config.js in questo Problema GitHub.