此文主要针对是由vue构建的项目基础上进行PWA化。

PWA化主要解决了两大问题： 1）使web app有沉浸式体验，也就是更靠近原生体验。如：去掉浏览器的地址栏和底部工具栏；在桌面上生成图标，方便再次进入。 2）提供独立于浏览器的缓存，并且可以接收服务器的推送。如：在没有网络，或者网络状态较差的时候，仍可访问缓存在本地的数据.

步骤:

1. 通过vue-cli脚手架进行安装pwa插件

vue add pwa 

此时会生成manifest.json和registerServiceWorker.js两个文件。
2. 配置manifest.json文件.(manifest.json文件主要是配置图标，app名称，显示方式等)参考MDN手册

{ 
    "name": "wc--movies",// 导航显示的名字 
    "short_name": "wc", // app的名字 
    "start_url": ".", 
    "icon": [
      {
        // app图标，会根据不一样的系统进行适配 
        "src": "/public/img/icons/android-chrome-128x128.png", 
        "sizes": "128x128", 
        "type": "image/png" 
    }, 
    { 
        "src": "/public/img/icons/android-chrome-192x192.png", 
        // 大小
        "sizes": "192x192",
        // 格式  
        "type": "image/png"
    }], 
    //导航界面的背景颜色 
    "background_color": "white",
    //手机最上方显示运营商及电量、时间等这一栏的颜色 
    "theme_color": "white",
    //页面显示效果为没有地址栏和底部状态栏 
    "display": "standalone" 
} 

3. 在index.html中引入manifest.json

<link rel="manifest" href="/manifest.json">

4. registerServiceWorker.js文件(registerServiceWorker.js主要是注册Service Worker。SW可以用于消息推送，缓存管理、后台同步、拦截和处理网络请求等。注意：使用SW需要https及浏览器兼容)

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.')
   },
   error (error) {
     console.error('Error during service worker registration:', error)
   }
 })
}

5)配置vue.config.js文件,控制Service Worker行为。设置缓存逻辑、文件名字等。参考@vue/cli-plugin-pwa及workbox参考

pwa: {
    workboxPluginMode: 'GenerateSW', // 也可以定义为‘InjectManifest’模式。但是需自己写SW.js文件进行配置
    workboxOptions: {
        importWorkboxFrom: 'cdn', //从''cdn"导入workbox,也可以‘local’
        skipWaiting: true, // 安装完SW不等待直接接管网站
        clientsClaim: true,
        navigateFallback: '/index.html', 
        exclude: [/\.(?:png|jpg|jpeg|svg)$/], //在预缓存中排除图片
        // 定义运行时缓存
        runtimeCaching: [
            {
                urlPattern: new RegExp('^https://cdn'),
                handler: 'NetworkFirst',
                options: {
                    networkTimeoutSeconds: 20,
                    cacheName: 'cdn-cache',
                    cacheableResponse: {
                        statuses: [200]
                    }
                }
            }
        ]
    }
}

注意：苹果的safari,如果仅是上边那样设置可能还并不能兼容，但其支持通过meta/link进行设置。可设置如下：
// app名称
<meta name="apple-mobile-web-app-title" content="WCmovies">
// 是否隐藏地址栏等
<meta name="apple-mobile-web-app-capable" content="yes">
// 修改状态栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
// 指定桌面icon
<link rel="apple-touch-icon" href="./favicon.ico">