Le modalità di Workbox

Workbox è abbastanza flessibile da contenere praticamente il processo di compilazione di qualsiasi progetto. Questo significa che esistono diversi modi per utilizzare Workbox e puoi scegliere la giusta integrazione per il tuo progetto. Indipendentemente dall'integrazione con Workbox, i vari strumenti offrono un'API simile.

generateSW contro injectManifest

Utilizzerai uno dei due metodi principali degli strumenti di creazione di Workbox: generateSW o injectManifest. La soluzione da utilizzare dipende dalla flessibilità di cui hai bisogno. generateSW dà la priorità alla facilità d'uso e alla semplicità senza rinunciare alla flessibilità, permettendoti di dichiarare un insieme di opzioni di configurazione e di fornirti in cambio un service worker completamente funzionale.

injectManifest favorisce una maggiore flessibilità a costo di una certa semplicità, poiché finirai per scrivere il codice per il tuo service worker autonomamente, con injectManifest che fornisce un manifest pre-cache che può essere utilizzato dai metodi di pre-cache di Workbox.

Quando utilizzare generateSW

Devi usare generateSW se:

  • Vuoi prememorizzare nella cache i file associati al processo di compilazione, compresi i file i cui URL contengono hash che potresti non conoscere in anticipo.
  • Hai esigenze semplici per la memorizzazione nella cache di runtime che possono essere configurate tramite le opzioni di generateSW.

Quando non utilizzare generateSW

D'altra parte, non devi utilizzare generateSW se:

  • Vuoi utilizzare altre funzionalità dei service worker (come Web Push).
  • Hai bisogno di una maggiore flessibilità per importare script aggiuntivi o utilizzare moduli Workbox specifici per perfezionare il service worker in base alle esigenze della tua applicazione.

Quando utilizzare injectManifest

Devi usare injectManifest se:

  • Vuoi pre-memorizzare i file nella cache, ma vuoi scrivere un service worker.
  • Hai esigenze di memorizzazione o routing complesse che non possono essere espresse tramite le opzioni di configurazione di generateSW
  • Vuoi utilizzare altre API nel tuo service worker (ad esempio Web Push).

injectManifest si differenzia da generateSW perché richiede di specificare un file del service worker di origine. In questo flusso di lavoro, il file del service worker di origine deve contenere una stringa self.__WB_MANIFEST speciale in modo che injectManifest possa sostituire il file con il manifest di pre-cache.

Quando non utilizzare injectManifest

Non utilizzare injectManifest se:

  • Non vuoi utilizzare la pre-memorizzazione nella cache nel service worker.
  • i requisiti dei nostri service worker sono sufficientemente semplici da essere coperti da ciò che può fornire generateSW e dalle sue opzioni di configurazione.
  • Dai la priorità alla facilità d'uso piuttosto che alla flessibilità.

Utilizzare gli strumenti di creazione di Workbox

Se stai cercando un modo indipendente dal framework per utilizzare Workbox nel processo di creazione, hai tre opzioni:

  1. workbox-cli
  2. workbox-build. Strumento a riga di comando.
  3. Utilizzare un bundler (ad esempio workbox-webpack-plugin).

Ognuno di questi strumenti di creazione offre entrambe le modalità generateSW e injectManifest, con un insieme simile di opzioni. Sono tutte scelte valide se non vuoi collegare il service worker basato su Workbox a un framework particolare. Per sapere quale di queste opzioni è la più adatta, diamo una rapida occhiata a ognuna.

workbox-cli

Se stai cercando la barriera più bassa possibile per accedere con Workbox, l'interfaccia a riga di comando fa al caso tuo:

npm install workbox-cli --save-dev

Per iniziare a utilizzare l'interfaccia a riga di comando, esegui la procedura guidata con npx workbox wizard. La procedura guidata porrà alcune domande e le risposte verranno utilizzate per configurare un progetto con un file workbox-config.js che puoi personalizzare in base alle tue esigenze. Sarà simile a questo:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Una volta creato il file di configurazione, l'interfaccia a riga di comando può eseguire i metodi generateSW o injectManifest per te. Il testo della guida dell'interfaccia a riga di comando contiene ulteriori informazioni ed esempi di utilizzo.

workbox-build

workbox-cli è un wrapper che circonda il modulo workbox-build e un'alternativa è l'uso diretto workbox-build. Quando usi workbox-build, invece di specificare le opzioni con un file workbox-config.js, userai i metodi generateSW o injectManifest direttamente come parte di uno script dei nodi, passando un insieme simile di opzioni:

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

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

Nell'esempio precedente, workbox-build scriverà il service worker generato nella directory dist quando viene eseguito il comando node build-sw.mjs.

Utilizzare un bundler

Vari bundler hanno i propri plug-in Workbox, ma l'unico bundler ufficialmente supportato dal team Workbox è webpack, tramite workbox-webpack-plugin. Come workbox-cli e workbox-build, workbox-webpack-plugin eseguirà i metodi generateSW o injectManifest, ad eccezione del fatto che il plug-in utilizza le lettere maiuscole per questi nomi come GenerateSW o InjectManifest. In caso contrario, l'utilizzo è simile a workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

Le opzioni che passi a GenerateSW o InjectManifest non sono uguali a generateSW o injectManifest, ma la sovrapposizione è significativa. In particolare, non dovrai né puoi specificare un'opzione globDirectory per GenerateSW, in quanto il webpack sa già dove sono raggruppati gli asset di produzione.

Utilizzare un framework

L'argomento trattato a questo punto è incentrato sull'utilizzo di Workbox indipendentemente dalle preferenze del framework. Tuttavia, è possibile utilizzare Workbox all'interno di un framework specifico se lo sviluppo è più semplice. Ad esempio, create-react-app è fornito con Workbox per impostazione predefinita. Le diverse integrazioni del framework con Workbox vengono trattate più avanti in un articolo successivo.

Vale la pena notare che queste integrazioni di Workbox specifiche per framework potrebbero limitare la tua capacità di configurare Workbox nel modo che preferisci. In questi casi, puoi sempre ricorrere ai metodi illustrati qui.

Che cosa succede se non ho un processo di compilazione?

Questo documento presuppone che il tuo progetto abbia un processo di compilazione, ma il progetto potrebbe non esserlo. Se questa è la tua situazione, puoi comunque utilizzare Workbox con il modulo workbox-sw. Con workbox-sw puoi caricare il runtime Workbox da una rete CDN o localmente e comporre il tuo service worker.

Conclusione

La flessibilità di Workbox ne garantisce l'utilizzo in quasi tutti i progetti, indipendentemente dalle preferenze del framework o della toolchain. Tutte queste soluzioni ti permetteranno di eseguire il pre-memorizzazione nella cache e la memorizzazione nella cache di runtime utilizzando un paio di metodi, consentendo una maggiore flessibilità per creare service worker con funzionalità più avanzate quando necessario.