Web技术_最小代价将你的网站注册为一个PWA应用，从系统桌面直接打开

概述：PWA是一种叫做渐进式应用的web类程序，本意是这种应用可以缓存静态资源到浏览器，可以在断网时也能读取缓存文件使用。在这里我们主要是利用这种应用可以把图标生成快捷方式到系统桌面，如果你的网站启用了https，那么通过以下文件的添加就可以最小代价让浏览器识别你的网站为PWA应用了。

准备以下几个文件：

1. manifest.json文件内容，据实修改，如名称，必须修改“你的图标路径”。

{
  "lang": "zh-CN",
  "name": "应用全称",
  "short_name": "简称",
  "description": "简介：安装为桌面应用程序，使用更快捷！",
  "start_url": "/",
  "background_color": "#2f3d58",
  "theme_color": "#2f3d58",
  "orientation": "any",
  "display": "standalone",
  "icons": [
    {
      "src": "/你的图标路径.png",
      "sizes": "512x512"
    }
  ]
}

2. sw.js文件内容：

const CACHE_NAME = `any-name`;

self.addEventListener('install', function () {


});

self.addEventListener('fetch', function () {


});

3. 把上边两个文件放到网站根目录。

4. 主页head中加入配置引用：

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

5. 主页中加入js注册：

    <script>
         if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/sw.js');
         }
    </script>

6. 重新进入网站，发现地址栏右侧有一个安装图标了。点击图标，将应用安装到系统中，桌面上也会有快捷方式，也可以在系统应用卸载中看到。