@ angular/service-worker funktioniert nicht, wenn offline

Question

Ich habe nie den Service-Mitarbeiter von Angular Mobile Team richtig arbeiten und zu diesem Zeitpunkt habe ich vergessen, etwas zu aktivieren, weil es seit der ersten Veröffentlichung nie funktioniert hat. Auch wenn es installiert und auf Google Chrome (Smartphone & Desktop) ausgeführt wird, wenn ich offline gehe, funktioniert es nicht mehr, auch stürzt es nach Updates zufällig ab.

Es gibt keine Dokumentation zur Einrichtung. Hier ist also, wie ich es tat:

• ng new test-service-worker
• npm install @angular/service-worker
• in .angular-cli.json, füge ich "serviceWorker": true
• npm build --prod, Ausgabe ngsw-manifest.jsonsw-register.b73048fe3d9f8a1e7ae5.bundle.j s und worker-basic.min.js. So scheint alles ok
• https://test-service-worker-97321.firebaseapp.com/ SW installiert
• Wenn ich offline gehen, eine Stunde warten für Cache (oder einfach deaktivieren Cache) ablaufen, erhalte ich einen failed to load Fehler, egal das Gerät die ich verwende.

---

Das erzeugte dist Verzeichnis:

---

Die erzeugte ngsw-manifest.json:

---

Der Servicemitarbeiter installiert und läuft: -Test verfügbar https://test-service-worker-97321.firebaseapp.com/

---

Wenn ich die Chrom devtools Optionen Offline gesetzt und Disable cache der Servicemitarbeiter nicht geladen Inhalt mehr. Ein gutes Beispiel dafür, wie es funktionieren soll, ist Twitter, dessen Web-App funktioniert, wenn Offline und Disable cache überprüft werden.

NB: Ich stellte ein paar apps vor mit Service-Mitarbeiter, und sie arbeiteten richtig auf Chrome. Ich weiß nicht, was ich hier falsch mache.

Answer 1

Sie müssen Ihre App im Offline-Modus mit einer expliziten Erwähnung von index.html testen. Ich überprüfte https://test-service-worker-97321.firebaseapp.com/index.html - es funktioniert gut.

Wenn Sie Ihre App wollen in offline zu arbeiten, ohne Index Dokument erwähnt (und für alle anderen Routen), haben Sie route redirection

Siehe the example einzurichten.Diese benutzerdefinierte ngsw-manifest.json wird während des Builds mit einer automatisch generierten Version zusammengeführt.

Answer 2

Mit der Hilfe von Maxim folgte ich dem gleichen Pfad wie die Person, konnte das vorhandene statische Web um Offline-Funktionen erweitern und es unter Firebase bereitstellen. Die custom manifest im Stammordner sollte wie folgt aussehen, sie werden schließlich mit automatisch generierten Manifest zusammengeführt werden:

{ 
    "routing": { 
    "index": "/index.html", 
    "routes": { 
     "/": { 
     "prefix": false 
     }, 
     "/home": { 
     "prefix": false 
     }, 
     "/work": { // any routes starting with '/work' 
     "prefix": true 
     } 
    } 
    }, 
    "external": { 
    "urls": [ 
     { 
     "url": "https://fonts.googleapis.com/css?family=Quicksand" 
     } 
    ] 
    } 
}