workbox-cli

L'interfaccia a riga di comando di Workbox (contenuta nel pacchetto workbox-cli) è composta da un programma Node.js chiamato workbox che può essere eseguito da un ambiente Windows, macOS o a riga di comando compatibile con UNIX. In background, Workbox-cli racchiude il modulo di compilazione della casella di lavoro e fornisce un modo semplice per integrare Workbox in un processo di compilazione a riga di comando, con configurazioni flessibili.

Installa l'interfaccia a riga di comando

Per installare l'interfaccia a riga di comando con Node, 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 tuo progetto.
  • copyLibraries: copia le librerie di Workbox in una directory.

wizard

La procedura guidata di Workbox pone una serie di domande sulla configurazione della directory locale e sui file che devono essere memorizzati nella cache. Le risposte vengono utilizzate per generare un file di configurazione che può essere utilizzato durante l'esecuzione in modalità generateSW.

La maggior parte degli sviluppatori deve eseguire la procedura guidata della casella di lavoro una sola volta e puoi personalizzare manualmente il file di configurazione iniziale generato utilizzando una delle opzioni di configurazione della build supportate.

Per avviare l'esecuzione della procedura guidata:

npx workbox-cli wizard

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

generateSW

Puoi utilizzare l'interfaccia a riga di comando di Workbox per generare un Service worker completo utilizzando un file di configurazione (ad esempio, il file generato dalla procedura guidata).

Esegui questo comando:

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

Gli sviluppatori che sono soddisfatti delle funzionalità integrate di pre-memorizzazione nella cache e di runtime per la memorizzazione nella cache di runtime e che non hanno bisogno di personalizzare il comportamento del loro service worker consigliano di utilizzare la modalità generateSW.

Quando utilizzare generateSW

  • Vuoi pre-memorizzare i file nella cache.
  • Hai esigenze semplici per la memorizzazione nella cache di runtime.

Quando NON utilizzare generateSW

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

injectManifest

Gli sviluppatori che vogliono avere un maggiore controllo sul file finale dei service worker possono utilizzare la modalità injectManifest. Questa modalità presuppone che tu disponga di un 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) nel file del service worker di origine. Sostituisce l'array vuoto con un elenco di URL da prememorizzare nella cache e scrive il file del service worker nella posizione 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à:

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

Quando utilizzare injectManifest

  • Vuoi un maggiore controllo sul service worker.
  • Vuoi pre-memorizzare i file nella cache.
  • Devi personalizzare il routing e le strategie.
  • Vuoi utilizzare il service worker con altre funzionalità della piattaforma (ad es. Web Push).

Quando NON utilizzare injectManifest

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

copyLibraries

Questa modalità è utile se vuoi usare injectManifest e i file della libreria Workbox ospitati sulla tua origine anziché utilizzare la rete CDN.

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

npx workbox-cli copyLibraries third_party/workbox/

Creazione dell'integrazione dei processi

Perché Workbox deve integrarsi con il mio processo di compilazione?

Il progetto Workbox contiene una serie di librerie che lavorano insieme per potenziare il service worker della tua app web. Per utilizzare queste librerie in modo efficace, Workbox deve essere integrato nel processo di compilazione della tua app web. Ciò garantisce che il service worker sia in grado di pre-cache in modo efficiente tutti i contenuti critici della tua app web e di mantenerli aggiornati.

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

Se hai già un processo di compilazione basato interamente su script npm, workbox-cli è una buona scelta.

Se attualmente utilizzi webpack come strumento di creazione, l'uso di workbox-webback-plugin è la scelta migliore.

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

Se non hai un processo di compilazione, dovresti crearne uno prima di utilizzare Workbox per pre-cache qualsiasi dei tuoi asset. Ricordarsi di eseguire manualmente l'interfaccia a riga di comando di workbox può essere soggetta a errori; dimenticarsi di eseguirla può portare alla visualizzazione di contenuti obsoleti per i visitatori di ritorno.

Impostazione e configurazione

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

Da package.json:

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

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

Configurazione

Opzioni utilizzate da generateSW

Un set completo di opzioni di configurazione è disponibile nella documentazione di riferimento.

Opzioni utilizzate da injectManifest

Un set completo di opzioni di configurazione è disponibile nella documentazione di riferimento.