La pre-memorizzazione nella cache è una delle operazioni più comuni in un service worker e Workbox offre molta flessibilità nel modo in cui puoi svolgere questa importante attività, indipendentemente da quale strumenti di creazione di Workbox scegli. In questa guida imparerai a pre-memorizzare nella cache gli asset utilizzando sia generateSW che injectManifest e quali di questi metodi potrebbero essere più adatti al tuo progetto.

Precauzione nella cache con generateSW

generateSW è il modo più semplice per pre-memorizzare nella cache le risorse in Workbox. La cosa più importante da ricordare su generateSW è che non stai scrivendo il tuo service worker, stai chiedendo a Workbox di generarne uno per te. Tuttavia, puoi influenzare il suo comportamento tramite una serie di opzioni di configurazione.

Per impostazione predefinita, generateSW svolge azioni diverse a seconda dello strumento di creazione utilizzato. Quando utilizzi workbox-webpack-plugin, non è necessario specificare alcuna opzione di configurazione. Per impostazione predefinita, il plug-in memorizza nella cache tutto ciò che include webpack nel suo grafico delle dipendenze e scrive un service worker denominato service-worker.js nella directory specificata da output.path

Se invece utilizzi workbox-build o workbox-cli, per impostazione predefinita verranno pre-memorizzati 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 in generateSW config affinché la pre-memorizzazione funzioni. È probabile che tu voglia configurare opzioni aggiuntive che influiscono sul comportamento del service worker, quindi dai un'occhiata alla documentazione.

Precauzione nella cache con injectManifest

Utilizzare injectManifest non è facile come usare generateSW, ma devi rinunciare alla facilità d'uso per ottenere una maggiore flessibilità. Se generateSW gestisce per te l'intera generazione del service worker, injectManifest prende come origine un service worker che scrivi e inserisce un elenco di URL da pre-memorizzare nella cache, lasciando il resto del service worker così com'è.

Quando utilizzi injectManifest, sei responsabile di configurare la logica di precaricamento. 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 file manifest di pre-cache può essere modificato con altre opzioni di configurazione.

Confronto affiancato

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 in cui viene utilizzato 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 minimamente attuabile richiede un file del service worker di origine. Se è sufficiente inserire nella cache, il service worker di input potrebbe essere simile al seguente:

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 di 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, ad esempio 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 pre-memorizzazione nella cache, soprattutto nel caso in cui riguardi gli asset con controllo delle versioni compilati dai bundler. Tuttavia, la pre-memorizzazione nella cache non è l'unica cosa che farai probabilmente in un service worker. Mentre procedi, imparerai altre tecniche, come la memorizzazione nella cache di runtime.