Angular 4 aktivieren Service-Mitarbeiter in Web-Anwendung

Question

Ich bin neu in eckigen 4. Ich entwickle Anwendung mit Winkel 4. Ich muss die Offline-Funktionen mit Service-Worker aktivieren.

npm i @angular/service-worker --S 

habe ich versucht, mit über Paket aber es funktioniert nicht, ich weiß nicht, was die Konfiguration sind, müssen für diesen Service Arbeitnehmer machen. Bitte helfen Sie mir !!

Ich benutzte den eckigen Servicearbeiter, den ich folgenden Fehler in meiner Konsole erhalte.

ERROR in Fehler: Metadaten Versionskonflikt für Modul C:/projectfolder/node_modules/@angular/service-worker/service-worker.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts

Warum dieser Fehler?

Answer 1

Wenn die Servicemitarbeiter Bibliothek zu verwenden (Stand: Oktober 2017) die Erforschung, sah ich Beschwerden von schlechter Dokumentation und einige Beispiele für all die großen Spieler, die zu sein scheinen

• @angular/service-worker
• sw-precache
• Workbox

ich für Workbox entschieden, weil es als die sw-precache sucessor in Rechnung gestellt hat (die von allen rep orts hat tatsächlich gearbeitet und wird benutzt) und bot bessere docs als @ angular/service-worker, die immer noch in den Kinderschuhen steckt.

npm install --save-dev workbox-cli --global 
(Accept the defaults and write sw.js to the dist folder) 

bearbeiten Dann main.ts, bis es etwa wie folgt aussieht:

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 

if (environment.production) { 
    enableProdMode(); 
} 

platformBrowserDynamic().bootstrapModule(AppModule) 
    .then(() => { 
    registerServiceWorker('sw'); 
    }) 
    .catch(err => console.log(err)); 

    function registerServiceWorker(swName: string) { 
    if (environment.production) { 
     if ('serviceWorker' in navigator) { 
     navigator.serviceWorker 
      .register(`/${swName}.js`) 
      .then(reg => { 
      console.log('[App] Successful service worker registration', reg); 
      }) 
      .catch(err => 
      console.error('[App] Service worker registration failed', err) 
     ); 
     } else { 
     console.error('[App] Service Worker API is not supported in current browser'); 
     } 
    } 
    } 

Um einen Servicemitarbeiter mit Workbox, mit workbox-cli (der einfachste Ansatz) zu erstellen

Erstellen Sie Ihre App für die Produktion

ng build --prod && workbox-cli generate:sw 

Installieren Sie die Erweiterung Chrome Web Server im Chrome Web Store und richten Sie sie auf Ihren Ordner dist. Greifen Sie dann über die von Chrome Web Server bereitgestellte Adresse darauf zu. Öffnen Sie die Konsole (F12), bevor Sie Ihre App laden, und Sie sollten in der Konsole eine Meldung sehen, dass der Service-Mitarbeiter registriert ist.