問題タブ [sw-precache]

私はバニラ JavaScript を使用して SPA を作成しており、現在リソースのキャッシュを処理するためにsw-precacheをセットアップしています。Service Worker はgulpビルドの一部として生成され、正常にインストールされます。オフラインでルート URL ( http://127.0.0.1:8080/ ) に移動すると、App Shell が表示され、リソースが実際にキャッシュされていることが示されます。

私は今、SW に失敗することなく内部ルーティングを処理させようとしています。http://127.0.0.1:8080/dashboard_indexオフラインで に移動すると、「サイトにアクセスできません」というメッセージが表示されます。

アプリは、ユーザー アクションの一連のイベント リスナーを介して、または [戻る] ボタンを使用する場合は URL を介して、クライアント側でこのルーティングを処理します。これらの URL の 1 つにアクセスするときは、サーバーを呼び出してはなりません。そのため、Service Worker は、これらのリンクがクライアント側のコードに「フォール スルー」することを許可する必要があります。

私はいくつかのことを試しましたが、この Q/Aで問題が解決することを期待していました。gulp タスクの現在の状態を含めました。generate-service-workerこのセットアップでは、オフラインでアクセスできると期待しています/dashboard_index。これが機能したら、ソリューションを適応させて他のルートをカバーできます。

どんな助けでも大歓迎です。

アップデート

アプリケーションのコードはここにあります。

オプションを削除してnavigateFallbackWhitelistも結果は変わりません。

オフライン/dashboard_index中に移動すると、コンソールに次のように出力されます。

• http://127.0.0.1:8080/dashboard_index net::ERR_CONNECTION_REFUSED を取得します
• sw.js:1 スクリプトのフェッチ中に不明なエラーが発生しました。
• http://127.0.0.1:8080/sw.jsリソースの読み込みに失敗しました: net::ERR_CONNECTION_REFUSED

An unknown error occurred when fetching the script.Chrome デバッグ ツールの [アプリケーション] > [サービス ワーカー] タブでも同じことが繰り返されます。

runtimeCachingオプションは、そのルートから返された json 応答をキャッシュしていないことにも注意してください。

sw-precache のドキュメントhttps://github.com/GoogleChrome/sw-precache#runtime-cachingによると、sw-precacheのランタイム キャッシュの構成を含めて、動的コンテンツのランタイム キャッシュ用に sw-toolbox を含める必要があります。これを、sw-precache の CLI と grunt-sw-precache で使用してみました。Grunt の構成は次のとおりです。

});

そして、CLI を試すときは、次の sw-precache-config.js を使用しました。

生成された service-worker.js ファイルには、runtimeCaching オプション以外のすべての構成オプションが適用されています。

私のpackage.jsonは、sw-precacheの「^4.2.3」とsw-toolboxの「^3.4.0」を使用するように構成されています。

この問題を抱えているとコメントしている人を見たことがありません。sw-precache が私の runtimeCaching オプションを無視するのを妨げている問題について、誰かコメントできますか?

現在、Polymer + Service Worker を使用して PWA を実装しています。

通常、Service Worker は問題なく動作します。アプリケーションを実行すると、すべて問題ありません。Service Worker キャッシュが画像、html ファイル、フォントなどで埋められているのがわかります。これはすべて良いです。オフラインでも、画像などを含むページは正しく読み込まれます。

問題は、動的データが登場するときです。

私は以下を取得します：

オフライン モードでのみ、Service Worker は実際には多くを語らず、デバッグできないエラーを生成します。「スクリプトの取得中に不明なエラーが発生しました」

オフライン モードでのみ、コンソールにエラーが表示されます。私が達成したいのは、もちろん、エラーがないことです。そして灯台では、「オフライン時にURLが200で応答する」を緑色/チェックしたい。

私のフォルダ構造は次のとおりです。

次のコードは私の Polymer.json + sw-precache-config.json Polymer.json です。

sw-precache-config.json:

プロジェクトの Service Worker を生成するために sw-precache-webpack-plugin を使用しています。すべてのフォント、js、および css ファイルはキャッシュ ストレージに表示されますが、index / html ファイルは表示されず、移動しても機能しません。オフライン。「サイトをインストールできません: 一致する Service Worker が検出されませんでした」というメッセージも表示されます。アプリマニフェストのホームページに追加しようとすると。

私のスタックは、インデックス ファイルに Express + ejs を使用したユニバーサルな React + redux アプリです。デフォルトのhtmlファイルではなくejsを使用しているためかどうかはわかりませんが、ファイルが見つからないようです。テンプレートを指定する方法はありますか? 私の sw-precache-webpack-plugin webpack 設定は次のとおりです。

アドバイスをいただければ幸いです

私は sw-precache を使用して、Polymer CLI ビルド プロセスでサービス作業を生成しています。これは、キャッシュを更新する必要があることを知らせるために、更新されたファイルのハッシュを更新することを目的としています。しかし、更新されたコンテンツはキャッシュで置き換えられていないため、ctrl+r で更新すると古いバージョンが取得されますが、ctrl+shift+r で更新すると新しいバージョンが取得されます。その理由は、Service Worker が更新されていない可能性があります。

このドキュメントは次のように述べています

Service Worker ファイルが現在のものと比べて 1 バイトでも異なる場合、それは新しいと見なされます。

、しかし、新しい Service Worker が 1 バイトも変更しなかった場合はどうなるでしょうか? (ハッシュが 1 つだけ変更された場合に発生します)。新しいリクエストごとにサービスの動作を更新するように sw-precache を設定するにはどうすればよいですか?