Le modalità di Workbox

Workbox è abbastanza flessibile da supportare quasi tutti i processi di compilazione. Ciò significa che esistono più modi per utilizzare Workbox, che ti consente di scegliere la giusta integrazione per il tuo progetto. Indipendentemente da come esegui l'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. Quale opzione usare dipende da quanta flessibilità hai bisogno. generateSW dà priorità alla facilità d'uso e alla semplicità a scapito della flessibilità, consentendoti di dichiarare un insieme di opzioni di configurazione e fornendo in cambio un service worker completamente funzionale.

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

Quando utilizzare generateSW

Dovresti usare generateSW se:

  • Vuoi prememorizzare nella cache i file associati al tuo processo di compilazione, inclusi i file i cui URL contengono hash che potresti non conoscere in anticipo.
  • Hai esigenze semplici di memorizzazione nella cache del 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 (ad esempio Web Push).
  • Hai bisogno di una maggiore flessibilità per importare script aggiuntivi o utilizzare moduli di Workbox specifici per perfezionare il tuo service worker in base alle esigenze della tua applicazione.

Quando utilizzare injectManifest

Dovresti usare injectManifest se:

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

injectManifest è diverso da generateSW in quanto 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 devi usare injectManifest se:

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

Utilizzare gli strumenti Build di Workbox

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

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

Ciascuno di questi strumenti di creazione offre entrambe le modalità generateSW e injectManifest, con un insieme di opzioni simile. Sono tutte scelte ottimali se non vuoi legare il service worker basato su Workbox a un determinato framework. Per sapere quale di queste opzioni è la più adatta, di seguito viene fornita una rapida occhiata a ciascuna.

workbox-cli

Se stai cercando la barriera di accesso più bassa possibile con Workbox, l'interfaccia a riga di comando fa per te:

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 pone alcune domande alle quali 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 per te entrambi i metodi generateSW o injectManifest. Il testo di supporto dell'interfaccia a riga di comando contiene ulteriori informazioni ed esempi di utilizzo.

workbox-build

workbox-cli è un wrapper attorno al modulo workbox-build e un'alternativa è utilizzare workbox-build direttamente. Quando utilizzi workbox-build, invece di specificare le opzioni utilizzando un file workbox-config.js, utilizzerai i metodi generateSW o injectManifest direttamente come parte di uno script Node, 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.

Con bundler

Vari bundler hanno i propri plug-in Workbox, ma l'unico bundler supportato ufficialmente dal team Workbox è webpack, tramite workbox-webpack-plugin. Come workbox-cli e workbox-build, workbox-webpack-plugin eseguirà i metodi generateSW o injectManifest, ma il plug-in mette in maiuscolo i nomi di questi metodi come GenerateSW o InjectManifest. In caso contrario, l'utilizzo è simile a quello di 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 le stesse di generateSW o injectManifest, ma c'è una sovrapposizione significativa. In particolare, non devi (né puoi) specificare un'opzione globDirectory per GenerateSW, poiché Webpack sa già dove sono raggruppati gli asset di produzione.

Utilizza un framework

Tutto ciò che è stato trattato in questo punto si concentra sull'utilizzo di Workbox a prescindere dalle preferenze del framework. Tuttavia, è possibile utilizzare Workbox in un framework specifico se semplifica lo sviluppo. Ad esempio, create-react-app viene 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 del framework possono limitare la tua capacità di configurare Workbox nel modo che preferisci. In casi come questi, puoi sempre ricorrere ai metodi descritti qui.

Che cosa succede se non ho un processo di compilazione?

In questo documento si presume che il progetto abbia un processo di compilazione, mentre il progetto potrebbe non esserlo. Se questo descrive la tua situazione, puoi comunque utilizzare Workbox con il modulo workbox-sw. Con workbox-sw, puoi caricare il runtime di Workbox da una CDN o in locale e comporre il tuo service worker.

Conclusione

La flessibilità di Workbox ti assicura di poterlo utilizzare praticamente in qualsiasi progetto, indipendentemente dal suo framework o dalle preferenze della catena di strumenti. Tutte queste opzioni ti consentiranno di eseguire la pre-memorizzazione nella cache e la memorizzazione nella cache di runtime utilizzando un paio di metodi, garantendo al contempo una maggiore flessibilità per la creazione di service worker con funzionalità più avanzate quando necessario.