未來可期之PWA漸進式Web應(yīng)用

作者 | 極鏈科技Video++前端Team子昂

整理 | 包包

前端技術(shù)這幾年發(fā)展迅速，其中就有PWA，全名Progressive Web APP即漸進式Web應(yīng)用程序，在2016年，Google I/O 大會上提出的一個 Next Web Generation 概念。PWA是專門應(yīng)對手機web開發(fā)提出來的，它可以將 web 和 app 各自優(yōu)勢結(jié)合到一起：漸進式、離線加載等實現(xiàn)趨近于App的交互，實時更新、可推送、可安裝等，達到一個當我們使用Web應(yīng)用時體驗可以像一款原生App一樣。特別說明一下，很多人以為PWA是一種新技術(shù)，然而并不是，它是應(yīng)用多項Web技術(shù)的一個集合，其中核心技術(shù)即 “Service Worker”，我們把它放在后面說。

目前我們使用Web應(yīng)用和很多國內(nèi)SPA一樣，通常都是在打開一個頁面的時候發(fā)起請求來獲取數(shù)據(jù)，在離線的情況一般就不可用了。而PWA是旨在改善Web的體驗，將網(wǎng)絡(luò)的優(yōu)勢與應(yīng)用的優(yōu)勢融合起來，給用戶更優(yōu)的體驗。PWA具有的特點分別是：

• 可靠即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下(包括無網(wǎng)絡(luò)的情況)，也可以立即加載并展現(xiàn)。

• 響應(yīng)快速用戶交互響應(yīng)迅速，有平滑流暢的動畫進行響應(yīng)。

• 粘性像設(shè)備上原生應(yīng)用一樣，具有逼真的用戶體驗，同時用戶還可以將其添加到桌面。

• 漸進式適用于使用任何瀏覽器的用戶，因為它的核心是以漸進式增強。

• 自適應(yīng)任何形式上都可使用：桌面設(shè)備、移動設(shè)備等。

• 安全通過HTTPS，防止窺探以及保障內(nèi)容不會被篡改。

• 可發(fā)現(xiàn)因為W3C清單和服務(wù)工作注冊范圍，可以讓搜索引擎找到它，將其識別為“應(yīng)用程序”。

• 可安裝用戶再去app store去下載，可以直接將應(yīng)用添加到主屏幕從而保留進行使用。

• 可鏈接可以通過url地址分享應(yīng)用程序，省去了復(fù)雜的安裝。

我們在其中選擇幾點著重解釋一下：

（1）可安裝

它是指在設(shè)備的主屏幕上像原生APP一樣留有圖標。要實現(xiàn)這特點首先需要提供Web app manifest(web應(yīng)用程序清單)，manifest是一個json文件，它里面描述的是應(yīng)用程序的圖標如何在主屏幕顯示以及點擊后跳轉(zhuǎn)到的頁面是什么，我們可以直接在html中引用它“”，它的格式如下圖：

其中幾個屬性代表的意思是：

? start_url 設(shè)置跳轉(zhuǎn)的地址

? icons 讓我們設(shè)置頁面的圖標

? background_color 設(shè)置背景顏色， 應(yīng)用啟動后會立即使用此顏色，這一顏色將保留在屏幕上，直至網(wǎng)絡(luò)應(yīng)用首次呈現(xiàn)

? theme_color 會設(shè)置主題顏色

? display 設(shè)置是否啟動狀態(tài)

這里的display設(shè)置的是網(wǎng)絡(luò)應(yīng)用是否隱藏瀏覽器的UI，當display的值為"standalone"時，網(wǎng)絡(luò)應(yīng)用隱藏瀏覽器的UI；當display的值為"browser"時，則顯正常顯示。

關(guān)于manifest.json里字段更加具體的含義，感興趣的同學可以去谷歌開發(fā)者文檔里探索一下啦。

（2）這是一個非常diao的特性：可離線使用即在沒有網(wǎng)絡(luò)環(huán)境的情況下也能打開應(yīng)用程序，實現(xiàn)這一強大功能的幕后大佬是：Service worker（服務(wù)人員）。

Service worker其實是一段腳本，我們平時緩存都是session、localStorage、CacheStorage這些，PWA通過Service worker訪問CacheStorage實現(xiàn)緩存及離線開發(fā)。

這里簡單講一下Service worker的概念，通常瀏覽器加載頁面運行的是主JavaScript線程，而Service worker作為一個獨立的線程，可以理解為在瀏覽器身后默默無聞運行的一個線程。

正因為這個特性，Service worker無論如何都不會阻塞我們的主線程，意味著不會使我們的瀏覽器頁面卡頓等。在使用Service worker時要注意，我們使用的協(xié)議必須是https，當然如果想在本地開發(fā)弄一個https是很讓人頭疼的，幸運的是Service worker允許在本地host為localhost或者127.0.0.1也可以跑起來。

我們來看一下，如何注冊Service worker？

首先，我們要判斷當前使用的瀏覽器是否支持Service worker，支持我們才能繼續(xù)進行下去，如果支持，那么在頁面加載的時候注冊位于/sw.js的Service worker，看下面的代碼：

每次頁面加載成功后，就會調(diào)用 register() 方法，瀏覽器將會判斷 Service Worker 線程是否已注冊并做出相應(yīng)的處理。

register 方法的 scope 參數(shù)是可選的，用于指定你想讓 Service Worker 控制的內(nèi)容的子目錄。本 demo 中服務(wù)工作線程文件位于根網(wǎng)域， 這意味著服務(wù)工作線程的作用域?qū)⑹钦麄€來源。

關(guān)于Service Worker更加詳細的介紹，感興趣的同學可以參考MDN文檔。

對啦，Service worker也是有生命周期的，它的詳細介紹可以參考下圖：

說了這么多，那我們開發(fā)者如何了解一個網(wǎng)頁是否具備了 PWA 的一些特點呢？

我們可以通過谷歌開發(fā)工具，在其中找到Audits面板，它可以檢測出頁面是否具備PWA的特點：

下面我們來看一個簡單的demo，看一下PWA在離線時依然能夠快速加載應(yīng)用。

首先我們將加載loading直接顯示出來，確保用戶在打開網(wǎng)頁可以立即看到，讓用戶知道此時頁面在加載中：

此時我們將html頁面中引用的js的注釋取消，將我們寫的虛假數(shù)據(jù)加載出來：

那么如何實現(xiàn)緩存呢？即在離線的環(huán)境下加載出來數(shù)據(jù)，此時將網(wǎng)絡(luò)環(huán)境調(diào)成Offline，頁面無法加載：

這里就要應(yīng)用到上面我們說的Service worker服務(wù)工作線程來實現(xiàn)。

先來檢查一下瀏覽器是否支持Service worker：

如果瀏覽器支持，就會注冊服務(wù)工作線程，當用戶第一次打開頁面時就會觸發(fā)安裝事件從而將緩存所需的內(nèi)容。

下圖為核心代碼，實現(xiàn)了真正的離線緩存：

首先，我們需要通過 caches.open() 打開緩存并提供一個緩存名稱。提供緩存名稱可讓我們對文件進行版本控制，或?qū)?shù)據(jù)與 App Shell 分開，以便我們能輕松地更新某個數(shù)據(jù)，而不會影響其他數(shù)據(jù)。

我們在install偵聽器下面添加activate事件偵聽器，因為activate事件會在Service worker啟動時觸發(fā)，圖中activate事件里面的代碼可以確保文件更改的時候更新緩存。

最后我們需要從緩存中提取我們需要的內(nèi)容，就是下面這段代碼：

caches.match() 會由內(nèi)而外對觸發(fā)抓取事件的網(wǎng)絡(luò)請求進行評估，并檢查以確認它是否位于緩存內(nèi)。它隨即使用已緩存版本作出響應(yīng)，或者利用 fetch 從網(wǎng)絡(luò)獲取一個副本，response 通過 e.respondWith() 傳回至網(wǎng)頁。

現(xiàn)在來看一下我們在離線的時候頁面是否會加載呢？

如圖，在Offline的網(wǎng)絡(luò)環(huán)境下，我們的應(yīng)用成功加載出來了。

這個小demo就到這里啦！

目前Progressive Web App仍處于初級階段，國內(nèi)普及度還不夠，但是不可忽視其背后的的技術(shù)，以及對前端全新的定位，或許它會像十年前的AJAX那樣重新改變前端的生態(tài)。