Precauzione nella cache con Workbox

La pre-memorizzazione nella cache è una delle operazioni più comuni che eseguirai in un service worker e Workbox offre molta flessibilità su come svolgere questa importante attività, indipendentemente dallo strumento di creazione di Workbox che scegli. In questa guida, scoprirai come prememorizzare nella cache gli asset utilizzando sia generateSW sia injectManifest e quale di questi metodi potrebbe essere il più adatto al tuo progetto.

Prememorizzazione nella cache con generateSW

generateSW è il modo più semplice per prememorizzare nella cache gli asset in Workbox. La cosa più importante da ricordare su generateSW è che non stai scrivendo un service worker proprio, ma stai chiedendo a Workbox di generarne uno per te. Tuttavia, puoi influenzare il suo comportamento attraverso una serie di opzioni di configurazione.

generateSW fa cose diverse per impostazione predefinita a seconda dello strumento di creazione utilizzato. Quando utilizzi workbox-webpack-plugin, non devi specificare alcuna opzione di configurazione. Per impostazione predefinita, il plug-in prememorizzerà nella cache tutto ciò che Webpack include nel suo grafico delle dipendenze e scriverà un service worker denominato service-worker.js nella directory specificata da output.path

D'altra parte, se utilizzi workbox-build o workbox-cli, per impostazione predefinita verranno prememorizzati nella cache solo gli asset HTML, CSS e JavaScript letti dal file system locale. A livello di configurazione, devi specificare swDest e l'opzione globDirectory nella configurazione di generateSW affinché la pre-memorizzazione nella cache funzioni. Con ogni probabilità vorrai configurare opzioni aggiuntive che influenzano il comportamento del tuo service worker, quindi dai un'occhiata alla documentazione.

Avviso: se troppi asset del progetto vengono prememorizzati nella cache con le impostazioni predefinite, utilizza una delle opzioni del glob per escludere le risorse nella configurazione di generateSW. Quando utilizzi workbox-webpack-plugin, consulta la documentazione GenerateSW del plug-in per scoprire come evitare che gli asset indesiderati vengano prememorizzati nella cache, poiché la sua configurazione è diversa da generateSW.

Prememorizzazione nella cache con injectManifest

Usare injectManifest non è facile come usare generateSW, ma la facilità d'uso viene migliorata rispetto a una maggiore flessibilità. Quando generateSW gestisce per te l'intera generazione dei service worker, injectManifest prende come origine un service worker che scrivi e inserisce un elenco di URL da prememorizzare nella cache, lasciando il resto del service worker così com'è.

Quando utilizzi injectManifest, sei responsabile del cablaggio della logica di pre-memorizzazione nella cache. Quando injectManifest esamina il service worker di input, cerca una variabile self.__WB_MANIFEST speciale e la sostituisce con il manifest di pre-cache. Se questa variabile non è presente, injectManifest restituirà un errore.

Nota: se devi modificare la stringa injectManifest cerca in qualcosa di diverso da self.__WB_MANIFEST, puoi specificare l'opzione injectionPoint nella sua configurazione.

L'elenco delle voci nel manifest pre-cache può essere modificato aggiungendo opzioni di configurazione aggiuntive.

Attenzione:a differenza di generateSW, injectManifest non raggruppa automaticamente il runtime di Workbox al posto tuo. Per scoprire come gestire questa opzione nei casi d'uso che si basano su injectManifest, consulta il confronto fianco a fianco di seguito.

Confronto fianco a fianco

Fai clic su ciascuna delle schede seguenti per confrontare l'utilizzo dei metodi generateSW e injectManifest:

Poiché generateSW genera un service worker, devi solo specificare una configurazione. Di seguito è riportato un esempio che utilizza workbox-build:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Il service worker può quindi essere creato sulla riga di comando con Node:

node build-sw.js

Poiché injectManifest richiede un service worker di origine, un esempio con rendimento minimo richiede un file del service worker di origine. Se tutto ciò che serve è la pre-memorizzazione nella cache, il Service worker di input potrebbe avere il seguente aspetto:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Prendi nota della stringa self.__WB_MANIFEST. Si tratta di un segnaposto che Workbox sostituisce con il manifest della pre-cache. Di seguito è riportata una configurazione valida per questo caso d'uso:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

injectManifest è preferibile se hai requisiti complessi, come routing avanzato, strategie di memorizzazione nella cache personalizzate o altri aspetti che non sono coperti dalle opzioni fornite da generateSW.

Attenzione:gli esempi precedenti presuppongono che l'ambiente Node che supporti in modo nativo i moduli ES senza un passaggio di build. Nelle versioni dei nodi precedenti alla 16, potresti dover impostare un flag per abilitare il supporto del modulo ES o fare affidamento sulla semantica CommonJS utilizzando module.exports.

Conclusione

La pre-memorizzazione nella cache in Workbox è molto più semplice rispetto alla gestione autonoma della memorizzazione nella cache, soprattutto per quanto riguarda gli asset con controllo delle versioni compilati dai bundler. Tuttavia, la prememorizzazione nella cache non è l'unica cosa che probabilmente farai in un service worker. Man mano che procedi, imparerai altre tecniche, come la memorizzazione nella cache del runtime.