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

整理 | 包包

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

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

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

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

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

• 漸進(jìn)式適用于使用任何瀏覽器的用戶，因?yàn)樗暮诵氖且詽u進(jìn)式增強(qiáng)。

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

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

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

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

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

我們?cè)谄渲羞x擇幾點(diǎn)著重解釋一下：

（1）可安裝

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

其中幾個(gè)屬性代表的意思是：

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

? icons 讓我們?cè)O(shè)置頁面的圖標(biāo)

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

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

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

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

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

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

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

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

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

我們來看一下，如何注冊(cè)Service worker？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們?cè)趇nstall偵聽器下面添加activate事件偵聽器，因?yàn)閍ctivate事件會(huì)在Service worker啟動(dòng)時(shí)觸發(fā)，圖中activate事件里面的代碼可以確保文件更改的時(shí)候更新緩存。

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

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

現(xiàn)在來看一下我們?cè)陔x線的時(shí)候頁面是否會(huì)加載呢？

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

這個(gè)小demo就到這里啦！

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