作者：傅姝麗（滬江前端開發(fā)工程師）
本文原創(chuàng)翻譯，有不當的地方歡迎指出慌申。轉載請指明出處出刷。
如果你在過去幾個月一直關注web開發(fā)社區(qū)，你很可能已經閱讀了progressive web apps,下面簡稱PWAs （中文有譯作漸進式web應用）.它是一個術語皆的，統(tǒng)稱那些擁有離線支持，可安裝蹋盆，“Retina”费薄，滿屏顯示，個性化支持，流暢的瀏覽效果，推送通知和強大的UI等可以和原生媲美的web應用家厌。
https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
這是一些谷歌Progressive Web APPs示范
雖然當你網站一加載杠纵，Service Work API就會幫你緩存所有網站資源扼劈，但就像你初次見一個人第一眼印象很重要，最新DoubleClick study的數據表明，如果首次加載花費的時間超過3秒，超過53%的用戶會離開竞慢。
3秒，在現實中是一個非常殘酷的目標治泥。移動端連接筹煮，平均有300毫秒的延遲，還受制于帶寬居夹、弱信號败潦，所以實際上你只有不到1秒的時間去下載你app所需要初始化所需要的資源本冲。
以上顯示了用戶請求的延時
當然，我們有辦法去減少首次加載的時間劫扒，比如服務端預渲染基本布局檬洞、按需懶加載等等，但是我們能做到的是有限的沟饥，還必須專門有個人去做性能優(yōu)化疮胖。所以，既要迅速加載又要有原生的體驗闷板，我們該怎樣做？
AMP, For Accelerated Mobile Pages
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#4
網站一個巨大的優(yōu)勢在于無摩擦的入口——它不需要安裝院塞，用戶總是只需點擊一下即可立即加載遮晚。
為了享受這么輕松、瞬間的瀏覽體驗拦止，你所有要做的是讓你的網站跑的飛快县遣，但是如何讓你的網站跑到飛快？我們可以適當的減少開銷汹族，沒有兆級別容量的圖片萧求，沒有阻塞渲染的廣告，不超過10萬行的js代碼顶瞒，所有的只是純內容的展示夸政。
Accelerated Mobile Pages, 簡稱AMPs, 就非常擅長做這些，事實這也是它們的宗旨榴徐。通過它精心設計的規(guī)則能保證優(yōu)先顯示頁面的主要內容守问。通過創(chuàng)建要嚴格的靜態(tài)布局，它能使平臺像google Search通過首屏預加載達到瞬間加載的效果坑资。
https://www.ampproject.org/learn/how-amp-works/
https://www.ampproject.org/learn/how-amp-works/#load-pages-in-an-instant
這個AMP 的hero image 和 headline會預加載耗帕， 以保證用戶可以立馬看到它
AMP 還是 PWA?
為了快速加載你引入了AMP， 但你引入AMP的同時你很多功能會受限袱贮。AMP并不適用一些高級的功能 比如通知推送仿便，網頁支付或者一切需要引入其它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里面可復用, 現在讓我們來單獨的談談它們卷玉。
AMP AS PWA
很多網站在AMPs范圍不需要別的功能哨颂。例如，Amp by Example既是一個AMP APP相种，也是PWA APP威恼。
它有一個service worker，因此它允許離線訪問等寝并。
它有一個manifest箫措，所以支持“添加到主屏幕”。
當用戶在google search頁面點擊Amp by Example衬潦，然后點擊該網站上的另一個鏈接時斤蔓，他們將脫離AMP Cache去遠程拉數據。網站仍然使用AMP庫镀岛，當然弦牡，但是因為它依賴遠程，所以它可以使用service worker漂羊，然后安裝及激活等等驾锰。
你可以使用此技術讓你的AMP網站支持離線訪問，然后在線時及時更新你的網頁走越，因為在線時您可以通過service workor的fetch事件修改響應椭豫，返回你想要返回的內容：
AMP TO PWA
如果上面的不能滿足你，你需要非凡的PWA體驗圍繞你的內容旨指，這是你可以考慮為高級的模式
所有的內容子頁面（那些指定的內容捻悯，不是全局的頁面）作為AMP發(fā)布，享受立即加載
這些AMP頁面用AMP特定的元素在用戶閱讀你內容的時候為緩存和PWA腳本做準備
當用戶點擊你網站的另外一個鏈接（比如喚起類似原生app的操作）淤毛，這時候service worker截取請求今缚，接管頁面控制權加載PWA腳本
你可以實施這三部，如果你熟悉Service Works的是怎樣運行的（如果你不熟悉低淡，我強烈推薦你閱讀我同事Jake’s Udacity 的課程）姓言。
https://www.udacity.com/course/offline-web-applications--ud899
首先在你所有AMP引入入Service Worker.
第二步， 在Service Worker安裝事件中蔗蹋，緩存PWA需要的所有數據
最后何荚， 還是在Service Worker里面， 用返回PWA取代原有的AMP導航請求
（下面的代碼只是為了展示原理所以簡化了猪杭，高級的例子在最后的Demo里）
現在餐塘，當用戶在你從AMP Cache返回的頁面里面點擊一個鏈接，Service Worker會注冊這個navigate 請求然后接管皂吮， 變成一個完全成型的已經緩存的PWA戒傻。
這個技術有意思的在于它是漸進增強的從AMP轉變成PWA. 這也意味著税手，如果你的瀏覽器不支持Service Worker，它將不會被導航到PWA, 而是AMP跳AMP
AMP通過shell url rewriting實現這種漸進增強需纳。通過在添加一個回調屬性芦倒， 如果檢測到不支持Service Worker，AMP會用shell Url重寫所有匹配所有連接不翩，所有的后續(xù)的點擊不再會導航到PWA.
https://www.ampproject.org/docs/reference/components/amp-install-serviceworker#shell-url-rewrite
AMP IN PWA
在此模式中兵扬，用戶已經在一個漸進式的app里面了，你正好用AJAX獲取獲取數據口蝠，但是你的真實需求是得到兩種后端返回的數據器钟，一種是AMP內容，另一種是你Progressive Web App所需要的JSON格式數據妙蔗。
當然俱箱，一種簡單方式是在iframes里面加載 AMP內容。但是iframe比較慢灭必，而且你需要一次又一次重新編譯和重新初始化AMP Library。今天cutting-edge 技術提供一個更好的辦法: shadow-dom
AMP 可以安全的被嵌入其他網站乃摹， 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)的內容替換某些內容
現在你把你的漸進式Web APP變得稍微復雜點了，你可以減輕后端的復雜度拢肆。
準備好了减响，走你~
為了闡述 shadow dom的這個方法（PWA包含AMP）,AMP團隊已經制作了React-based demo called The Scenic, ---- 一個虛擬的旅游雜志.
這個Demo在GitHub
https://github.com/ampproject/amp-publisher-sample/tree/master/amp-pwa
來點干貨
我們看看Mic’s new PWA（in beta）這個以及上線的例子： 如果你強刷任意一個頁面（會暫時忽略Service Worker），然后你看你請求返回的結果郭怪，你會發(fā)現是AMP頁面資源≈荆現在你單價“hamburger menu”： 它會重新加載當前頁面，然而因為已經加載在PWA app shell鄙才， 這個重新加載幾乎是瞬間的颂鸿，菜單在刷新后打開，看上去好像根本沒有刷新過攒庵。
最后的想法
我對這種新的結合方式很興奮嘴纺，這種結合帶來了它們各自的好處, 再強調下：
總是很快
內置大型分布（通過AMP平臺套件）漸進式增強
一種后端返回規(guī)則
減少客戶端的復雜程度
更少的整體投入
但是我們只是探索了不同方式的差異败晴，打造2016年及未來的最好的Web體驗還仍需努力，為開辟Web新篇章繼續(xù)前行颖医。
如果喜歡本文位衩，可以訂閱滬江技術學院公眾號。
