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.

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.

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

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.

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.