翻譯 | Progressive Web AMPs

作者:傅姝麗(滬江前端開發(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/

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威恼。

https://ampbyexample.com/

它有一個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鄙才, 這個重新加載幾乎是瞬間的颂鸿,菜單在刷新后打開,看上去好像根本沒有刷新過攒庵。

https://beta.mic.com/

最后的想法

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

總是很快

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

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

減少客戶端的復雜程度

更少的整體投入

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

如果喜歡本文位衩,可以訂閱滬江技術學院公眾號。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末熔萧,一起剝皮案震驚了整個濱河市糖驴,隨后出現的幾起案子,更是在濱河造成了極大的恐慌佛致,老刑警劉巖贮缕,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異俺榆,居然都是意外死亡感昼,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門罐脊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來定嗓,“玉大人,你說我怎么就攤上這事萍桌∠Γ” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵上炎,是天一觀的道長恃逻。 經常有香客問我,道長藕施,這世上最難降的妖魔是什么寇损? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮裳食,結果婚禮上矛市,老公的妹妹穿的比我還像新娘。我一直安慰自己诲祸,他們只是感情好尘盼,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著烦绳,像睡著了一般卿捎。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上径密,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天午阵,我揣著相機與錄音,去河邊找鬼。 笑死底桂,一個胖子當著我的面吹牛植袍,可吹牛的內容都是我干的。 我是一名探鬼主播籽懦,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼于个,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了暮顺?” 一聲冷哼從身側響起厅篓,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎捶码,沒想到半個月后羽氮,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡惫恼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年档押,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祈纯。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡令宿,死狀恐怖,靈堂內的尸體忽然破棺而出腕窥,到底是詐尸還是另有隱情粒没,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布油昂,位于F島的核電站,受9級特大地震影響倾贰,放射性物質發(fā)生泄漏冕碟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一匆浙、第九天 我趴在偏房一處隱蔽的房頂上張望安寺。 院中可真熱鬧,春花似錦首尼、人聲如沸挑庶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽迎捺。三九已至,卻和暖如春查排,著一層夾襖步出監(jiān)牢的瞬間凳枝,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留岖瑰,地道東北人叛买。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像蹋订,于是被迫代替她去往敵國和親率挣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容