如此简单易懂的方式 让网站支持PWA

总结起来，网站配置PWA简单步骤为：

1. 编写 manifest.json；
2. 编写 serviceWorker.js；
3. 在 index.html 引入上述两个文件；
4. 把上述三个文件放在网站根目录(或者同一目录下)；
5. 网站需要部署在https环境才能触发；

这个是我按照本文做的Demo，可以参考一下：https://lx164.netlify.app/ ，如果你的是Vue项目原理也是一样的。

开始之前建议先检查一下你的环境是否支持，支持PWA的浏览器请看这里：https://caniuse.com/?search=pwa

1、编写 manifest.json

manifest.js 是用来定义名称、icon等信息的；

{
  "name": "完整名称", // 用于安装横幅、启动画面显示
  "short_name": "名称缩写", // 不为空时,桌面icon的名称优先为short_name
  "theme_color": "#f85758", // 主题色
  "background_color": "#f85758", // 背景色
  "display": "fullscreen", // 启动过渡动画, standalone或fullscreen
  "scope": "/",
  "start_url": "/", //启动页面,如果首页是https://www.abc.com/,则直接用“/”即可。
  "icons": [
    {
      "src": "logo72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "logo96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "logo144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    }
  ]
}

1.1 字段描述

• name

完整名称，用于安装横幅、启动画面显示

• short_name

名称缩写，用于显示桌面Icon名称；不为空时,桌面icon的名称优先为short_name

• theme_color

主题色，指定 PWA 的主题颜色；通过该属性来控制浏览器 UI 的颜色。比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响。