vue/cli@3.x项目pwa处理

前言

1. 什么是pwa？
   Progressive Web Apps，渐进式 Web 应用
   pwa是我们在追求webapp便捷和原生应用良好体验结合的过程中的产物，目前兼容性是最大障碍
   底层使用的是workBox (service worker的一个框架)，封装了各种api和缓存策略，
   vue-cli3.0集成的是workbox-webpack-plagin，我们可以通过vue.config.js的pwa配置项进行配置

2. pwa 特征？
   具有可离线、添加到桌面（一级入口）、后台同步、服务端推送等特征

使用

1. 新项目中如何集成？
   可直接通过 vue/cli 脚手架添加 pwa模块；
   vue集成的@vue/cli-plugin-pwa 模块会自动在项目/src下生成registerServiceWorker.js 文件
   内容如下：

/* eslint-disable no-console */

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

if (process.env.NODE_ENV === 'production') {
   
  register(`${
     process.env.BASE_URL}service-worker.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.')
    },