問題タブ [sw-precache]

sw-precache-webpack-plugin を使用してサービスが動作するキャッシュシステムを追加しようとすると、いくつかの問題が発生しますv.0.11.4。私の考えは、人々がアプリをオフラインで使用できるということです。

私のアプリはReact v.15.5.4とNode v.6.9.5にありますが、ハンドルバー (React に移行している古いプラットフォーム) にいくつかの部分があり、現時点では両方が共存しています。React にある部分である html は Node エンドポイントによって提供され、プロジェクトのルートではありません。たとえば、次のようになります。

• ローカルホスト:3000/this_is_the_part_with_react

オフラインで使用したいのは、React で行われるプロジェクトの一部だけです。この部分では、webpack v.2.6.1を使用してすべてのプロジェクト ファイルを作成しています。

問題：

このような構成を使用して、React アプリを webpack でコンパイルすると、内部に Service Worker が作成され/public/assets/service-worker.jsます。

私が抱えている問題は、登録するためにこれを行う必要があることです:

そして、DevTools で調べると、Service Worker が問題なく登録されていることがわかりますが、次のようになります。

解決しようとして、最初に試してください：

サービス ワーカー レジスタでこのオプションを追加しようとすると、次の{ scope: './' }エラー メッセージが表示されます。

DOMException: ServiceWorker の登録に失敗しました: 指定されたスコープ ('/this_is_the_part_with_react') のパスが、許可されている最大スコープ ('/assets/') の下にありません。スコープを調整するか、Service Worker スクリプトを移動するか、Service-Worker-Allowed HTTP ヘッダーを使用してスコープを許可します。

解決しようとしています。2 回目の試行:

webpack の設定を次のように変更しようとすると:

/assets内部で作成されるため、ファイルの前面なしで直接登録できるようになりました/public。

そして今、DevTools で調べると、スコープがどのように正しいかがわかります。

しかし、Service Worker は次のエラーを受け取ります。

そして、ネットワーク内のすべての資産は、前面404 errorが欠けているために失敗しています。/assets

問題 2

の Service Worker ではlocalhost:3000/assets、リクエストがキャッシュされておらず (runtimeCaching 構成)、アプリがオフラインで動作していません。

たぶん、スコープの最初の問題に関連する同じ問題です...

しかしconsole.log、作成されたファイル内にある fetch イベント内に追加しましたがservice-worker.js、これは決して実行されません。

結論

さて、誰かが私が説明したこの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

前のプロジェクトの 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 を誤って登録しないようにする方法もわかりません。