2018年從UC內核角度談談PWA技術在阿里體系的實踐及影響.pdf

《2018年從UC內核角度談談PWA技術在阿里體系的實踐及影響.pdf》由會員分享，可在線閱讀，更多相關《2018年從UC內核角度談談PWA技術在阿里體系的實踐及影響.pdf（82頁珍藏版）》請在三個皮匠報告上搜索。

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