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

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

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

https://www.smashingmagazine....

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

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

以上顯示了用戶請求的延時

當然，我們有辦法去減少首次加載的時間，比如服務端預渲染基本布局、按需懶加載等等，但是我們能做到的是有限的，還必須專門有個人去做性能優(yōu)化。所以，既要迅速加載又要有原生的體驗，我們該怎樣做？
AMP, For Accelerated Mobile Pages

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

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

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

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

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

這個AMP 的hero image 和 headline會預加載， 以保證用戶可以立馬看到它
AMP 還是 PWA?

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

所以AMP還是漸進式的app？是一次性加載還是選擇性的加載，是最新的平臺特性還是輕巧的應用代碼？我們是不是有可能結合兩者，綜合兩個的好處？
PWAMP 結合模式

你可以通過以下方式結合AMPs和progressive web apps

AMP AS PWA

當你能接受AMP的局限性

AMP TO PWA

當你希望在兩者之間無縫過度

AMP IN PWA

當你希望AMP作為一個資源在你的PWA里面可復用, 現(xiàn)在讓我們來多帶帶的談談它們。

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

https://ampbyexample.com/

它有一個service worker，因此它允許離線訪問等。

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

當用戶在google search頁面點擊Amp by Example，然后點擊該網(wǎng)站上的另一個鏈接時，他們將脫離AMP Cache去遠程拉數(shù)據(jù)。網(wǎng)站仍然使用AMP庫，當然，但是因為它依賴遠程，所以它可以使用service worker，然后安裝及激活等等。

你可以使用此技術讓你的AMP網(wǎng)站支持離線訪問，然后在線時及時更新你的網(wǎng)頁，因為在線時您可以通過service workor的fetch事件修改響應，返回你想要返回的內容：

如果上面的不能滿足你，你需要非凡的PWA體驗圍繞你的內容，這是你可以考慮為高級的模式

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

這些AMP頁面用AMP特定的元素在用戶閱讀你內容的時候為緩存和PWA腳本做準備

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

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

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

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

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

最后， 還是在Service Worker里面， 用返回PWA取代原有的AMP導航請求
（下面的代碼只是為了展示原理所以簡化了，高級的例子在最后的Demo里）

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

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

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

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

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

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

PWA劫持任何導航點擊

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

拉到后它把內容放到一個新的shadow root

然后它通知 main AMP Library， “這里有個新的document，請檢查”(運行的時候叫 attachShadowDoc)

用這個技術，AMP Library在PWA只編譯和加載一次，它會響應每個你綁定的shadow document。并且因為你是通過XMLHttpRequests去fetch頁面，你可以在插入到新的 shadow document之前更改AMP 資源。打個比方你可以用來:

過濾掉不需要的信息，比如headers 和footers

插入額外的內容， 比如廣告和工具

用更動態(tài)的內容替換某些內容

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

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

這個Demo在GitHub

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

我們看看 Mic’s new PWA（in beta）這個以及上線的例子： 如果你強刷任意一個頁面（會暫時忽略Service Worker），然后你看你請求返回的結果，你會發(fā)現(xiàn)是AMP頁面資源?，F(xiàn)在你單價“hamburger menu”： 它會重新加載當前頁面，然而因為已經(jīng)加載在PWA app shell， 這個重新加載幾乎是瞬間的，菜單在刷新后打開，看上去好像根本沒有刷新過。

https://beta.mic.com/

我對這種新的結合方式很興奮，這種結合帶來了它們各自的好處, 再強調下：

總是很快

內置大型分布（通過AMP平臺套件）漸進式增強

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

減少客戶端的復雜程度

更少的整體投入

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

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