Angular 2
Servicearbetare
Sök…
Introduktion
Vi kommer att se hur man ställer in en tjänst som arbetar med vinkel, så att vår webbapp kan ha offlinefunktioner.
En servicearbetare är ett speciellt skript som körs i bakgrunden i webbläsaren och hanterar nätverksförfrågningar till ett visst ursprung. Den installerades ursprungligen av en app och förblir bosatt på användarens maskin / enhet. Den aktiveras av webbläsaren när en sida från dess ursprung laddas och har möjlighet att svara på HTTP-förfrågningar under laddning av sidan
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-workeroch försök igen eller körng set apps.0.serviceWorker=falsei 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
