深入学习网址:https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
一. 基本介绍
1. 渐进式:适用所有浏览器,因为它是以渐进式增强作为宗旨开发的,不支持的浏览器不影响
2. 流畅:能够借助service worker在离线或者网络较差的情况下正常访问
3. 可安装:用户可以添加常用的webapp到桌面,免去去应用商店下载的麻烦
4. 原生体验:可以和app一样,拥有首屏加载动画,可以隐藏地址栏等沉浸式体验
5. 粘性:通过推送离线通知等,可以让用户回流
二. Web app manifest(应用程序清单)
1. 需要index.html引入manifest.json文件
2. 例:<link rel=”manifest” href=””manifest.json” />
3. 注意:需要在https协议或者http://localhost下访问才能正常使用
4. 配置完成就可以添加到桌面了
三. 谷歌调试(可以在模拟机打开localhost网页)
1. 电脑打开chrome - 更多工具 - 开发者工具 - More tools - remote
四. 使用http-server开启一个本地服务器
1. 下载node.js
2. 在终端输入:
npm install http-server -g
3. 开启 http-server服务
4. 终端进入目标文件夹,然后在终端输入:
http-server -c-1 (⚠️只输入http-server的话,更新了代码后,页面不会同步更新)
五. Web work
六. Server worker(持久离线缓存)
1. 进行操作缓存和网络请求
2. event.waitUntil用于生命周期顺序执行
三个监听对应事件应该做的事情
注意:存储html要存储/不能是/index.html不然访问缓存请求/就会找不到
七. CacheStorage
八. Promise
1. 一个方法的调用可能出现成功或者失败,比如创建文件
2. 其中的then方法是传入回调成功或失败处理
3. Catch其实就是then(null, fail)then方法只处理回调失败方法
九. Manifest的scope
1. 类似于跨域这种东西
2. 设置了scope的server-worker的作用范围只能在此路径或子路径
3. Server-worker加载的js文件也限制了范围只能在js文件路径或子路径
4. 用来设置manifest对于网站的作用范围,scope的作用范围及对start_url的影响:所以配置的start_url只能在server-worker的作用范围下才有效果
十. Pwa安装确定按钮回调
注意:要想添加pwa到桌面成功必须先翻墙
Window 对象的 onappinstalled 属性用于处理 appinstalled 事件,该事件是一个实现了 Event接口的简单事件,会在网页应用成功安装为渐进式网页应用时立即触发。
例子:window
.onappinstalled=
function(ev)
{
console
.log('The application was installed.');};
十一. 拦截谷歌初始化pwa后自动弹窗事件
可以直接拿到此事件直接触发,原来是点击后出现,直接触发好像有时会失灵,好的做法是通过点击触发这个选择框事件,基本成功