寫在前面

文章開始之前，我們先來講講PWA，Progressive Web App的縮寫，全稱直譯過來就是漸進式網頁應用，也就是一種網頁應用，它可以離線使用，可以變成獨立應用安裝到系統中。它非常的輕量化，在多平臺上面擁有一致的介面。

PWA的概念是由Chrome專案組在2015年的時候提出，很明顯，它是一種基於網頁的應用，但它又與傳統的Web App又有一些不同，下文具體與大家分享PWA技術解析及在愛奇藝App的實踐。

概述

漸進式網頁應用（下文簡稱PWA），是提升 Web App 體驗的一種新方法，能給使用者原生應用的體驗。自Web技術誕生至今，前端開發一直擁有一個最為獨特的優勢：跨平臺。只要是符合W3C規範的網頁，就可以在任何裝置及任何瀏覽器上進行訪問。由於終端裝置呈爆發性增長態勢，當下跨平臺優勢尤為重要，並且在可預見的未來，智慧終端的種類和數量還會進一步擴大。

但這種跨平臺的優勢，沒有在原生應用（Applications）這一關鍵的領域充分發揮作用。如果你要開發一款應用，仍然需要考慮可能涉及到的平臺，併為每個主要平臺開發一個單獨的版本。

由此我們產生一個疑問，為什麼Web的跨平臺能力只存在於網頁中？為什麼不能把這種能力應用到軟體開發中呢？如果我們開發一次，就可以在所有平臺上使用，將會大幅提升開發效率。

早期應用的實踐都是為了同樣的課題：如何用Web技術來開發原生應用，如Electron、Cordova、React Native。PWA則更進一步：直接用Web技術本身實現原生應用的體驗。

PWA是什麼

想要用Web技術來實現原生應用的體驗，至少我們需滿足以下條件：

· 在任何裝置上都能執行；

· 能快速開啟、使用且可安裝；

· 能在瀏覽器中開啟並支援桌面快捷方式啟動；

· 擁有獨立視窗；

· 支援離線工作；

· 與系統功能整合；

· 良好的效能

PWA技術用來解決以上問題，實現讓Web“擺脫”瀏覽器，擁有原生應用的使用體驗和效能，從而真正實現跨全平臺的應用。

在移動端為主的時代，使用者傾向使用原生應用，因為Web在以下幾個關鍵點上與原生應用仍有差距：

· 高品質UI：原生應用有更高品質的UI介面，互動更符合移動裝置的使用方式。

· 系統整合：原生應用和系統匹配，可以利用很多附屬功能（通知、分享、設定等等）。

有了PWA技術後，Web應用可以安裝到桌面，擁有自己的固定入口，並且可以呼叫很多系統功能，實現原生應用的體驗。開發者可以通過一套程式碼的開發，實現全平臺的適配（現已支援IOS系統）：

PWA 之所以能實現原生應用的體驗，不是靠某一項特定的技術，而是通過一系列新技術的應用，使得Web開發在安全、效能和體驗三個方面得到明顯提升。PWA 本質上是 Web App，但兼具了 Web App 和 Native App 的優點。

PWA 的主要特點包括下面三點：

· 可靠 - 即使在不穩定的網路環境下，也能瞬間載入並展現，並且可以實現離線使用

· 快速 - 快速響應，用平滑的動畫響應使用者的操作

· 沉浸式體驗 - 媲美裝置上的原生應用，沉浸式的使用者體驗，還可以新增到桌面

PWA 強調漸進式：不要求一次性達到安全、效能和體驗上的所有要求。使用者即使不安裝，也能在瀏覽器中順暢訪問該Web App的內容。因此，開發者也可以逐步改進自己的PWA專案，陸續新增更多功能。

PWA技術原理解析

我們提到PWA的三個主要特點：可靠、快速、沉浸式體驗：

· 可靠和快速，意味著在網路不穩定甚至沒有網路時，依然可以給使用者提供較為良好的使用體驗，並且確保較好的效能。為了實現上述目標，PWA使用了一項新的技術：Service Worker，這項技術可以實現前端直接處理網路請求，起到類似於中轉伺服器的作用，同時由於Service Worker是獨立執行緒，執行過程對於頁面效能影響很小，可以同時保障主執行緒的流暢執行。

· 沉浸式體驗，意味著要有固定的桌面圖示、獨立簡潔的執行視窗、可擴充套件的系統功能（例如通知）等。PWA引入了manifest.json檔案，配合Service Worker實現了Web App的可安裝特性，可定製桌面圖示、視窗模式等多方面配置，實現與原生應用一致的使用方式。

因此，我們接下來主要介紹兩個內容：

· Service Worker技術。

· 如何配置實現PWA的可安裝。

▌1. Service Worker

豐富的離線體驗、定期的後臺同步、推送通知等——這些本來屬於原生應用的功能，PWA在Web技術中進行了實現，而ServiceWorker 就是所有這些功能所依賴的技術基礎。

什麼是 Service Worker

Service Worker 是瀏覽器在後臺獨立於網頁執行的指令碼，可以實現對於網路請求的攔截處理，且支援推送通知和後臺同步等功能。未來ServiceWorker 將會實現定期同步或地理圍欄等功能，不斷完善對於裝置API的呼叫。本文主要討論Service Worker的核心功能：攔截和處理網路請求，以及快取管理。

編寫Service Worker時，需要注意以下幾點：

· Service Worker是一種JavaScriptWorker，不能直接訪問 DOM。因此ServiceWorker需要通過postMessage與頁面主執行緒進行通訊，而頁面則可以對 DOM 執行操作；

· Service Worker 是一個可程式設計的網路代理，我們可以通過Service Worker來決定頁面所傳送網路請求的處理方式，相當於前端有了自己可以編寫的中轉伺服器；

· Service Worker不使用時會被中止並在下次有需要時重啟，所以不能依賴 Service Worker的onfetch和onmessage處理程式中的全域性狀態。如果有需要持續儲存並在重啟後加以重用的資訊，建議使用IndexedDB API儲存狀態。

Service Worker 的生命週期

Service Worker 的生命週期獨立於網頁。要安裝一個Service Worker，我們需要經歷：註冊——安裝——啟用三大步驟。

想要為指定網頁安裝Service Worker，我們需要先在頁面中註冊Service Worker，註冊執行後，瀏覽器在後臺會啟動Service Worker的安裝步驟。

在安裝過程中，通常我們會快取一些靜態資源。如果所有檔案都成功快取，那麼ServiceWorker就會成功安裝。若任何檔案下載失敗或快取失敗，那麼安裝也會隨之失敗。如果發生安裝失敗的情況，下次訪問頁面時，Service Worker會再次嘗試安裝。

安裝完成後進入啟用步驟，在這一階段舊快取會被處理。

啟用後，Service Worker的程式碼就可以對其作用域內的所有頁面實施控制，首次註冊的Service Worker需要頁面再次載入後才會生效。

以下是 Service Worker 初始安裝時的簡化生命週期：

四個基本環節：註冊 - 安裝 - 啟動 - 更新

下圖則是一個Service Worker更為詳細的一個生命週期過程，供大家了解Service Worker的執行過程：

Service Worker 執行的前提

· 瀏覽器支援：適用瀏覽器範圍日益廣泛。目前，Service Worker 受 Chrome、Firefox、Opera、MicrosoftEdge的支援，safari或將支援此功能；

· 設定HTTPS協議：在開發過程中，開發人員可以通過 localhost 使用Service Worker，但如果要在網站上部署 Service Worker，則需要在伺服器上設定 HTTPS。

▌2. 實現PWA的可安裝

清單檔案

為了實現PWA的可安裝，首先我們需要在頁面里加載一個清單檔案（manifest.json），在這個JSON檔案中提供有關應用程式的資訊（例如名稱，啟動地址，圖示和描述）。manifest檔案的作用是將Web應用程式安裝到裝置的主螢幕，為使用者提供更快的訪問和更豐富的體驗。

下面是一個清單內容的示例：

Web應用程式清單部署在HTML頁面中，使用於檔案頭部的一個連結標記：

實現安裝的必備條件

為了能夠實現安裝功能的彈出，需要滿足以下條件：

· Web App還沒有被安裝。且 prefer_related_applications不是true。

· 使用者是常用使用者（Chrome瀏覽器會對使用者是否多次訪問目標網站進行判斷）

· 頁面內需要有清單manifest.json檔案，且檔案內必須有以下欄位：

short_name or name；

icons官方推薦包括 192px 和 512px 尺寸的圖示；

start_url；

display值必須屬於以下範圍：fullscreen, standalone,or minimal-ui

· 需要在 HTTPS 協議下（service worker執行的前提）

· 註冊了一個serviceworker，且service worker內有fetch事件監聽

當以上條件都滿足後，Chrome會觸發beforeinstallprompt事件，我們便可以通過監聽該事件來實現安裝提示的彈出。

愛奇藝PC端PWA實踐

▌Service Worker 在愛奇藝登入的應用

在愛奇藝主站的登入頁面，我們最先使用Service Worker技術來進行網路處理的優化，對常用的CSS、JS以及圖片資源進行快取，令登入視窗的展現速度明顯提升，詳見下圖：

從圖中我們可以看出：從response start開始的網路響應時間明顯降低。更為重要的是，從右側的“頁面載入時間分佈”圖可以看出，使用Service Worker後頁面載入時間非常穩定，網路波動對於頁面載入造成的影響很小，這對於使用者的實際體驗會有明顯的加分。

▌愛奇藝主站PWA應用

愛奇藝主站已支援PWA的快捷安裝。

在訪問愛奇藝主站首頁時，頁面右下角會有一個加號圖示，滑鼠放在該處會顯示一個安裝彈層，如下圖：

選擇安裝後，桌面上會出現一個新的App圖示，即為開啟PWA應用的入口。點選圖示，開啟愛奇藝快捷版，可以看到一個介面更加簡潔的愛奇藝首頁，沒有瀏覽器的Tab標籤、位址列以及工具欄等：

▌遇到的問題及優化方案

登入應用Service Worker做快取處理遇到的主要問題是：如何兼顧快速顯示和快取更新，以及跨域的資源要如何保證快取完整？

· 為了快速顯示，使用者請求資源時，用Service Worker攔截並直接返回快取，免去了向遠端請求的耗時；

· 為了避免快取更新不及時，頁面載入完成後再去遠端請求一遍相應資源更新快取，確保及時更新快取內容，也同時避免跨域資源快取不完整的問題。

在將網頁轉為PWA的過程中，針對PWA與網頁的機制區別，現已進行了一些優化處理：

· 點選跳轉優化：愛奇藝主站的頁面跳轉為新開標籤頁，但PWA只有一個單頁面，因此當用戶在PWA中訪問愛奇藝時，對頁面內的點選事件會轉為當前頁面跳轉，避免開啟瀏覽器新頁面，保證使用者的沉浸式體驗。

程式碼示例：

· 記錄上次開啟地址：PWA啟動時只支援開啟首頁，通過記錄使用者最後一次開啟的地址，為使用者恢復上次關閉的頁面，便於繼續觀看。

程式碼示例：

▌資料效果及未來規劃

PWA上線後用戶留存率與愛奇藝主站相比，提高了9%。目前愛奇藝主站為了保持站點的統一性，實踐了桌面快捷啟動。未來我們會繼續嘗試實踐離線工作，訊息推送，換膚，基於使用者行為分析智慧調整常用頻道和展示介面等功能，為給使用者帶來更高的體驗，力爭打造一款極速極簡版愛奇藝。