2

サイトの新しいバージョン (Polymer にあり、現在は Vue.js にある) を既存のプロジェクトを介して Firebase にデプロイしました。

vue init webpack my-project新しいプロジェクトでデフォルトの Vue.js テンプレートと Webpack ( ) を使用しています

新しいバージョンをデプロイしたので、サイトを開くと、キャッシュされたシェルしか表示されません。これは Service Worker のせいだと思います

Firebase I (および以前のすべての訪問者) から実際の現在のファイルを取得するために、毎回 ( Ctrl+F5firefox で)サイトをハード更新する必要があります。

コンソール

今、ブラウザ コンソール (ネットワーク タブ) に次のように表示されます。

ここに画像の説明を入力

  • 赤字の Service Worker には、次のように書かれています:(failed) net::ERR_INSECURE_RESPONSE通常、サイトを開いたとき (ハード リフレッシュなし)

  • 一部のファイルのサイズ プロパティは(from ServiceWorker)次のとおりです。これらのファイルにはサイズがありますcache-control:max-age=3600が、サイトの新しいバージョンをデプロイしてから 1 時間以上経過しています。サービスワーカー自体にはヘッダーがないようです。おそらくそれが古いファイルをロードし続ける理由です

このコードを に追加しfirebase.json、npm run buildService Worker を削除しようとしましたが、まだ問題があります

Firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}

前のプロジェクトの Service Worker コード

新しくデプロイされたバージョンでは Service Worker を使用しません。しかし、以前のデプロイでは Service Worker を登録しました

私が使用した構成済みの Polymer スターター キット テンプレートでビルドされた、Polymer 1.0 フレームワークのライブラリのデフォルトの sw-precache コンポーネントを使用していました。Service Worker はビルド時に生成されました

同梱 > service-worker.js: https://jsfiddle.net/uydjzw13/

アンバンドル > service-worker.js: https://jsfiddle.net/t42fdgow/

質問：

すべてのサイト訪問者のブラウザーからその古い Service Worker を削除して、常に新しくデプロイされたバージョンを取得する方法はありますか? どうにかして Webpack や Firebase でそれを行うことができますか?

Service Worker で以前にデプロイしたバージョンを Firebase から削除するだけで修正されますか?

または、可能であれば、以前のキャッシュをすべて削除し、以前の Service Worker を登録解除する唯一の機能を持つ Service Worker を使用して、別のバージョンをデプロイできますか?

または、このようなものを使用できますか?: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

それを正しく行う方法がわかりません。また、削除できない Service Worker を誤って登録しないようにする方法もわかりません。

4

3 に答える 3