文字内容
1. PWA 带来的 极速离线 Web 应用
2. 腾讯 IVWEB 成员 Now 直播核心开发 公众号:前端小吉米 H5 RTMP 播放器作者 个人博客:villainhr.com
3. PWA 尝鲜 离线缓存 PWA 技术涉及的基础内容 总结实践过程中,SW 加载时延和离线包 的对比。 SW 离线包策略 未来规划 结合多种离线数据库,制定离线策略方 法和方案 SW 离线库优化和便捷库的提供
4. 1. PWA 尝鲜 • Service Worker:运行 PWA 的骨架,基于 worker • Push:像 APP 一样实现推送 • Cache:替代以前的 manifest,实现灵活缓存 • Manifest: 用来生成桌面 ICON
5. 1.1 SW feature • 监听页面请求 类似于 Fiddler * • 接受后台 Push * • 管理离线 Cache 资源 • 新开/聚焦页面
6. 1.1 SW feature • 监听页面请求 类似于 Fiddler • 接受后台 Push • 管理离线 Cache 资源 * • 新开/聚焦页面
7. 1.1 SW feature function focusOpen(){ var url = location.href; clients.matchAll({ • 监听页面请求 类似于 Fiddler type:'window', • 接受后台 Push includeUncontrolled: true • 管理离线 Cache 资源 }).then(clients=>{ for(var client of clients){ • 新开/聚焦页面 * if(client.url = url) return client.focus(); } console.log('not focus'); clients.openWindow(location.origin); }) }
8. 1.2 SW 难点 • 基于 Worker • 域名坑点 • 严格同域 * • 只支持 https * • 调试域 localhost • 支持使用 fiddler or whistle 本地映射 sw.js • 生命周期 • 初始注册 • 脚本更新 • 终止生效
9. 1.2 SW 难点 • 基于 WebWorker • 域名坑点 /^https?:\/\/now\.qq\.com\/.*sw\.js$/ • 严格同域 • 只支持 https • 调试域 localhost * Or • 支持使用 fiddler or whistle 本地映射 sw.js * Rule:'>Rule: 10.100.64.222 • 生命周期 • 初始注册 • 脚本更新 • 终止生效 Rule:'>Rule: file:///pathToName/sw.js
10. 1.2 SW 难点 • 基于 WebWorker • 域名坑点 • 严格同域 • 只支持 https • 调试域 localhost • 支持使用 fiddler or whistle 本地映射 sw.js • 生命周期 * • 初始注册 • 脚本更新 • 终止生效 enum ServiceWorkerState { "installing", "installed", "activating", "activated", "redundant" };
11. 1.2 SW 难点 • 基于 WebWorker • 域名坑点 • 严格同域 • 只支持 https • 调试域 localhost • 支持使用 fiddler or whistle 本地映射 sw.js • 生命周期 • 初始注册 * • 脚本更新 • 终止生效
12. 1.2 SW 难点 • 基于 WebWorker • 域名坑点 • 严格同域 • 只支持 https • 调试域 localhost • 支持使用 fiddler or whistle 本地映射 sw.js • 生命周期 • 初始注册 • 脚本更新 * • 终止生效
13. 1.2 SW 难点 • 基于 WebWorker • 域名坑点 • 严格同域 • 只支持 https • 调试域 localhost • 支持使用 fiddler or whistle 本地映射 sw.js • 生命周期 • 初始注册 • 脚本更新 • 终止生效 *
14. 1.3 SW 更新 • 自动调用更新: 会在页面加载完毕后,发送更新 • 24h 后强制更新 • SW Cache • 使用 update() 手动更新
15. 1.3 SW 更新 • 自动调用更新 • 24h 后强制更新: 内部 last update check time 存储 date 头更 新时间 • SW Cache • 使用 update() 手动更新
16. 1.3 SW 更新 • 自动调用更新 • 24h 后强制更新 • SW Cache: 缓存机制设置为 no-cache • 使用 update() 手动更新 navigator.serviceWorker .register(“./sw.js”, {updateViaCahche:“none”} )
17. 1.3 SW 更新 • 自动调用更新 • 24h 后强制更新 • SW Cache • 使用 update() 手动更新: 发送 HTTP 请求 强制进行更新 navigator.serviceWorker.register(‘/sw.js’) .then(reg => { reg.updateViaCache=“none”; reg.update(); });
18. 2. 离线缓存 • SW 与 离线包 • 延时数据对比 • X5 系中的支持率 • 离线存储
19. 江西省 山东省 台湾省 安徽省 山西省 广西壮族自治区 黑龙江省 湖南省 浙江省 江西省 山东省 安徽省 青海省 香港特别行政区 西藏自治区 台湾省 甘肃省 辽宁省 湖南省 黑龙江省 河北省 广西壮族自治区 陕西省 内蒙古自治区 甘肃省 辽宁省 浙江省 贵州省 平均时长 山西省 贵州省 福建省 河北省 1400 吉林省 陕西省 2500 加利福尼亚 西藏自治区 青海省 福建省 云南省 吉林省 平均时长 海外 云南省 宁夏回族自治区 四川省 上海市 海外 四川省 上海市 北京市 湖北省 江苏省 海南省 宁夏回族自治区 0 北京市 500 湖北省 江苏省 海南省 河南省 新疆维吾尔自治区 天津市 1000 广东省 200 广东省 400 重庆市 600 河南省 800 新加坡 1000 重庆市 • 城市平均时延 新加坡 1200 新疆维吾尔自治区 • JS Ready 时延对比 天津市 2.1 SW 离线包对比 离线包 2000 访问量 1800 1600 PWA 访问量 2000 1500 0
20. 2.1 SW 离线包对比 JS ready 时长 1200 • JS Ready 时延对比 • 城市平均时延 1000 800 600 400 200 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 PWA 时长 离线包时长
21. 2.2 X5 支持率 • 平均支持率 96.68%
22. 2.3 离线存储 • 常用存储: • CacheStorage IndexDB,LocalStorage,WebSQL。 • 安全缓存 CacheStorage • 缓存溢出处理 • 缓存策略
23. 2.3 离线存储 • 常用存储: • 安全缓存 CacheStorage • 同域储存:只针对读取 不针对存储 • promise API, 完美结合 fetch • 缓存溢出处理 • 缓存策略 interface Cache { [NewObject] Promise match(RequestInfo request, optional CacheQueryOptions options); [NewObject] Promise add(RequestInfo request); [NewObject] Promise addAll(sequence requests); [NewObject] Promise put(RequestInfo request, Response response); ...};
24. 2.3 离线存储 • 常用存储: • 安全缓存 CacheStorage • 同域储存:只针对读取 不针对存储 • promise API, 完美结合 fetch • 缓存溢出处理 • 缓存策略 fetch(fetchRequest).then(function (response) { if (!response response.status !== 200 response.type !== 'basic') { return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME).then(function (cache) { cache.put(event.request, responseToCache); }); return response; });
25. 2.3 离线存储 • 常用存储: • 安全缓存 CacheStorage • 缓存溢出处理 • 共享空间 • 大小检测 • 移除策略 • 缓存策略
26. 2.3 离线存储 • 常用存储: • 安全缓存 CacheStorage • 缓存溢出处理 • 共享空间 • 大小检测:Quota Management API • 移除策略 • 缓存策略 navigator.storage.estimate() .then(data=>{ // the unit is MB console.log(data.usage/1024 + '\n' + data.quota/1024); })
27. 2.3 离线存储 • 常用存储: • 安全缓存 CacheStorage • 缓存溢出处理 • 共享空间 • 大小检测 • 移除策略:LRU No eviction • 缓存策略
28. 2.3 离线存储 • 常用存储: • 安全缓存 CacheStorage • 缓存溢出处理 • 缓存策略 • persistent: eg react-min.js,lib.js,template.css • seldom: eg index.html, chunk.js, activity.css • often: eg port_1di21f13.png, cgi
29. 3.1 模拟离线包 • 离线包 • 灰度 • 增量部署 • Push 下发 • SW 离线 • LocalStorage 存储灰度 List • HTTP Last-Modified/E-tag 缓存头 • Push Message
30. 3.2 优劣对比 离线包 ServiceWorker 更新方式 Push 下发,客户端拉取 N+1 更新,用户被动更新 更新大小 Diff 增量下发 根据 HTTP 缓存检测更新文件 首次加载 缓存不生效 无缓存,但同路径页面缓存立即 生效 离线资源控制 客户端背锅 前端处理 总结对比 文件小,但覆盖很慢 更新速度快
31. 4 未来规划 • iv-pwa • 提供现成 ServiceWorker 缓存策略和 library。方便接入,灵活处理。 • iv-pwa-plugin • 提供 webpack-plugin 插件,适用于 webpack 构建项目接入 pwa。 • WebPush • 实现 Push 动态更新
32. THANKS