[Halo] Joe美化 - 给网站添加一个PWA功能

给网站添加一个PWA功能，在PC端浏览器URL地址栏显示安装按钮，在移动端打开时直接弹出安装操作。

上图预览：

代码使用

包含三个文件：

• 描述文件：manifest.json
• 脚本文件：evan-install-pwa.min.js
• 脚本文件：evan-install-service-worker.js

第一步：下载文件

第二步：修改manifest.json文件的信息

关于 manifest.json 文件内的信息，图标要求按照，icons 字段列表中的数据 sizes的大小对图标进行裁剪，代码示例如下：

{
  "name": "站点名称",
  "short_name": "站点短名称",
  "start_url": "/",
  "display": "fullscreen",
  "background_color": "#ffffff",
  "description": "博客描述，如：一个爱凑热闹，喜欢捣鼓前端的博主。",
  "theme_color": "#ff6a6a", 
  "lang": "zh-CN",
  "icons": [
    {
      "src": "logo地址：logo_48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "logo地址：logo_96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "logo地址：logo_192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "logo地址：logo_512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

第三步：上传相关文件

连续点击左上角LOGO 10次进入开发者模式，然后点击左侧 系统-小工具 找到开发模式，点击进入，如图所示：

接着，将下载好的文件，全部上传至静态存储中！！！
接着，将下载好的文件，全部上传至静态存储中！！！
接着，将下载好的文件，全部上传至静态存储中！！！

重要的事情，说三遍，一定是静态存储中，文件保持在项目的跟目录下引用，如图所示：

第四步：引用文件

编辑主题，找到templete/common/header.ftl，加入以下代码：

<link rel="manifest" href="/manifest.json"> 
<script src="/evan-install-pwa.min.js"></script>

如图所示（注意：这里已经不需要css文件，截图中的css可以忽略）：

第五步：初始化插件

找到，joe 主题设置-> 自定义-> 自定义JS（body），添加以下代码：

// 网页安装为桌面应用
new EvanInstallPWA({
      swJsPath:'/evan-install-service-worker.v2.js'
});