侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 105 条评论

目 录CONTENT

文章目录

Joe美化(11):给网站添加一个PWA功能

小莫唐尼
2022-10-17 / 8 评论 / 5 点赞 / 210 阅读 / 684 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

给网站添加一个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次进入开发者模式,然后点击左侧 系统-小工具 找到开发模式,点击进入,如图所示:
image

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

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

第四步:引用文件

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

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

如图所示(注意:这里已经不需要css文件,截图中的css可以忽略):
image

第五步:初始化插件

找到,joe 主题设置-> 自定义-> 自定义JS(body),添加以下代码:

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

评论区