web-dev-qa-db-ja.com

Vue Cli 3公式PWAプラグインの使用方法（Service Worker）

私の最初のvueプロジェクトで、公式のPWAプラグインに取り組んでいます（ https://github.com/yyx990803/register-service-worker ）。私の特定の問題：登録されたサービスワーカーをキャプチャし、それをあらゆる目的に使用します。 githubのreadmeには生成された正確なファイルが示されており、インスタンス化された後のこのService Workerの操作方法に関するドキュメントはないようです（登録インスタンスをキャプチャしますか？

私はこの問題を発見しました： https://github.com/vuejs/vue-cli/issues/1481 そしてこれについて話すのに良い場所を提供しています。サンプルコードまたはこれを使用する方法に関する明確なドキュメント。

誰かがサンプルコードを持っている場合は、共有してください。 Vueと新しいcliは信じられないほどのツールです。このようなことを文書化することは、プラットフォームの採用を増やすために必要な一歩です

vue.jsservice-workervue-clipwa
24
Erik White

すでに指摘したように、それは「vue cli」の問題というよりも「サービスワーカー」の問題です。まず、同じページにいることを確認するために、registerServiceWorker.jsのボイラープレートの内容は次のようになります（vue cli 3、公式のpwaプラグイン）：

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

.envファイルのBASE_URL変数を変更していない場合は、vueアプリのルートに対応する必要があります。 service-worker.jsという名前のファイルをpublicフォルダ（ビルド時に出力ディレクトリにコピーされるように）。

ここで、registerServiceWorker.jsファイル内のすべてのコードがサービスワーカーを登録し、その中にいくつかのフックを提供することを理解することが重要です。 ライフサイクル 。これらは通常、デバッグ目的で使用され、実際にサービスワーカーをプログラムするためではありません。 registerServiceWorker.jsファイルがapp.jsファイルし、メインスレッドで実行します。

Vue-cli 3公式PWAプラグインはGoogleのワークボックスに基づいているため、サービスワーカーを使用するには、まずプロジェクトのルートにvue.config.jsという名前のファイルを作成し、その中に次のコードをコピーする必要があります。

// vue.config.js
module.exports = {
    // ...other vue-cli plugin options...
    pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'public/service-worker.js',
            // ...other Workbox options...
        }
    }
}

すでにvue.config.jsファイルを作成している場合は、構成オブジェクトにpwa属性を追加するだけです。これらの設定により、public/service-worker.jsにあるカスタムサービスワーカーを作成し、ワークボックスにコードを挿入することができます：プリキャッシュマニフェスト。これは、コンパイルされた静的アセットへの参照のリストが通常self.__precacheManifestという名前の変数に保存される.jsファイルです。これが事実であることを確認するには、プロダクションモードでアプリをビルドする必要があります。

プロダクションモードでビルドするとワークボックスによって自動的に生成されるため、プリキャッシュマニフェストはVueアプリシェルをキャッシュするために非常に重要です。これは、通常、静的アセットがコンパイル時にチャンクに分割され、非常に退屈だからです。アプリを（再）ビルドするたびにService Workerでこれらのチャンクを参照できます。

静的アセットをプリキャッシュするには、このコードをservice-worker.jsファイルの先頭に配置できます（try/catchステートメントを使用することもできます）。

if (workbox) {
    console.log(`Workbox is loaded`);

    workbox.precaching.precacheAndRoute(self.__precacheManifest);

} 
else {
    console.log(`Workbox didn't load`);
}

基本的なサービスワーカーAPI を使用するか、または ワークボックスのAPI を使用して、同じファイルで通常どおりサービスワーカーのプログラミングを続行できます。もちろん、2つの方法を組み合わせることをためらわないでください。

私はそれが役立つことを願っています！

44
Landry BETE

上記の答えへの追加として：上記のセットアップを使用して、さらに進んでカスタムサービスワーカーに機能を追加する方法に関する小さなガイドを書きました。あなたはそれを見つけることができます こちら 。

留意すべき4つの主な事項：

  1. workboxをvue.config.jsからInjectManifestモードに設定し、swSrcキーが/srcのカスタムサービスワーカーファイルを指すようにします

  2. このカスタムサービスワーカーでは、precache-manifestおよびworkbox CDNをインポートするために、ビルドプロセスでいくつかの行が自動的に追加されます。マニフェストファイルを実際にプリキャッシュするには、カスタムservice-worker.jsファイルに次の行を追加する必要があります。

    self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

  3. registerServiceWorker.jsファイルの登録イベントをリッスンします。最初の引数としてイベントハンドラーに渡される登録オブジェクトを使用して、service-worker.jsファイルにメッセージを投稿できます。

    ...
updated(registration) {
  console.log("New content is available; please refresh.");
  let worker = registration.waiting
  worker.postMessage({action: 'skipWaiting'})
},
...

  4. service-worker.jsファイルのメッセージをサブスクライブし、それに応じて行動します。

    self.addEventListener("message", (e)=>{
    if (e.data.action=='skipWaiting') self.skipWaiting()
})

これが誰かを助けることを願っています。

29
kdd