問題タブ [workbox-webpack-plugin]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
948 参照

javascript - workbox-webpack-plugin を Nuxt PWA と併用する方法

私は現在、workbox モジュールを含む PWA プラグインを使用して Nuxt を使用しています。ただし、私が間違っていなければ、このプラグインは webpack によって生成されたアセットを事前キャッシュに追加することを許可していません。

sw.js ファイルの事前キャッシュ部分のみを生成するために workbox-webpack-plugin を使用することは可能ですか? もしそうなら、それはどのように行われますか?

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-pluginにいくつかのドキュメントがありますが、これを Nuxt PWA コンテキストに適用する方法がわかりません。

0 投票する
4 に答える
9608 参照

javascript - Webpack 使用時に Service Worker にスクリプトをインポートする方法

Service Worker で、importScripts を使用して別のヘルパー スクリプトをインポートしようとしていますが、引き続きUncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:5000/src/js/utility.js' failed to load.

Service Worker に次のコードがあります。

そして、utility.js私は次のコードを持っています:

関数はまだ何も実行しませんが、これらのプレースホルダーも機能しません! 最終的には npm モジュールを使用できるようにしたいidbので、ヘルパーでこれを行っているので、通常の Javascript ファイルからも使用できます。
また、Webpack を使用してファイルをビルドしていますが、使用していない別のプロジェクトでは正常に動作しますが、このプロジェクトではビルド後にファイルが見つからないため、Webpack が何かを台無しにします。

前もって感謝します :)

0 投票する
2 に答える
1559 参照

service-worker - Service Worker skipWaiting 内から Webpack+Workbox でアプリビルドにアクセス

sw.jsService Worker ファイルを生成する Workbox Plugin を使用して、Aurelia で構築され、Webpack でコンパイルされた PWA があります。ユーザーがアプリ内のリンクをクリックしたときに新しいバージョンをアクティブ化できるように、「新しいバージョンが利用可能です」というユーザー通知を作成しようとしています。

バックグラウンドで新しいバージョンを正常にダウンロードしてインストールしており、新しいバージョンの準備ができていることも検出しています。ただし、新しいバージョンでページを強制的に更新するメソッドを呼び出そうとするとskipWaiting()、適切なスコープまたはオブジェクトがないように見えるため、失敗します。

主な問題は、おそらく自動生成されるため、実際の sw.js を編集できないことです。例はすべて の使用を示唆していますがself.skipWaiting();、そのオブジェクトにアクセスする方法がわかりません。

webpack.config.js

index.ejs

app.js

最後の行 ( ) を除いて、すべて正常に動作しthis.swReg.skipWaiting();ます。他の誰かが webpack+workbox プラグインを使用し、ユーザーの操作の結果として skipWaiting が発生しましたか?

0 投票する
0 に答える
831 参照

workbox - ネットワークが 1 つのルートでダウンしているときに Workbox がキャッシュから取得しないのに、他のすべてのルートでは機能する理由がわかりません。

私はworkbox-webpack-pluginを使用しており、AngularフロントエンドとPythonバックエンドの異なるキャッシュに画像、css、js、およびほとんどのAPI応答をキャッシュするため、Service Workerを正常にセットアップしました

API 応答をキャッシュから正しく取得しないルートが 1 つあります。エラーが発生し続けます

そのページの API 応答はキャッシュ ストレージに保存され、情報を表示するために必要な情報が含まれています。他のすべてのページが機能し、その理由がわかりません。また、このエラーを処理するために何をする必要があるかについても言葉がありません。

このコードを使用してみましたが、イベント リスナーが起動していないようです。

});

これが私のワークボックス戦略です

Service Worker が保存された API 応答を取得することを期待していますが、そうではなく、取得に失敗したと表示されます。

0 投票する
1 に答える
711 参照

vue.js - Service Worker のインストールに失敗するワークボックス ウィンドウ

vuejs アプリで workbox-window(CDN) と workbox-webpack-plugin を使用して、フォーム v3 から v4 に移行しています。

ローカルでは http-server で正常に動作しますが、デプロイ後にこのエラーが発生し、Service Worker のインストールに失敗します。

これを修正するにはどうすればよいですか?