什么是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 指定显示模式,并且必须取值 standalonefullscreen

为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菜单中直接点击安装即可。

版权声明
本文作者珂泽
文章来源风也雨忆笙
原文链接
转载说明非特殊说明文章均为原创,页脚已标识是否允许转载,转载请注明出处!感谢您的支持!
微信公众号
最后修改:2021 年 01 月 07 日 08 : 37 PM
如果您觉得我的文章有帮助,请随意赞赏!