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

7、hreadFetchWeb引擎ServiceWorkerThread sw.jsStart SWThreadaddEventListener(fetch,function(event)Stop Idle SWThreadHave document,not stop SW?SW线程启动SW缓存主文档SW Push预加载SW独立线程优秀实践SWCache vs.HttpCache页面SWHttpCacheSWCacheSWCacheSimpleBackend/FileSystemSW的存储大小限制？存储大小限制为250M所有页面sw.js共同存储sw.js存储大小域名存储限制：磁盘可用空间/15C

8、hromium40限制512MSWCache存储大小Chromium50+不作限制Temporary类型存储限额=【系统磁盘可用空间（available_disk_space）+浏览器全局已使用空间（global_limited_usage）】/3 每个域名可使用Temporary类型存储限额=Temporary类型存储限额/5SW缓存的效果？超市生鲜UC信息流9apps国际视频互动吧天猫海外天猫互动吧：不缓存主文档，性能持平天猫互动吧：缓存主文档，性能提升200+msfunction staleWhileRevalidate()const response=getResponseFromCa

9、che;if(response)setTimeout(fetchAndCache,2000);event.respondWith(response);else event.respondWith(fetchAndCache);延迟更新主文档SW可以使用离线包吗？ServiceWorkerController swController=ServiceWorkerController.getInstance();swController.setServiceWorkerClient(new ServiceWorkerClient()Override public WebResourceRespon

10、se shouldInterceptRequest(WebResourceRequest request)return null;);页面SWApp离线包SIRSW线程启动SW缓存主文档SW Push预加载SW独立线程优秀实践PageSWWeb EnginePush ServicePage ServerregisterSWRegistrationPageSWWeb EnginePush ServicePage ServerregisterSWRegistrationsubscribesubscribepush subscriptionpush subscriptionsend push sub

11、scription to page serverPageSWWeb EnginePush ServicePage ServerregisterSWRegistrationsubscribesubscribepush subscriptionpush subscriptionsend push subscription to page serverpush messagepush eventpush messageSWWeb EnginePageServerApp Private PushWeb Push ServiceSWWeb EnginePageServerApp Private Push

12、onpushfetchsendPushMessagePush预加载效果：可以取代离线包机制SW线程启动SW缓存主文档SW Push预加载SW独立线程优秀实践H5无法管控操作DOM权限JS运行环境WebViewPageService WorkersServiceWorkerkerServiceWorkerClientJSBridgeApp（离线包/基础API）loadpostMessagepostMessageshouldInterceptRequestJS CallSW页面客户端（离线包）客户端（基础API）JSBridgeshouldInterceptRequestMessageChanne

13、lSW使用MessageChannel与页面通信function ListenSWMessage()if(navigator.serviceWorker.controller)var messageChannel=new MessageChannel();messageChannel.port1.onmessage=function(event)console.log(Response from SW:,event.data.message);navigator.serviceWorker.controller.postMessage(command:MessageFromPage,messa

14、ge:Send to SW ,messageChannel.port2);self.addEventListener(message,function(event)var data=event.data;if(mand=MessageFromPage)event.ports0.postMessage(message:Send to Page ););MessageChannel有什么陷阱？SWCant restart MessageChannelMessagePort:closeStopWorkerRestart Worker页面未关闭，MessageChannel已关闭？前端：每次都new

15、MessageChanelWeb Engine：文档未关闭，不StopWorkerSW独立线程的应用场景共享JS运行环境后台起线程处理事件SW独立线程独立线程执行JSPWA的核心能力PWA的优秀实践PWA带来的影响开放底层基础能力操作系统 和 设备Loading EngineNative AppsLayout EngineRendering EngineJS Engine操作系统 和 设备Web PageLoading EngineLayout EngineRendering EngineJS Engine操作系统 和 设备Web AppsLoading EngineLayout EngineRendering EngineJS Engine操作系统 和 设备Web AppsLoading EngineNative AppsLayout EngineRendering EngineJS EngineWEB正变得无所不能WEB动画卡渲染慢JS慢响应卡加载慢滑屏卡WEB动画卡渲染慢JS慢响应卡加载慢滑屏卡WEBWebGLWebAssemblyWebAudioWebSocketsPWA前端WebNative