webpack3 + vue 添加 serviceWorker

新的vue腳手架已經可以自帶pwa了，本文主要針對舊版的webpack。

先裝三個插件：

$npm i register-service-worker sw-precache-webpack-plugin webpack-pwa-manifest --save-dev

因為pwa主要用於生產，我們來動手改造 build/webpack.prod.conf.js，

首先在頭部引入兩個插件：

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const WebpackPwaManifest = require('webpack-pwa-manifest')

在 plugins 加入：

plugins: [
    new SWPrecacheWebpackPlugin({
      cacheId: 'my-project-name',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/'
    }),

    new WebpackPwaManifest({
      name: 'My Progressive Web App',
      short_name: 'MyPWA',
      description: 'My awesome Progressive Web App!',
      background_color: '#ffffff',
      crossorigin: 'use-credentials', //can be null, use-credentials or anonymous
      icons: [
        {
          src: path.resolve('src/assets/icon.png'),
          sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
        },
        {
          src: path.resolve('src/assets/large-icon.png'),
          size: '1024x1024' // you can also use the specifications pattern
        }
      ]
    }),
    // ...
]

這個時候打包出來的代碼根目錄里面多了個 service-worker.js ，html文件里面 pwa 相關元素也加上了。

添加一個文件用來注冊 serviceWorker，（眼熟嗎？抄的vue-cli 3 ^_^）

// serviceWorker.js
import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register('service-worker.js', {
    ready () {
      console.log(
        'App is being served from cache by a service worker.'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
      window.location.reload(true)   // 這里需要刷新頁面
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

在入口 main.js 引入該文件：

import './serviceWorker'

至此，改造完成。