オフラインでanger/service-workerが動作しない

Question

Angular Mobileチームのサービスワーカーが正常に動作することはありませんでした。この時点で、最初のリリース以降は機能しなかったため、何かを有効にするのを忘れてしまいました。 Google Chrome（スマートフォン&デスクトップ）にインストールして実行してもオフラインになっても機能しなくなり、アップデート後にランダムにクラッシュします。

設定方法に関するドキュメントはありません。だからここに私はそれをやった方法です：.angular-cli.jsonで

• ng new test-service-worker
• npm install @angular/service-worker
• 、私は出力ngsw-manifest.jsonsw-register.b73048fe3d9f8a1e7ae5.bundle.j sおよびworker-basic.min.js、"serviceWorker": true
• npm build --prodを追加します。だから、すべてがOK
• https://test-service-worker-97321.firebaseapp.com/を思わSWは、私はfailed to loadエラー、どんなに私が使用するデバイスを取得し、私がオフラインにした場合のキャッシュの有効期限が切れる（または単に無効キャッシュ）するために、時間を待って
• をインストールします。

---

生成distディレクトリ：

---

生成ngsw-manifest.json：

---

サービスワーカーがインストールされ、実行： 利用できるテストhttps://test-service-worker-97321.firebaseapp.com/

---

私はOfflineとDisable cacheにクロムデベロッパーツールのオプションを設定した場合、サービス労働者はロードされません。コンテンツはもうありません。どのように動作するはずの良い例はTwitterで、OfflineとDisable cacheがチェックされていると、Webアプリケーションが動作します。

NB：私は、サービス労働者と前にいくつかのアプリケーションを作成し、それらがChromeで適切に働いていました。私はここで間違っているのか分からない。

Answer 1

index.htmlと明示的に言及して、オフラインモードでアプリをテストする必要があります。私はhttps://test-service-worker-97321.firebaseapp.com/index.htmlをチェックしました - それはうまく動作します。

アプリはインデックス述べた文書（および他のすべてのルートのための）せずにオフラインで作業したい場合は、route redirection

を設定する必要がありますがthe exampleを参照してください。このカスタムngsw-manifest.jsonは、ビルド中に自動生成されたものとマージされます。

Answer 2

マキシムの助けを借りて、質問者と同じ道をたどって、既存の静的なウェブにオフライン機能を追加してそれをFirebaseに配備しました。ルートフォルダのcustom manifestは次のようになりますが、最終的に自動生成されたマニフェストとマージされます。

{ 
    "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" 
     } 
    ] 
    } 
}