从UC内核角度谈谈PWA技术在阿里体系的实践及影响.pdf

1、从UC内核角度谈谈PWA技术在阿里体系的实践及影响PWA的核心能力PWA的优秀实践PWA带来的影响Progressive Web AppPWA的关键技术-Service Workers 事件驱动 文档无关的生命周期 拦截请求和响应 可靠（Reliable）Service WorkersPushFetchActivateInstallServiceWorkerGlobalScope ServiceWorkerThread sw.jsStart SWThreadaddEventListener(install,function(event)为什么是事件驱动？事件驱动 文档无关的生命周期 拦截请求和

2、响应 可靠（Reliable）Service Workers页面PageScriptControllerParserLoaderDocumentJSEngineNetworkJSEngineWorkerOrWorkletScriptControllerScriptControllerPageServiceWorkerp;JSEngine事件驱动，Running脚本状态存储数据库，activatedSW脚本（sw.js）SW线程SW控制页面 事件驱动 文档无关的生命周期 拦截请求和响应 可靠（Reliable）Service WorkersScriptCache（sw.js）RequestCac

3、heStorageHttpCacheSWNetwork 事件驱动 文档无关的生命周期 拦截请求和响应 可靠（Reliable）Service WorkersReliableBackgroundSyncSWCacheSWThreadWebPushBackgroundFetch浏览器退出时让系统处理Fetch触发事件失败有重试机制网络变化保证通知到监听者允许后台缓存或上传超大文件BackgroundSyncBackgroundFetchPWA的核心能力PWA的优秀实践PWA带来的影响SW线程启动SW缓存主文档SW Push预加载SW独立线程优秀实践Load sw.jsStartAllocatePr

4、ocessEndInitSWThreadStart ServiceWorker ThreadLoad sw.jsStartAllocateProcessEndInitSWThreadStart ServiceWorker ThreadIO UI IO避免线程抛转，可节省100msSW代码移到UI线程IO线程获取SW进程ID避免线程抛转Load sw.jsStartAllocateProcessEndInitSWThreadStart ServiceWorker Thread600+ms？怎么避免全新加载sw.js？sw.js+随机数sw.js+版本号sw.js 设置no-cache，max-a

5、ge=0sw.js 设置 max-age=31536000Load sw.jsStartAllocateProcessEndInitSWThreadStart ServiceWorker Threadevaluate js减少sw.js的大小启动SW线程很耗时，怎么办？if(serviceWorker in navigator)window.addEventListener(load,function()navigator.serviceWorker.register(/service-worker.js););onload注册SWself.addEventListener(install,f

6、unction(event)self.skipWaiting();/Perform any other actions required for your service worker to install);不推荐避免SW线程频繁启动FetchServiceWorkerThread sw.jsStart SWThreadaddEventListener(fetch,function(event)FetchWeb引擎ServiceWorkerThread sw.jsStart SWThreadaddEventListener(fetch,function(event)Stop Idle SWT