問題キャッシュ破損サービス担当者index.htmlファイル

Question

私はfirebaseでホストされているAngular（現在v.4）アプリケーションのサービス担当者を生成するためにGoogleのSW Precacheを使用しています。 Angular cliを使用して分散ファイルを生成しています。それは私のアプリを展開する時間が来るとき、私は、次のコマンドを使用します。

module.exports = { 
    staticFileGlobs: [ 
    'dist/**.css', 
    'dist/**/**.png', 
    'dist/**/**.svg', 
    'dist/**.js' 
    ], 
    stripPrefix: 'dist', 
    root: 'dist/', 
    navigateFallback: '/index.html', 
    runtimeCaching: [ 
    { 
     urlPattern: /index\.html/, 
     handler: 'networkFirst' 
    }, 
    { 
     urlPattern: /\.js/, 
     handler: 'cacheFirst' 
    }, { 
     urlPattern: /fonts\.googleapis\.com/, 
     handler: 'fastest' 
    }, 
    { 
     default: 'networkFirst' 
    } 
    ] 
}; 

私は変更を加えて、新しいバージョンを展開する場合、私はキャッシュされ得る：

ng build --prod --aot #build angular app 
sw-precache --config=sw-precache-config.js --verbose # generate precache 
firebase deploy # Send to firebase 

私sw-precache-config.jsファイルには、次のようになりますindex.htmlファイルを更新するか、ブラウザを閉じても?cachebust=1のようなURLをURLの最後に追加すると、更新されたindex.htmlファイルを取得できます。最新のindex.htmlがロードされないというプロセスや設定で間違っていることがありますか？

Answer 1

一般的なベストプラクティスとして、HTTPキャッシングを無効にして、生成されたサービスワーカーに加えられた変更が、HTTPキャッシュを待たずに期待どおりに取得されるようにすることをお勧めします（service-worker.js）。コピーが期限切れになる。

今後、ChromeとFirefoxのデフォルトの動作では、HTTPキャッシュを尊重するのではなく、ネットワークから直接サービスワーカーをフェッチすることになりますが、それまでの間はread more about the current behaviorになります。

私は役立つかもしれないFirebase展開のためsample configurationあります

{ 
    "hosting": { 
    "public": "build", 
    "headers": [{ 
     "source" : "/service-worker.js", 
     "headers" : [{ 
     "key" : "Cache-Control", 
     "value" : "no-cache" 
     }] 
    }] 
    } 
}