2019年基于ServiceWorker的高效灵活离线化工程之路.pdf

1、腾讯-IMWeb 前端团队基于 Service Worker 的 高效灵活离线化工程之路目录1.关于 Service Worker2.离线技术的工程化3.不仅仅是离线技术目录1.关于 Service Worker2.离线技术的工程化3.不仅仅是离线技术离线技术的前世今生Service Worker 的使用注意事项离线技术的前世今生2000年前2000-2008Cookies2008草案 2013发布私有方案UserDataGearsMozStorageFlash SharedObjectH5标准Web StorageWeb SQLIndexedDB值的存储-文件的存储Web Storage/I

2、ndexedDb/Web SQL 能否支持起要求？离线技术的前世今生-App Cache index.htmldemo.appcacheCACHE MANIFEST#在首次下载后进行缓存 CACHE:index.html cache.html style.css image1.png#需要与服务器的连接，且不会被缓存 NETWORK:others.html#当页面无法访问时的回退页面 FALLBACK:*.html 404.html 二次更新问题资源改变而url不变问题url search 问题Manifest被长缓存问题Manifest全量更新问题Fallback不明确问题重定向判断为失败问

3、题XHR兼容性问题离线技术的前世今生App CacheService Worker编写方式声明式文件JS 脚本移除缓存只允许用户清空自由控制跨域缓存不可以可以容错处理但文件错误会导致全量失效通过脚本可以处理错误安全性HTTP易劫持HTTPS保证更新机制二次访问更新脚本控制Service Worker 的使用BrowserServerCache Storage传统思路BrowserServerService WorkerCache StorageService Worker思路就像加 了代理独立运行拦截请求缓存文件事件驱动Service Worker 的使用初始化安装激活生效捕获到请求通信记得把

4、根基打好在工程化之前navigator.serviceWorker.register(/sw.js)index.html 注册sw.jsService Worker 的注意事项Dom 渲染帧动画卡顿的原因启动了 Service Worker 进程往 Cache 里缓存数据Service Worker 的注意事项“合适的时候 做合适的事情window.addEventListener(load,()=navigator.serviceWorker.register(/sw.js););addSelfEvent(all_is_ready,()=navigator.serviceWorker.reg

5、ister(/sw.js););setTimeout()=navigator.serviceWorker.register(/sw.js);,5000);Dom 密集型迷之复杂型简单粗暴型Service Worker 的注意事项“取之有度用之有节caches.open(cacheName).then(cache=/稳定文件或小文件加载 cache.addAll(firstCacheFile).then()=/不稳定文件或大文件加载 cache.addAll(secondCacheFile););)FirstSecondjs/css/html 字体/图片/媒体Service Worker 的注意

6、事项解决卡顿1、“合适”的时候注册2、缓存数据注意分层级原则：避免CPU和内存的争用Service Worker 的注意事项真实的情况比想象中的复杂天时地利人和合适的时机搞事情避免抢占CPU多考虑内存情况工程化：如何适用于团队业务目录1.关于 Service Worker2.离线技术的工程化3.不仅仅是离线技术腾讯教育项目离线工程迭代缓存策略及更新机制异常与容灾处理离线技术工程化-第一个版本页面发请求返回缓存结果缓存并返回请求结果本地匹配请求请求成功请求失败上报，错误处理不匹配匹配用户访问页面使用原缓存资源重新缓存检测接口下载新 SW没有更新有更新请求资源流程sw.js 更新流程push AP