問題タブ [sw-precache]

オフラインで動作すると思われるアプリを構築しています。angularjs と firebase を使用した動画 Web アプリです。

アプリは、たとえばサービス js ファイルで firebase データベースからデータを受け取ります。

このサービスを使用して、firebase データベースから json データを取得します。動画自体はfirebaseストレージに保存されます。

コントローラーでデータを受け取り、テンプレートに表示します。

これはオンラインでは問題なく機能しますが、sw-precache を使用しているため、アプリがオフラインで完全に機能していても、オフラインでは機能しません。

だから私の質問はとにかく、この外部でホストされているjsonファイルをキャッチして、アプリがオフラインのときにjsonデータを利用できるようにすることです。

2 番目の質問も、sw プリキャッシュを使用して cdn でホストされているファイルをキャッチすることに関するものです。アプリがオンラインの場合、ファイルがロードされます。そうでない場合は、ディスクにあるキャッシュされた cdns ファイルを使用します。

オフラインの場合、json ファイル ヘッダーの応答は「データの読み込みに失敗しました」です。

これが私のgulpタスクです：

});

上記の構成から、ログインと管理ルートはネットワークのみを使用してフェッチされ、インデックスルートは最初にキャッシュから提供されますが、サーバー側からページをバインドしているため、ネットワークを最初にしたいと考えています。そのため、ctrl + f5 を押さない限り、動的データはアプリで複製されません。

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-precache を使用しています。

私のセットアップ：

1. CSS/JS/HTML を使用した静的 Web サイト 動的コンテンツは、カスタムの indexedDB ソリューションを介して処理されます。
2. 使用される Grunt タスクは、Service-Worker を生成します。
3. すべての静的アセットをキャッシュするために使用される sw-precache (4.0.0)。
4. 次のように、Apache で設定された service-worker.js のヘッダーをキャッシュします。

通常の場合、問題なく動作しているようです。しかし、何らかの理由でユーザーがキャッシュをクリアした場合 (例: chrome dev ツールで -> アプリケーション -> ストレージをクリア (すべてを選択) -> [選択をクリア] をクリック)、オンラインになっていてもWebページが読み込まれません。コンソールに次のエラーが表示されます。

「 https://my.somedomain.com/somepath/somepage.html 」の FetchEventにより、ネットワーク エラー応答が発生しました。応答ではないオブジェクトが、respondWith() に渡されました。

生成された service-worker.js を見ると、次のコードに気付きます。

デバッグ時に、catch ブロックが実行されていません。また、respondWith() に渡された catch.match が返されたオブジェクトの添付のデバッグ出力も参照してください。

だから私の質問：

1. キャッシュ内にエントリが見つからない場合、sw-precache がネットワークにフォールバックしないのはなぜですか?
2. リクエストエントリがキャッシュに見つからない場合にネットワークリクエストを強制する方法はありますか?

Android デバイスで実行されているハイブリッド アプリ (ionic 1/cordova) 内で Service Worker を使用できますか? Android デバイスで実行されている Ionic アプリに Service Worker をインストールしようとすると、いくつかのエラーが発生します。Android はファイル プロトコルを使用してファイルを提供し、Service-Worker はファイルを HTTPS プロトコルまたは http (localhost のみ) で提供する必要があるためです。

Service Worker 登録中のエラー: DOMException: ServiceWorker の登録に失敗しました: 現在のオリジン ('file://') の URL プロトコルはサポートされていません。

これは、モバイル ブラウザーで実行される従来のプログレッシブ Web アプリケーションではなく、Android デバイス (webview + cordova) で実行されます。

API呼び出しで（Googleのsw-precacheとsw-toolboxを使用して）キャッシュ戦略でアプリを活用するには、それを達成する必要があります。

sw-precacheを使用して、Web アプリのオフライン エクスペリエンスを向上させようとしています。

私が理解しているように、ライブラリ (間違っている場合は修正してください) は、すべての静的アセットを事前にキャッシュすることです。新しいリクエストはどうですか？

新しい get fetch 要求の応答をキャッシュしたいとします。

self.addEventListener('fetch', ...生成されたswファイルですでに提供されているものをオーバーライド/拡張​​する方法はあり ますか

ここで何かが欠けているかもしれません。教えてください...