基于vue-cli3创建的项目引入PWA（二）

在上篇文章中写了安装PWA插件、配置PWA插件的步骤以及注意点，这篇文章写一下service worker的实现——sw.js。

一、安装install

service worker在注册完成后会进入到安装阶段。在安装阶段service worker的生命周期状态是installing-->installed，当service worker安装成功时状态变为installed。

安装成功后可以把要缓存的内容缓存起来，同时自动跳过等待，去激活service worker。具体代码如下。

// 监听service worker安装事件
self.addEventListener('install', e => {
  // 安装成功后的回调函数
  // waitUntil：等待service worker安装完成后执行
  // 安装完成后添加缓存并自动立即激活生效
  e.waitUntil(
    preCache()
      .catch(err => {
        console.log('install error:', err)
      })
      .then(self.skipWaiting)
  )
})

preCache函数是设置缓存的方法，后续完整代码会有体现。

二、激活activate

安装成功后如果已经有service worker存在会等待当前的service worker废弃再激活，此时可以调用skipWaiting方法来手动激活service worker。这时候service worker进入了activate阶段，可以通过监听activate事件，当激活完