Angular 2
Operaio di servizio

introduzione

Aggiungi il Service Worker alla nostra app

Per prima cosa nel caso in cui tu stia consultando mobile.angular.io la flag --mobile non funziona più.

Quindi, per iniziare, possiamo creare un progetto normale con cli angolare.

ng new serviceWorking-example
cd serviceWorking-example

Ora la cosa importante, per dire a angular cli che vogliamo usare il service worker, dobbiamo fare:

ng set apps.0.serviceWorker = true

Se per qualche motivo non hai installato @ angular / service-worker, verrà visualizzato un messaggio:

Il tuo progetto è configurato con serviceWorker = true, ma @ angular / service-worker non è installato. Eseguire npm install --save-dev @angular/service-worker e riprovare, oppure eseguire ng set apps.0.serviceWorker=false nel proprio .angular-cli.json.

Controlla il .angular-cli.json e ora dovresti vedere questo: "serviceWorker": true

Quando questo flag è true, le build di produzione verranno impostate con un worker di servizio.

Un file ngsw-manifest.json verrà generato (o incrementato nel caso in cui abbiamo creato un ngsw-manifest.json nella radice del progetto, di solito questo è fatto per specificare il routing, in un futuro questo sarà probabilmente fatto automaticamente) in dist / root, e lo script di worker del servizio verrà copiato lì. Un breve script verrà aggiunto a index.html per registrare il lavoratore del servizio.

Ora se costruiamo l'app in modalità di produzione ng build --prod

E controlla dist / cartella.

Vedrai tre nuovi file lì:

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

Inoltre, index.html ora include questo script sw register, che registra per noi un Angular Service Worker (ASW).

Aggiorna la pagina nel browser (servita da Web Server per Chrome)

Apri Strumenti per sviluppatori. Vai all'Applicazione -> Operatori di servizio

Bene, ora il Service Worker è attivo e funzionante!

Ora la nostra applicazione dovrebbe caricarsi più velocemente e dovremmo essere in grado di utilizzare l'app offline.

Ora se abiliti la modalità offline nella console di Chrome, dovresti vedere che la nostra app in http: // localhost: 4200 / index.html funziona senza connessione a Internet.

Ma in http: // localhost: 4200 / abbiamo un problema e non si carica, questo è dovuto alla cache del contenuto statico che serve solo i file elencati nel manifest.

Ad esempio, se il manifest dichiara un URL di /index.html, le richieste a /index.html riceveranno risposta dalla cache, ma una richiesta a / o / some / route andrà alla rete.

È qui che entra in gioco il plugin di reindirizzamento delle rotte. Legge una configurazione di routing dal manifest e reindirizza i percorsi configurati a una determinata route dell'indice.

Attualmente, questa sezione di configurazione deve essere scritta a mano (19-7-2017). Alla fine, verrà generato dalla configurazione del percorso presente nella sorgente dell'applicazione.

Quindi se ora creiamo o ngsw-manifest.json nella radice del progetto

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

E costruiamo di nuovo la nostra app, ora quando andiamo a http: // localhost: 4200 / , dovremmo essere reindirizzati a http: // localhost: 4200 / index.html .

Per ulteriori informazioni sul routing leggere la documentazione ufficiale qui

Qui puoi trovare più documentazione sui lavoratori del servizio:

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

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

E qui puoi vedere un modo alternativo per implementare il servizio che funziona usando la libreria precache SW:

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