workbox-cli

L'interfaccia a riga di comando di Workbox (contenuta nel workbox-cli) è costituito da un programma Node.js chiamato workbox che può essere eseguito da una riga di comando per Windows, macOS o compatibile con UNIX completamente gestito di Google Cloud. Dietro le quinte, workbox-cli racchiude il modulo workbox-build, e offre un modo semplice per integrare Workbox in una build a riga di comando con configurazioni flessibili.

Installa l'interfaccia a riga di comando

Per installare l'interfaccia a riga di comando con nodo, esegui questo comando nel terminale:

npm install workbox-cli --global

Modalità interfaccia a riga di comando

L'interfaccia a riga di comando ha quattro diverse modalità:

  • wizard: una guida passo passo per configurare Workbox per il tuo progetto.
  • generateSW: genera un service worker completo per te.
  • injectManifest: inserisce gli asset da prememorizzare nella cache nel progetto.
  • copyLibraries: copia le librerie Workbox in una directory.

wizard

La procedura guidata di Workbox pone una serie di domande sulla tua directory locale configurazione e quali file vuoi che vengano prememorizzati nella cache. Le tue risposte sono abituate a generare un file di configurazione che possa essere utilizzato durante l'esecuzione Modalità generateSW.

La maggior parte degli sviluppatori dovrà eseguire la procedura guidata della casella di lavoro solo una volta e potrai manualmente il file di configurazione iniziale generato, utilizzando una delle opzioni di configurazione della build supportate.

Per avviare la procedura guidata:

npx workbox-cli wizard

Screenshot della procedura guidata dell'interfaccia a riga di comando Workbox

generateSW

Puoi utilizzare l'interfaccia a riga di comando Workbox per generare un service worker completo utilizzando un file di configurazione (come quello generato dalla procedura guidata).

Esegui questo comando:

npx workbox-cli generateSW path/to/config.js

Sviluppatori soddisfatti della funzionalità integrata di pre-memorizzazione nella cache e di runtime nella cache di Workbox e non hanno bisogno di personalizzare il comportamento del service worker si consiglia di utilizzare la modalità generateSW.

Quando utilizzare generateSW

  • Vuoi prememorizzare nella cache i file.
  • Hai semplici esigenze di memorizzazione nella cache di runtime.

Quando NON usare generateSW

  • Vuoi utilizzare altre funzionalità dei service worker (ad es. Web Push).
  • Vuoi importare script aggiuntivi o aggiungere ulteriore logica per strategie di memorizzazione nella cache personalizzate.

injectManifest

Per gli sviluppatori che vogliono un maggiore controllo sul file del Service worker finale puoi usare la modalità injectManifest. Questa modalità presuppone che tu abbia file del service worker esistente (la cui posizione è specificata in config.js).

Quando viene eseguito, workbox injectManifest cerca una stringa specifica (precacheAndRoute(self.__WB_MANIFEST) per impostazione predefinita) nell'origine del Service worker. Sostituisce l'array vuoto con un elenco URL per prememorizzare nella cache e scrivere il file del service worker località di destinazione, in base alle opzioni di configurazione in config.js. Il resto del codice nel service worker di origine non viene modificato.

Puoi utilizzare Workbox in questa modalità, ad esempio:

npx workbox-cli injectManifest path/to/config.js

Quando utilizzare injectManifest

  • Vuoi un maggiore controllo sul tuo service worker.
  • Vuoi prememorizzare nella cache i file.
  • Devi personalizzare il routing e le strategie.
  • Vorresti utilizzare il tuo service worker con altre funzionalità della piattaforma (ad esempio WebPush).

Quando NON usare injectManifest

  • Vuoi il percorso più semplice per aggiungere un service worker al tuo sito.

copyLibraries

Questa modalità è utile se vuoi usare injectManifest e vuoi preferisci utilizzare i file della libreria Workbox ospitati sulla tua origine dell'utilizzo della rete CDN.

Devi solo eseguirlo con un percorso in cui scrivere i file:

npx workbox-cli copyLibraries third_party/workbox/

Integrazione dei processi di compilazione

Perché Workbox deve essere integrato con il mio processo di compilazione?

Il progetto Workbox contiene una serie di librerie che lavorano insieme per potenziare le prestazioni della tua app web Service worker. Per per usare queste librerie in modo efficace, Workbox deve essere integrato il processo di compilazione dell'app web. Ciò garantisce che il service worker sia in grado di prememorizzare nella cache tutti i contenuti critici della tua app web e mantenerli i contenuti aggiornati.

workbox-cli è la scelta giusta per il mio processo di compilazione?

Se hai un processo di compilazione che si basa interamente su script npm, allora workbox-cli è una buona scelta.

Se attualmente utilizzi webpack come build utilizzando lo strumento workbox-webback-plugin è una scelta migliore.

Se attualmente utilizzi Gulp, Grunt o un altro strumento di creazione basato su Node.js, integrando workbox-build nello script di build è una scelta migliore.

Se non disponi di un processo di compilazione, dovresti trovarne uno prima di utilizzare Workbox per prememorizzare nella cache tutti i tuoi asset. Tentativo ricordarsi di eseguire l'interfaccia a riga di comando workbox-cli manualmente può essere soggetta a errori, per l'esecuzione può portare alla pubblicazione di contenuti obsoleti per i visitatori di ritorno.

Impostazione e configurazione

Dopo aver installato workbox-cli come gruppo di sviluppo per il tuo progetto locale, puoi aggiungere la chiamata a workbox la fine dello script npm del processo di compilazione esistente:

Da package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

Sostituisci <mode> con generateSW o injectManifest (a seconda nel tuo caso d'uso) e <path/to/config.js> con il percorso le tue opzioni di configurazione. La configurazione potrebbe essere stata creata automaticamente da workbox wizard o modificato manualmente.

Configurazione

Opzioni utilizzate da generateSW

Nella documentazione di riferimento puoi trovare un set completo di opzioni di configurazione.

Opzioni utilizzate da injectManifest

Nella documentazione di riferimento puoi trovare un set completo di opzioni di configurazione.