什么是PWA？
PWA 是 Progressive Web Apps 的缩写，翻译为渐进式网络应用。是一款基于浏览器并且可以安装到桌面的app。使用PWA，我们可以很方便的将网站生成一个移动APP，并且无需下载直接安装。
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"
})
}
完成之后效果如图：
如何安装PWA应用到桌面
安卓手机需要打开浏览器的桌面快捷权限
然后在本站首页，点击菜单，选择添加到主屏幕
在Firefox菜单中直接点击安装即可。
再加条safari也可以添加到主屏幕，图标logo居然是网站的1:1截图，太顶了亲
立马安排