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

Question

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

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

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

webpack.config.js

new WorkboxPlugin({
  globDirectory: './dist',
  globPatterns: ['**/*.{html,js,css,woff,woff2,ttf,svg,eot,jpg}'],
  swDest: './dist/sw.js',
  clientsClaim: true,
  skipWaiting: false, // because I want to notify the user and wait for response
}),

index.ejs

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => {
        // make the registration available globally, for access within app
        window.myServiceWorkerReg = reg;
        // Check for update on loading the app (is this necessary?)
        return reg.update();
      })
      .catch(console.error);
  }
</script>

app.js

activate() {
  // listener for service worker update
  this.swReg = window.myServiceWorkerReg;
  console.warn('[app.js] ACTIVATE.', this.swReg);

  this.swReg.addEventListener('updatefound', () => {
    // updated service worker found in reg.installing!
    console.warn('[app.js] UPDATE FOUND.', this.swReg);

    const newWorker = this.swReg.installing;
    newWorker.addEventListener('statechange', () => {
      // has the service worker state changed?
      console.warn('[app.js]  STATE HAS CHANGED.', newWorker, newWorker.state);

      if (newWorker.state === 'installed') {
        // New service worker ready.

        // Notify user; callback for user request to load new app
        myUserMessage({ clickToActivate: () => {
          // reload fresh copy (do not cache)
          console.warn('[app.js] Post Action: skipWaiting.');
          // this.swReg.postMessage({ action: 'skipWaiting' });

          // THIS IS THE LINE THAT FAILS
          this.swReg.skipWaiting();
        }});
      }
    });
  });
}

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