七乐彩 七乐彩 > 財經 >PWA技術解析及愛奇藝PC端的實踐

七乐彩:PWA技術解析及愛奇藝PC端的實踐

2020-03-29 09:10:14 來源:互聯網 閱讀:-

寫在前面

七乐彩 www.nyxan.com 文章開始之前,我們先來講講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界面,交互更符合移動設備的使用方式。

· 程序入口圖標:這是原生應用最主要的優勢,移動設備打字不便,用戶都喜歡從桌面圖標點擊進入,通過web訪問操作過于繁瑣。

· 系統集成:原生應用和系統匹配,可以利用很多附屬功能(通知、分享、設置等等)。

有了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事件,我們便可以通過監聽該事件來實現安裝提示的彈出。

監聽beforeinstallprompt事件后,存儲事件對象e,待用戶點擊安裝按鈕時再執行e.prompt()方法彈出系統安裝彈窗:

當用戶在系統安裝彈層處點擊了安裝按鈕后,Web應用會被添加到桌面,實現PWA的安裝。此后,用戶便可以通過桌面圖標來訪問這個Web 應用。


愛奇藝PC端PWA實踐


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

在愛奇藝主站的登錄頁面,我們最先使用Service Worker技術來進行網絡處理的優化,對常用的CSS、JS以及圖片資源進行緩存,令登錄窗口的展現速度明顯提升,詳見下圖:



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


▌愛奇藝主站PWA應用

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

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



當點擊“立即添加”后,頁面會出現系統選框,詢問是否安裝此PWA應用:



選擇安裝后,桌面上會出現一個新的App圖標,即為打開PWA應用的入口。點擊圖標,打開愛奇藝快捷版,可以看到一個界面更加簡潔的愛奇藝首頁,沒有瀏覽器的Tab標簽、地址欄以及工具欄等:


▌遇到的問題及優化方案

登錄應用Service Worker做緩存處理遇到的主要問題是:如何兼顧快速顯示和緩存更新,以及跨域的資源要如何保證緩存完整?

· 為了快速顯示,用戶請求資源時,用Service Worker攔截并直接返回緩存,免去了向遠端請求的耗時;

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

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

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

代碼示例:



· 記錄上次打開地址:PWA啟動時只支持打開首頁,通過記錄用戶最后一次打開的地址,為用戶恢復上次關閉的頁面,便于繼續觀看。

代碼示例:



▌數據效果及未來規劃

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

推薦閱讀:如何設置查找我的iphone

(正文已結束)

熱點圖片 七乐彩
今日爆料:楊冪熱巴要叛變?朱一龍捆綁白宇? 今日爆料:楊冪熱巴要叛
別不相信,中國人真的把種菜精神發揮到了極致 別不相信,中國人真的把
被奧巴馬和劉嘉玲評為最好吃的漢堡登陸香港,明星大咖都來打卡 被奧巴馬和劉嘉玲評為最
他是永琪唯一的兒子,給嘉慶當伴讀,卻因給兒子取名而被重罰 他是永琪唯一的兒子,給
新聞頭條
精彩專題 七乐彩
8000米以上!來自意大利的專業戶外運動鞋 18000米以上!來自意大
點擊排行 七乐彩
七乐彩
{ganrao}