摘要：小蘿卜滬江前端開(kāi)發(fā)工程師本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。簡(jiǎn)稱就非常擅長(zhǎng)做這些，事實(shí)這也是它們的宗旨。通過(guò)它精心設(shè)計(jì)的規(guī)則能保證優(yōu)先顯示頁(yè)面的主要內(nèi)容。原創(chuàng)新書移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。

小蘿卜（滬江前端開(kāi)發(fā)工程師）
本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請(qǐng)指明出處。

如果你在過(guò)去幾個(gè)月一直關(guān)注web開(kāi)發(fā)社區(qū)，你很可能已經(jīng)閱讀了 progressive web apps,下面簡(jiǎn)稱PWAs （中文有譯作漸進(jìn)式web應(yīng)用）.它是一個(gè)術(shù)語(yǔ)，統(tǒng)稱那些擁有離線支持， 可安裝，“Retina”，滿屏顯示，個(gè)性化支持，流暢的瀏覽效果，推送通知和強(qiáng)大的UI等可以和原生媲美的web應(yīng)用。

https://www.smashingmagazine....

這是一些谷歌Progressive Web APPs示范
雖然當(dāng)你網(wǎng)站一加載，Service Work API就會(huì)幫你緩存所有網(wǎng)站資源，但就像你初次見(jiàn)一個(gè)人第一眼印象很重要，最新DoubleClick study的數(shù)據(jù)表明，如果首次加載花費(fèi)的時(shí)間超過(guò)3秒，超過(guò)53%的用戶會(huì)離開(kāi)。

3秒，在現(xiàn)實(shí)中是一個(gè)非常殘酷的目標(biāo)。移動(dòng)端連接，平均有300毫秒的延遲，還受制于帶寬、弱信號(hào)，所以實(shí)際上你只有不到1秒的時(shí)間去下載你app所需要初始化所需要的資源。

以上顯示了用戶請(qǐng)求的延時(shí)

當(dāng)然，我們有辦法去減少首次加載的時(shí)間，比如服務(wù)端預(yù)渲染基本布局、按需懶加載等等，但是我們能做到的是有限的，還必須專門有個(gè)人去做性能優(yōu)化。所以，既要迅速加載又要有原生的體驗(yàn)，我們?cè)撛鯓幼觯?br>AMP, For Accelerated Mobile Pages

https://codelabs.developers.g...

網(wǎng)站一個(gè)巨大的優(yōu)勢(shì)在于無(wú)摩擦的入口——它不需要安裝，用戶總是只需點(diǎn)擊一下即可立即加載。

為了享受這么輕松、瞬間的瀏覽體驗(yàn)，你所有要做的是讓你的網(wǎng)站跑的飛快，但是如何讓你的網(wǎng)站跑到飛快？我們可以適當(dāng)?shù)臏p少開(kāi)銷，沒(méi)有兆級(jí)別容量的圖片，沒(méi)有阻塞渲染的廣告，不超過(guò)10萬(wàn)行的js代碼，所有的只是純內(nèi)容的展示。

Accelerated Mobile Pages, 簡(jiǎn)稱AMPs, 就非常擅長(zhǎng)做這些，事實(shí)這也是它們的宗旨。通過(guò)它精心設(shè)計(jì)的規(guī)則能保證優(yōu)先顯示頁(yè)面的主要內(nèi)容。通過(guò)創(chuàng)建要嚴(yán)格的靜態(tài)布局，它能使平臺(tái)像google Search通過(guò)首屏預(yù)加載達(dá)到瞬間加載的效果。

https://www.ampproject.org/
https://www.ampproject.org/le...
https://www.ampproject.org/le...

這個(gè)AMP 的hero image 和 headline會(huì)預(yù)加載， 以保證用戶可以立馬看到它
AMP 還是 PWA?

為了快速加載你引入了AMP， 但你引入AMP的同時(shí)你很多功能會(huì)受限。AMP并不適用一些高級(jí)的功能 比如通知推送，網(wǎng)頁(yè)支付或者一切需要引入其它js的功能。以及因?yàn)锳MP的頁(yè)面是受AMP Cache控制的，你享受不到PWA的的優(yōu)勢(shì)，因?yàn)槟阕约旱腟ervice Worker不能運(yùn)行。另一方面PWA并不能像AMP在第一次加載那么快，并且能安全且容易的嵌入。

所以AMP還是漸進(jìn)式的app？是一次性加載還是選擇性的加載，是最新的平臺(tái)特性還是輕巧的應(yīng)用代碼？我們是不是有可能結(jié)合兩者，綜合兩個(gè)的好處？
PWAMP 結(jié)合模式

你可以通過(guò)以下方式結(jié)合AMPs和progressive web apps

AMP AS PWA

當(dāng)你能接受AMP的局限性

AMP TO PWA

當(dāng)你希望在兩者之間無(wú)縫過(guò)度

AMP IN PWA

當(dāng)你希望AMP作為一個(gè)資源在你的PWA里面可復(fù)用, 現(xiàn)在讓我們來(lái)多帶帶的談?wù)勊鼈儭?/p> AMP AS PWA

很多網(wǎng)站在AMPs范圍不需要?jiǎng)e的功能。例如，Amp by Example既是一個(gè)AMP APP，也是PWA APP。

https://ampbyexample.com/

它有一個(gè)service worker，因此它允許離線訪問(wèn)等。

它有一個(gè)manifest，所以支持“添加到主屏幕”。

當(dāng)用戶在google search頁(yè)面點(diǎn)擊Amp by Example，然后點(diǎn)擊該網(wǎng)站上的另一個(gè)鏈接時(shí)，他們將脫離AMP Cache去遠(yuǎn)程拉數(shù)據(jù)。網(wǎng)站仍然使用AMP庫(kù)，當(dāng)然，但是因?yàn)樗蕾囘h(yuǎn)程，所以它可以使用service worker，然后安裝及激活等等。

你可以使用此技術(shù)讓你的AMP網(wǎng)站支持離線訪問(wèn)，然后在線時(shí)及時(shí)更新你的網(wǎng)頁(yè)，因?yàn)樵诰€時(shí)您可以通過(guò)service workor的fetch事件修改響應(yīng)，返回你想要返回的內(nèi)容：

如果上面的不能滿足你，你需要非凡的PWA體驗(yàn)圍繞你的內(nèi)容，這是你可以考慮為高級(jí)的模式

所有的內(nèi)容子頁(yè)面（那些指定的內(nèi)容，不是全局的頁(yè)面）作為AMP發(fā)布，享受立即加載

這些AMP頁(yè)面用AMP特定的元素在用戶閱讀你內(nèi)容的時(shí)候?yàn)榫彺婧蚉WA腳本做準(zhǔn)備

當(dāng)用戶點(diǎn)擊你網(wǎng)站的另外一個(gè)鏈接（比如喚起類似原生app的操作），這時(shí)候service worker截取請(qǐng)求，接管頁(yè)面控制權(quán)加載PWA腳本

你可以實(shí)施這三部，如果你熟悉Service Works的是怎樣運(yùn)行的（如果你不熟悉，我強(qiáng)烈推薦你閱讀我同事 Jake’s Udacity 的課程）。

https://www.udacity.com/cours...

首先在你所有AMP引入入Service Worker.

第二步， 在Service Worker安裝事件中，緩存PWA需要的所有數(shù)據(jù)

最后， 還是在Service Worker里面， 用返回PWA取代原有的AMP導(dǎo)航請(qǐng)求
（下面的代碼只是為了展示原理所以簡(jiǎn)化了，高級(jí)的例子在最后的Demo里）

現(xiàn)在，當(dāng)用戶在你從AMP Cache返回的頁(yè)面里面點(diǎn)擊一個(gè)鏈接，Service Worker會(huì)注冊(cè)這個(gè)navigate 請(qǐng)求然后接管， 變成一個(gè)完全成型的已經(jīng)緩存的PWA。

這個(gè)技術(shù)有意思的在于它是漸進(jìn)增強(qiáng)的從AMP轉(zhuǎn)變成PWA. 這也意味著，如果你的瀏覽器不支持Service Worker，它將不會(huì)被導(dǎo)航到PWA, 而是AMP跳AMP
AMP通過(guò)shell url rewriting實(shí)現(xiàn)這種漸進(jìn)增強(qiáng)。通過(guò)在添加一個(gè)回調(diào)屬性， 如果檢測(cè)到不支持Service Worker，AMP會(huì)用shell Url重寫所有匹配所有連接，所有的后續(xù)的點(diǎn)擊不再會(huì)導(dǎo)航到PWA.

https://www.ampproject.org/do...

在此模式中，用戶已經(jīng)在一個(gè)漸進(jìn)式的app里面了，你正好用AJAX獲取獲取數(shù)據(jù)，但是你的真實(shí)需求是得到兩種后端返回的數(shù)據(jù)，一種是AMP內(nèi)容，另一種是你Progressive Web App所需要的JSON格式數(shù)據(jù)。

當(dāng)然，一種簡(jiǎn)單方式是在iframes里面加載 AMP內(nèi)容。但是iframe比較慢，而且你需要一次又一次重新編譯和重新初始化AMP Library。今天cutting-edge 技術(shù)提供一個(gè)更好的辦法: shadow-dom

AMP 可以安全的被嵌入其他網(wǎng)站， mp liabrary在整個(gè)PWA只會(huì)被編譯和加載一次。

PWA劫持任何導(dǎo)航點(diǎn)擊

然后它發(fā)一個(gè)XMLHttpRequest 去fetch AMP頁(yè)面

拉到后它把內(nèi)容放到一個(gè)新的shadow root

然后它通知 main AMP Library， “這里有個(gè)新的document，請(qǐng)檢查”(運(yùn)行的時(shí)候叫 attachShadowDoc)

用這個(gè)技術(shù)，AMP Library在PWA只編譯和加載一次，它會(huì)響應(yīng)每個(gè)你綁定的shadow document。并且因?yàn)槟闶峭ㄟ^(guò)XMLHttpRequests去fetch頁(yè)面，你可以在插入到新的 shadow document之前更改AMP 資源。打個(gè)比方你可以用來(lái):

過(guò)濾掉不需要的信息，比如headers 和footers

插入額外的內(nèi)容， 比如廣告和工具

用更動(dòng)態(tài)的內(nèi)容替換某些內(nèi)容

現(xiàn)在你把你的漸進(jìn)式Web APP變得稍微復(fù)雜點(diǎn)了，你可以減輕后端的復(fù)雜度。

為了闡述 shadow dom的這個(gè)方法（PWA包含AMP）,AMP團(tuán)隊(duì)已經(jīng)制作了React-based demo called The Scenic, ---- 一個(gè)虛擬的旅游雜志.

這個(gè)Demo在GitHub

https://github.com/ampproject...

我們看看 Mic’s new PWA（in beta）這個(gè)以及上線的例子： 如果你強(qiáng)刷任意一個(gè)頁(yè)面（會(huì)暫時(shí)忽略Service Worker），然后你看你請(qǐng)求返回的結(jié)果，你會(huì)發(fā)現(xiàn)是AMP頁(yè)面資源。現(xiàn)在你單價(jià)“hamburger menu”： 它會(huì)重新加載當(dāng)前頁(yè)面，然而因?yàn)?amp-install-serviceworker>已經(jīng)加載在PWA app shell， 這個(gè)重新加載幾乎是瞬間的，菜單在刷新后打開(kāi)，看上去好像根本沒(méi)有刷新過(guò)。

https://beta.mic.com/

我對(duì)這種新的結(jié)合方式很興奮，這種結(jié)合帶來(lái)了它們各自的好處, 再?gòu)?qiáng)調(diào)下：

總是很快

內(nèi)置大型分布（通過(guò)AMP平臺(tái)套件）漸進(jìn)式增強(qiáng)

一種后端返回規(guī)則

減少客戶端的復(fù)雜程度

更少的整體投入

但是我們只是探索了不同方式的差異，打造2016年及未來(lái)的最好的Web體驗(yàn)還仍需努力，為開(kāi)辟Web新篇章繼續(xù)前行。

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。