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

在vue-cli创建的项目中要引入pwa可以通过安装和配置webapck插件进行集成，但是通过vue-cli3创建的项目是不推荐这种方式的。在vue-cli3的插件的中存在一个pwa插件，可以通过这个插件来引入PWA。

零、配置manifest.json

manifest.json的各项配置基本是固定的，配置完成后基本不会修改了，不同项目配置时display项不需要修改。如下。

{
  "name": "我的博客",
  "short_name": "博客",
  "icons": [
    {
      "src": "./images/commom/logo_144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

一、安装PWA插件

在命令行中输入 vue add @vue/pwa 命令就可以安装pwa插件以及相关依赖包和文件。在pwa插件安装成功后生成的文件包括：一些vue的logo图片、manifest.json、registerServiceWorker.js。

生成的vue的logo图片是示例图片，已经默认配置在了manifest.json中。registerServiceWorker.js是用来注册service worker的注册器，当然不使用这个生成的注册器也是可以的。

二、配置PWA插件

在vue.config.js中可以对pwa插件进行配置，基本配置在vue的官方示例中有展示，除了在pwa项配置外，不再需要其他额外配置。pwa插件是基于workbox的主要配置是对workbox的配置，部分未说明的配置如下。

pwa: {
    name: 'CSDN',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // 配置 workbox 插件
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // InjectManifest 模式下 swSrc 是必填的。
      swSrc: './public/sw.js', // 本地sw.js相对路径
      importWorkboxFrom: 'disabled', // 决定是否引入workbox
      exclude: [/\.html$/, /\.css.map$/, /sw.js$/] // 缓存列表排除的文件，可以是文件名或正则
    }
  }

pwa配置中workboxPluginMode项需要特别注意。workboxPluginMode有两种方式：generateSW，InjectManifest。

1、generateSW模式。

在generateSW模式时编译时会自动生成service-worker.js并依赖workbox，同时此模式下不支持swSrc参数，不能配置swSrc，否则在编译时会报错。

2、InjectManifest模式。

在InjectManifest模式时swSrc项必须配置，同时建议配置importWorkboxFrom项为disabled。这样不会自动注入对workbox的引用而使用自定义的service worker。此模式下会自动把编译生成的缓存列表注入到自定义的service worker中即sw.js中。如图。

 importScripts就是自动注入的缓存列表。

三、注册service worker。

安装pwa插件时会生成一个registerServiceWorker.js文件并在main.js中添加导入，这个文件中自动生成了注册service worker的代码。其中默认生成的service worker名称为service-worker.js，可以修改为自定义的service worker，如sw.js。registerServiceWorker.js的代码如下。

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

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}sw.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    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.')
    },
    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中引用registerServiceWorker.js。

import './Units/registerServiceWorker'

到此，在vue-cli3创建的项目中引入PWA已经完成，在service worker中实现对service worker的安装、激活和对fetch事件监听后就可以发布使用了。

后续service-worker.js的实现请看基于vue-cli3创建的项目引入PWA（二）