什么是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截图,太顶了亲
立马安排