Angular 2
Servicearbetare

Introduktion

Lägg till Service Worker till vår app

Först om du konsulterar mobile.angular.io flaggan - mobil fungerar inte längre.

Så för att starta kan vi skapa ett normalt projekt med vinklade cli.

ng new serviceWorking-example
cd serviceWorking-example

Nu är det viktiga med att säga till vinklade cli att vi vill använda servicearbetare vi behöver göra:

ng set apps.0.serviceWorker = sant

Om du av någon anledning inte har @ angular / service-arbetare installerat ser du ett meddelande:

Ditt projekt är konfigurerat med serviceWorker = true, men @ angular / service-worker är inte installerat. Kör npm install --save-dev @angular/service-worker och försök igen eller kör ng set apps.0.serviceWorker=false i din .angular-cli.json.

Kontrollera .angular-cli.json och nu bör du se detta: "serviceWorker": true

När denna flagga är sann, kommer produktionsbyggnader att installeras med en servicearbetare.

En ngsw-manifest.json-fil kommer att genereras (eller förstärkas om vi skapar ett ngsw-manifest.json i roten till projektet, vanligtvis görs detta för att specificera routingen, i en framtid kommer det antagligen att göras automatiskt) i dist / root, och servicearbetarskriptet kopieras där. Ett kort skript läggs till index.html för att registrera servicearbetaren.

Nu om vi bygger appen i produktionsläge ng build --prod

Och kolla dist / folder.

Du ser tre nya filer där:

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

Dessutom innehåller index.html nu detta sw-register-skript, som registrerar en Angular Service Worker (ASW) för oss.

Uppdatera sidan i din webbläsare (serveras av webbservern för Chrome)

Öppna utvecklarverktyg. Gå till applikationen -> Servicearbetare

Bra nu är servicearbetaren igång!

Nu ska vår applikation ladda snabbare och vi ska kunna använda appen offline.

Om du aktiverar offline-läget i kromkonsolen ska du se att vår app på http: // localhost: 4200 / index.html fungerar utan anslutning till internet.

Men i http: // localhost: 4200 / har vi ett problem och det laddas inte, det beror på att statisk innehållscache bara tjänar filer som är listade i manifestet.

Till exempel, om manifestet deklarerar en URL till /index.html, kommer förfrågningar till /index.html att besvaras av cachen, men en begäran till / eller / some / route går till nätverket.

Det är där rutten omdirigeringsplugin kommer in. Den läser en routingkonfigur från manifestet och omdirigerar konfigurerade rutter till en specificerad indexrutt.

För närvarande måste detta avsnitt av konfiguration vara handskrivet (19-7-2017). Så småningom kommer det att genereras från ruttkonfigurationen som finns i applikationskällan.

Så om vi nu skapar eller ngsw-manifest.json i roten till projektet

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

Och vi bygger igen vår app, nu när vi går till http: // localhost: 4200 / , borde vi omdirigeras till http: // localhost: 4200 / index.html .

För mer information om dirigering, läs den officiella dokumentationen här

Här kan du hitta mer dokumentation om servicearbetare:

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

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

Och här kan du se ett alternativt sätt att implementera tjänsten som fungerar med SW precache-bibliotek:

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