はじめに

vue で pwa をしようと思うと、 vue-pwa-boilerplate を使うことになると思います。
しかし vue-pwa-boilerplate で npm run build 等と deploy を行うと、dist/service-worker.js が自動的に生成されてしまいます。

chache の操作や設定は以下の URL にあるように設定ファイルから行うことはできますが、
Push 通知の notification などその他イベントの操作方法がどこにも書かれていなかったため、共有します。

• https://qiita.com/gyarasu/items/2f18edc4ae251180d89e#3-vuejs%E3%81%AEspa%E3%82%92pwa%E5%8C%96%E3%81%99%E3%82%8B

やり方

やり方は簡単で、build/webpack.prod.conf.js 内の SWPrecacheWebpackPlugin に、
importScripts: ['path/to/your.js'] を書き、自前で用意した service worker 用の js ファイルを import します。

• 参考
  • https://github.com/vuejs-templates/pwa/issues/62
  • https://github.com/vuejs-templates/pwa/issues/184

サンプル

...
    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'test',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      importScripts: ['/static/mysw.js'] // 自前の service worker スクリプトをインポート
    })
...

self.addEventListener('fetch', function(event) {
  console.log('fetch url : ' + event.request.url);
});