Angular 2
Ouvrier

Introduction

Ajouter Service Worker à notre application

D'abord, si vous consultez mobile.angular.io le drapeau --mobile ne fonctionne plus.

Donc, pour commencer, nous pouvons créer un projet normal avec des angles angulaires.

ng new serviceWorking-example
cd serviceWorking-example

Maintenant, l'important, c'est de dire aux clients angulaires que nous voulons utiliser un technicien, nous devons faire:

ng set apps.0.serviceWorker = true

Si pour une raison quelconque vous n'avez pas installé @ angular / service-worker, vous verrez un message:

Votre projet est configuré avec serviceWorker = true, mais @ angular / service-worker n'est pas installé. Exécutez npm install --save-dev @angular/service-worker et réessayez, ou lancez ng set apps.0.serviceWorker=false dans votre fichier .angular-cli.json.

Vérifiez le fichier .angular-cli.json et vous devriez maintenant voir ceci: "serviceWorker": true

Lorsque cet indicateur est true, les versions de production seront configurées avec un agent de maintenance.

Un fichier ngsw-manifest.json sera généré (ou augmenté au cas où nous aurions créé un fichier ngsw-manifest.json à la racine du projet, ceci est généralement fait pour spécifier le routage, dans le futur cela sera probablement fait automatiquement) dans le dist / root, et le script du travailleur du service y sera copié. Un script court sera ajouté à index.html pour enregistrer le service worker.

Maintenant, si nous construisons l'application en mode de production ng build --prod

Et vérifiez dist / folder.

Vous verrez trois nouveaux fichiers là-bas:

• worker-basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

De plus, index.html inclut maintenant ce script sw-register, qui enregistre un agent de service angulaire (ASW) pour nous.

Actualisez la page dans votre navigateur (servi par le serveur Web pour Chrome)

Ouvrez les outils de développement. Allez à l'application -> Service Workers

Bon maintenant le Service Worker est opérationnel!

Maintenant, notre application devrait charger plus rapidement et nous devrions être en mesure d'utiliser l'application en mode hors connexion.

Maintenant, si vous activez le mode hors connexion dans la console chrome, vous devriez voir que notre application dans http: // localhost: 4200 / index.html fonctionne sans connexion à Internet.

Mais dans http: // localhost: 4200 / nous avons un problème et il ne se charge pas, ceci est dû au cache de contenu statique qui ne sert que les fichiers listés dans le manifeste.

Par exemple, si le manifeste déclare une URL de /index.html, le cache répondra aux demandes adressées à /index.html, mais une requête à / ou / some / route sera envoyée au réseau.

C'est là que le plug-in de redirection de route entre en jeu. Il lit une configuration de routage à partir du manifeste et redirige les itinéraires configurés vers une route d'indexation spécifiée.

Actuellement, cette section de configuration doit être écrite à la main (19-7-2017). À terme, il sera généré à partir de la configuration de la route présente dans la source de l'application.

Donc, si maintenant nous créons ou ngsw-manifest.json à la racine du projet

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

Et nous construisons à nouveau notre application, maintenant que nous allons à http: // localhost: 4200 / , nous devrions être redirigés vers http: // localhost: 4200 / index.html .

Pour plus d'informations sur le routage, lisez la documentation officielle ici

Vous trouverez ici plus de documentation sur les travailleurs du service:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

Et ici, vous pouvez voir une autre manière d'implémenter le service en utilisant la bibliothèque SW de précache:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers