問題タブ [sw-toolbox]

sw-toolbox と sw-precache に関する多くのチュートリアルを読みました。私が持っている疑問は次のとおりです。

sw-precache について読んでいると、ほとんどのチュートリアルで が使用されていることがわかりましたgulp + sw-precache。

場合によっては、コードを直接sw-toolbox書き込むためだけに与えられた例と構文を見ました（ gulpfileコードはありません）。service-worker.js

gulp を使用してservice-workerfile を自動的に生成しています。

したがって、私の主な関心事はsw-toolbox、gulpファイルに直接コードを記述して、生成後にコードを記述する必要がないようにすることsw-toolboxですsw-precachegulp

不明な点はコメントください

React アプリで Sw-precache を使用して、ビルドしたアセット (vendor.js、app.js、およびアイコン) を事前にキャッシュしました。ただし、結果は望ましくありません。ページをリロードすると、アプリのアセットはすべて (Service Worker から) 再度フェッチされますが、すべてが消えて (ページが空白になり) しばらくの間、アセットが表示されることはありません。 ページの再読み込み時のアプリのスクリーン キャプチャ。比較すると、こちらはhttps://pwa.rocks/のリストからのセッションのアプリです。それは本当にオフラインでキャッシュされており、リロードしても静的アセットを再フェッチしません。これは、ページの再読み込み時のセッション アプリのスクリーン キャプチャです。私がしていないことがあると確信しています。私は何が欠けていますか？

プログレッシブ Web アプリの構築に sw-toolbox を使用しています。すべてのリソースが期待どおりにキャッシュされていますが、maxAgeSeconds を設定しても期限切れになりません。

私はCacheFirstStrategy を使用し、Service Worker キャッシュを介してリソースが起動していることを確認しました。

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 オプションを無視するのを妨げている問題について、誰かコメントできますか?

POST リクエストを 5 分間キャッシュしたい。私のPOSTリクエストエントリは次のようになります

これはキャッシュされていません。まったく同じ構文の GET リクエストのエントリは正常に機能しています。何か不足していますか？

次の構成でオフライン機能を追加するために、jekyll Web サイトで sw-precache を使用しています。

問題は、Web サイトのコンテンツ (たとえば、ブログ投稿のテキスト、またはインデックス ページのテキスト) を変更すると、新しい Serviceworker バージョンがインストールされ、ブラウザーが更新されるまで変更が表示されないことです。もちろん、これは の予想される動作ですcacheFirst。

私が望むのは、サイトのインデックスへのリクエストを常に最初にネットワークにすることです。これが私がここで試していることです:

しかし、これは機能していません。インデックスは常にネットワークからではなくサービスワーカーからフェッチされます。どうすればこれを達成できますか?