問題タブ [workbox-webpack-plugin]

vue コンポーネントでフォールバック ページを使用したいのですが、応答がありません。したがって、応答がない場合は現在htmlページを返しています。しかし、Vue コンポーネントを返す必要があります。私は networkFirst 戦略を使用しています。

しかし、ここ OfflineUrl では、Vue コンポーネントを返したいと考えています。

Angular (カスタム Webpack ビルド プロシージャ) をWorkbox v.3.2.0と共にworkbox-webpack-plugin v.3.2.0 (InjectManifest プラグイン) と共に使用していますが、style.cssファイルのリビジョンに問題があります。 extract-text-webpack-pluginによって生成されます。

適切な CSS ファイルを変更すると、Webpack は更新されたstyle.cssファイルを生成しますが、そのリビジョンはプリキャッシュ マニフェストで変更されません。

その結果、Service Worker キャッシュで更新されていないファイルになってしまいます。

Webpack 構成の関連部分は次のとおりです (完全な構成は大きすぎます)。

以前のリリース (もう存在しない) からnew ExtractTextPlugin("[name].[contenthash].css") の古いバージョンの参照ファイルをキャッシュする際の問題により、私は何かを使用できないことに注意してください 。index.htmlそのため、ファイル名にリビジョンを埋め込む代わりに、アンチキャッシュ URL パラメータを使用しています。

その他の Webpack で生成されたファイルの場合、リビジョンは問題なく更新されます (ファイル名にリビジョンが埋め込まれていないアセットの場合でも)。

誰かここで私を助けてくれませんか? ありがとう ：）

apollo を grapql クライアントとして使用する反応アプリがあります。アプリには、サブセット/サブアプリのオフライン サポートが必要になりました。アプリのアセットの事前キャッシュを行い、うまく機能する Service Worker (workbox と webpack のおかげ) があります。ここで、データのサポートを追加する必要があります。アプリは、オンラインのようにオフライン モードで動作する必要があります。つまり、ユーザーはすべてのデータを表示し、アプリが再びオンラインになったときに同期する必要があるいくつかの変更を実行できる必要があります。

考えられる解決策として、次のアプローチがあります。 * Service Worker を使用する: 一連のクエリをトリガーするボタンを追加して、オフライン作業に必要なすべてのデータを取得します。Service Worker ( workbox runtimeCaching) を使用して、これらのクエリに対するすべての応答をキャッシュします。アプリがオフラインになると、Service Worker がクエリの応答を「提供」するため、アプリは「あたかもオンラインであるかのように」動作し、Service Worker が「プロキシ」として機能して通常どおりクエリを実行します。ミューテーションに「楽観的 ui」アプローチを設定して使用するworkboxbackgroundSync を使用して変更を同期します (基本的に、ブラウザーが再びオンラインになったときにミューテーション アクションをエンドポイントに送り返します)。* いくつかの apollo ネイティブ アプローチ (apollo-cache-persist など) を使用して、クエリ キャッシュを localStorage に保存します。アプリに必要なすべてのクエリをトリガーし、そのキャッシュを保持し、アプリがオンラインでない場合は、それ以降の読み込みでキャッシュからアプリを復元します。

オフライン Web アプリのより適切でシンプルなアプローチは何でしょうか =