workbox-cli

L'interface de ligne de commande Workbox (incluse dans le workbox-cli) se compose d'un programme Node.js appelé "workbox" qui peut être exécuté à partir d'une ligne de commande Windows, macOS ou compatible avec UNIX environnement. En arrière-plan, "workbox-cli" encapsule le module "workbox-build" et permet d'intégrer facilement Workbox à un build de ligne de commande. avec des configurations flexibles.

Installer la CLI

Pour installer la CLI avec Node, exécutez la commande suivante dans votre terminal:

npm install workbox-cli --global

Modes CLI

La CLI propose quatre modes différents:

  • wizard: guide par étapes pour configurer Workbox pour votre projet
  • generateSW: génère un service worker complet pour vous.
  • injectManifest: injecte les éléments à prémettre en cache dans votre projet.
  • copyLibraries: copiez les bibliothèques Workbox dans un répertoire.

wizard

L'assistant Workbox pose une série de questions sur votre répertoire local configuration et les fichiers que vous souhaitez mettre en pré-cache. Vos réponses sont utilisées pour générer un fichier de configuration qui pourra ensuite être utilisé lors de l'exécution dans Mode generateSW.

La plupart des développeurs n'ont besoin d'exécuter l'assistant de la boîte de travail qu'une seule fois, et vous êtes libre pour personnaliser manuellement le fichier de configuration initial généré, en utilisant l'une des options de configuration de compilation compatibles.

Pour lancer l'assistant, exécutez la commande suivante:

npx workbox-cli wizard

Capture d'écran de l'assistant de la CLI Workbox

generateSW

Vous pouvez utiliser la CLI Workbox pour générer un service worker complet à l'aide de la commande suivante : Un fichier de configuration (comme le fichier généré par l'assistant)

Il vous suffit d'exécuter la commande suivante:

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

Développeurs satisfaits de la mise en cache intégrée de Workbox et de la mise en cache de l'environnement d'exécution et n'ont pas besoin de personnaliser le comportement de leur service worker il est recommandé d'utiliser le mode generateSW.

Dans quel contexte utiliser generateSW ?

  • Vous souhaitez effectuer une pré-cache des fichiers.
  • Vous avez des besoins simples de mise en cache des environnements d'exécution.

Quand NE PAS utiliser generateSW

  • Vous souhaitez utiliser d'autres fonctionnalités de service workers (par exemple, Web Push).
  • Vous souhaitez importer des scripts supplémentaires ou ajouter une logique supplémentaire pour des stratégies de mise en cache personnalisées.

injectManifest

Pour les développeurs qui souhaitent mieux contrôler le fichier final de leur service worker peuvent utiliser le mode injectManifest. Ce mode suppose que vous disposez fichier service worker existant (dont l'emplacement est spécifié dans config.js).

Lorsque workbox injectManifest est exécuté, il recherche une chaîne spécifique (precacheAndRoute(self.__WB_MANIFEST) par défaut) dans votre source service worker. Elle remplace le tableau vide par une liste de les URL à mettre en pré-cache et écrit le fichier de service worker sur son emplacement de destination, en fonction des options de configuration dans config.js. Le reste du code de votre service worker source reste inchangé.

Vous pouvez utiliser Workbox dans ce mode comme suit:

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

Dans quel contexte utiliser injectManifest ?

  • Vous souhaitez avoir davantage de contrôle sur votre service worker.
  • Vous souhaitez effectuer une pré-cache des fichiers.
  • Vous devez personnaliser le routage et les stratégies.
  • Vous voulez utiliser votre service worker avec d'autres fonctionnalités de la plate-forme (par exemple, le Web push).

Quand NE PAS utiliser injectManifest

  • Vous recherchez la méthode la plus simple pour ajouter un service worker à votre site.

copyLibraries

Ce mode est utile si vous souhaitez utiliser injectManifest et utiliser les fichiers de la bibliothèque Workbox hébergés sur votre propre origine de l'utilisation du CDN.

Il vous suffit de l'exécuter avec un chemin d'accès dans lequel écrire les fichiers:

npx workbox-cli copyLibraries third_party/workbox/

Intégration du processus de compilation

Pourquoi Workbox doit-il s'intégrer à mon processus de compilation ?

Le projet Workbox contient un certain nombre de bibliothèques qui fonctionnent ensemble pour pour alimenter votre application Web service worker ; Afin de utiliser efficacement ces bibliothèques, Workbox doit être intégré le processus de compilation d'une application Web. Ainsi, le service worker est en mesure d'effectuer mettre en cache efficacement tout le contenu essentiel de votre application Web votre contenu à jour.

workbox-cli est-il le bon choix pour mon processus de compilation ?

Si vous disposez déjà d'un processus de compilation entièrement basé sur scripts npm workbox-cli est donc un bon choix.

Si vous utilisez actuellement webpack comme build puis utilisez le plug-in workbox-webback-plugin est un meilleur choix.

Si vous utilisez actuellement Gulp, Grunt, ou un autre outil de compilation basé sur Node.js, puis en intégrant workbox-build à votre script de compilation est un meilleur choix.

Si vous n'avez pas du tout de processus de compilation, vous devez en définir un avant d'utiliser Workbox pour mettre en pré-cache vos éléments. Tentative Ne pas oublier d'exécuter la commande "workbox-cli" manuellement peut être source d'erreurs et oublier peut entraîner l'affichage de contenu non actualisé auprès des visiteurs connus.

Installation et configuration

Après avoir installé workbox-cli en tant que projet de développement pour votre projet local, vous pouvez ajouter l'appel à workbox dans à la fin du script npm de votre processus de compilation existant:

À partir de package.json:

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

Remplacez <mode> par generateSW ou injectManifest (selon correspondant à votre cas d'utilisation) et <path/to/config.js> par le chemin d'accès vos options de configuration. Votre configuration a peut-être été créée automatiquement par workbox wizard ou manuellement.

Configuration

Options utilisées par generateSW

Toutes les options de configuration sont disponibles dans la documentation de référence.

Options utilisées par injectManifest

Toutes les options de configuration sont disponibles dans la documentation de référence.