Angular 2
Servicewerker

Invoering

Voeg Service Worker toe aan onze app

Ten eerste in het geval dat u mobile.angular.io raadpleegt, werkt de vlag - mobiel niet meer.

Dus om te beginnen, kunnen we een normaal project maken met hoekige cli.

ng new serviceWorking-example
cd serviceWorking-example

Nu is het belangrijk om tegen hoekige cli te zeggen dat we een servicemedewerker willen gebruiken die we moeten doen:

ng set apps.0.serviceWorker = true

Als u om een of andere reden @ angular / service-worker niet hebt geïnstalleerd, ziet u een bericht:

Uw project is geconfigureerd met serviceWorker = true, maar @ angular / service-worker is niet geïnstalleerd. Voer npm install --save-dev @angular/service-worker en probeer het opnieuw, of voer ng set apps.0.serviceWorker=false in uw .angular-cli.json.

Controleer de .angular-cli.json en je zou nu dit moeten zien: "serviceWorker": true

Als deze vlag waar is, worden productiebuilds opgezet met een servicemedewerker.

Er wordt een ngsw-manifest.json-bestand gegenereerd (of aangevuld als we een ngsw-manifest.json in de root van het project hebben gemaakt, meestal wordt dit gedaan om de routing op te geven, in de toekomst zal dit waarschijnlijk automatisch gebeuren) in de dist / root, en het script van de servicemedewerker zal daar worden gekopieerd. Er wordt een kort script toegevoegd aan index.html om de servicemedewerker te registreren.

Als we de app nu in productiemodus bouwen en build - prod

En vink dist / folder aan.

Je zult daar drie nieuwe bestanden zien:

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

Index.html bevat nu ook dit sw-register-script, dat voor ons een Angular Service Worker (ASW) registreert.

Vernieuw de pagina in uw browser (geleverd door de webserver voor Chrome)

Open ontwikkelaarstools. Ga naar de toepassing -> servicemedewerkers

Goed nu, de servicewerker is actief!

Nu zou onze applicatie sneller moeten laden en zouden we de app offline moeten kunnen gebruiken.

Als u nu de offline modus in de Chrome-console inschakelt, zou u moeten zien dat onze app in http: // localhost: 4200 / index.html werkt zonder verbinding met internet.

Maar in http: // localhost: 4200 / hebben we een probleem en het laadt niet, dit is te wijten aan het feit dat de statische inhoudscache alleen bestanden weergeeft die in het manifest worden vermeld.

Als het manifest bijvoorbeeld een URL van /index.html declareert, worden verzoeken aan /index.html beantwoord door de cache, maar een aanvraag voor / of / some / route gaat naar het netwerk.

Dat is waar de plug-in voor route-omleiding binnenkomt. Het leest een routeringsconfiguratie uit het manifest en stuurt geconfigureerde routes om naar een opgegeven indexroute.

Momenteel moet dit configuratiegedeelte met de hand worden geschreven (19-7-2017). Uiteindelijk zal het worden gegenereerd op basis van de routeconfiguratie in de toepassingsbron.

Dus als we nu of ngsw-manifest.json maken in de root van het project

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

En we bouwen onze app opnieuw, nu als we naar http: // localhost: 4200 / gaan , moeten we worden doorgestuurd naar http: // localhost: 4200 / index.html .

Lees hier de officiële documentatie voor meer informatie over routing

Hier vindt u meer documentatie over servicemedewerkers:

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

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

En hier ziet u een alternatieve manier om de service te implementeren die werkt met behulp van de SW-precachebibliotheek:

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