什么是PWA？

PWA 是 Progressive Web Apps 的缩写，翻译为渐进式网络应用。是一款基于浏览器并且可以安装到桌面的app。使用PWA，我们可以很方便的将网站生成一个移动APP，并且无需下载直接安装。

image-20210107202639532

PWA 主要特点如下：

  • 可靠 - 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现
  • 用户体验 - 快速响应，具有平滑的过渡动画及用户操作的反馈
  • 用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验

目前支持PWA的浏览器

目前据我所知，移动端chrome和edge以及forefox都支持pwa应用，为了用户体验，本站也特地加入了PWA，从现在起，大家也可以通过PWA方式访问本站了。

为网站添加PWA功能

此部分参考：https://lavas-project.github.io/pwa-book/

首先添加 manifest.json

{
  "name": "Progressive Web App",
  "short_name": "PWA",
  "start_url": "/?from=homescreen",
  "icons": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2"
}

然后在站点的 <head> 中通过 link 标签引入该文件。

<link rel="manifest" href="https://path/to/manifest.json">

上面两个步骤就完成了 Web 应用清单文件的编写。

  • name 或 short_name 定义应用名称，优先采用 short_name
  • start_url 指定启动 URL
  • icons 并且包含 144×144 的 PNG 格式的方形图标声明
  • display 指定显示模式，并且必须取值 standalone 或 fullscreen

为handsome主题添加PWA访问通知

首先我们需要配置start_url ，这里我配置为from=homescreen

然后我们通过此路径参数来判断当前用户使用何种方式访问网站。

whurl = window.location.search; /* 获取属性（“?”后面的分段） */

if(whurl  == "?from=homescreen"){
$.message({
    message: "加载完毕，您正在通过PWA方式访问！" ,
    title: "Welcome！ ",
    type: "success",
    autoHide: !1,
    time: "3000"
})
}else{
$.message({
    message: "加载完毕，感谢您的访问！" ,
    title: "Welcome！ ",
    type: "success",
    autoHide: !1,
    time: "3000"
})
}

完成之后效果如图：

image-20210107202604203

如何安装PWA应用到桌面

安卓手机需要打开浏览器的桌面快捷权限

然后在本站首页，点击菜单，选择添加到主屏幕

pj

在Firefox菜单中直接点击安装即可。

版权属于：珂泽

本文链接：https://blog.kaygb.com/735.html

本站原创文章均采用 署名-非商业性使用-相同方式共享 4.0 国际 （CC BY-NC-SA 4.0) 进行许可。转载时须注明出处和链接地址。

微信公众号
最后修改：2021 年 01 月 07 日 08 : 37 PM
© 允许规范转载
如果您觉得我的文章有帮助，请随意赞赏！