深入学习网址:
一. 基本介绍
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 到桌面成功必须先翻墙
Windows 对象的 onappinstalled 属性用于处理 appinstalled 事件, 该事件是一个实现了 Event 接口的简单事件, 会在网页应用成功安装为渐进式网页应用时立即触发.
例子: Windows.onappinstalled = function(ev) {
console.log('The application was installed.');};
十一. 拦截谷歌初始化 pwa 后自动弹窗事件
可以直接拿到此事件直接触发, 原来是点击后出现, 直接触发好像有时会失灵, 好的做法是通过点击触发这个选择框事件, 基本成功
来源: https://www.cnblogs.com/dlm17/p/12354606.html