嚴格的說，PWA與微信小程序不同，前者更加開放，功能比Web更強（接近原生應(yīng)用），而微信小程序更封閉，是Web的子集。隨著Mozilla、微軟和蘋果陸續(xù)在PWA上投入，當然還有Google不遺余力的推動，PWA的生態(tài)越來越成熟，距離一個應(yīng)用打通所有瀏覽器的目標越來越近。不過在當下，騰訊天然的流量和生態(tài)讓微信小程序更具價值。本文來自appear.in的工程師Trond Kjetil Bremnes，介紹了在appear.in的PWA開發(fā)經(jīng)驗。LiveVideoStack對原文進行了摘譯。

WebRTC面臨的最大挑戰(zhàn)之一是跨平臺提供一致、可靠的支持。對于大多數(shù)應(yīng)用程序，尤其是那些在網(wǎng)絡(luò)上啟動的應(yīng)用程序，這通常意味著除了支持網(wǎng)絡(luò)應(yīng)用程序之外，還需要開發(fā)原生或混合移動應(yīng)用程序。漸進式網(wǎng)絡(luò)應(yīng)用程序（PWA）是一種新概念，它能夠通過允許基于網(wǎng)絡(luò)的應(yīng)用程序在不引入中間混合框架的情況下，看起來并像本地移動應(yīng)用那樣運作，從而將實現(xiàn)應(yīng)用程序在網(wǎng)絡(luò)上統(tǒng)一。正如將要討論的那樣，這種方法優(yōu)點頗多，但它對WebRTC應(yīng)用程序確實是有意義的嗎？

使你的WebRTC應(yīng)用程序像PWA一樣

什么是PWA

簡而言之，漸進式網(wǎng)絡(luò)應(yīng)用程序（簡稱PWA）是一種帶有一些額外功能的Web應(yīng)用程序，是一種編寫Web應(yīng)用程序的新方式，它為你提供了一些操作系統(tǒng)通常不具備的“抓手”。WPA本身不是一個產(chǎn)品,至少它跟你口中所說的“安卓應(yīng)用程序”不一樣。這些技術(shù)集合使得網(wǎng)頁看起來，在體驗和操作方面更像是本機安裝的應(yīng)用程序。

“P”代表“漸進式增強”。首先，它初聽起來感覺很奇怪，這意味著應(yīng)用程序的功能集隨著用戶的使用而逐漸得以擴展。其次，這也意味著你不能真正依賴于應(yīng)用程序正常運行的功能。相反，你需要逐步增強基于用戶手機和操作系統(tǒng)功能的應(yīng)用程序。由于它們使用的是幕后漸進式增強的方式，所以很可能你已經(jīng)在使用PWA卻不得知。

什么讓PWA如此強大？

首先，就WebRTC而言，PWA可通過瀏覽器在任何地方工作，畢竟它們只是網(wǎng)頁，用戶無需下載任何東西。

其次，PWA可以大大減少應(yīng)用程序的大小。由于你不需要嵌入瀏覽器，大多數(shù)運行時代碼已經(jīng)安裝在客戶端上。這意味著最小的WebRTC應(yīng)用程序的大小可以用KB來衡量，甚至包括UI庫。appear.in的PWA版本大小就只有200KB。而React和相關(guān)的庫就占用了3/4的文件大小，接下來我們可能會做更多工作來進一步減少這類文件的大小。

Twitter的本地應(yīng)用程序與PWA大小比較。來源：

https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY

第三，PWA讓你依賴于瀏覽器的安全性。對網(wǎng)絡(luò)瀏覽器安全性的看法——我仍然相信谷歌、Mozilla、微軟和蘋果這樣的大型團隊能夠快速解決安全問題，也不愿意相信其他應(yīng)用程序開發(fā)人員也會做的同樣出色。

PWA安裝

只要智能手機具有網(wǎng)頁瀏覽器，就可以將網(wǎng)頁添加到手機的主屏幕，這是用戶在第一臺iPhone上向手機添加新應(yīng)用程序的唯一方法。自那時以來，這種很少使用的功能得以不斷發(fā)展，現(xiàn)已變得不再只是一個簡單的書簽。

當一個網(wǎng)絡(luò)應(yīng)用程序滿足一定數(shù)量的啟發(fā)式算法時，瀏覽器會注意到，并開始推薦用戶將該網(wǎng)絡(luò)應(yīng)用程序“安裝”為PWA。這種安裝增銷與瀏覽器到瀏覽器的差別很大-例如Chrome會顯示一個彈出窗口，三星互聯(lián)網(wǎng)會有一個用戶可以點擊的明顯標志。這就為用戶提供了一個提示，即這不僅僅只是個文檔，而是一個完整的網(wǎng)絡(luò)應(yīng)用程序。

Google的示例PWA顯示了向主屏幕添加鏈接的選項 –https://github.com/googlearchive/voice-memos

常見的誤解

關(guān)于PWA的一些討論我已經(jīng)一次又一次地駁回，但仍然值得在這里重申一下。

1．不僅僅應(yīng)用于Android系統(tǒng)

雖然目前可能在Android上效果最好，但它們也可以在其他操作系統(tǒng)上工作。Chrome操作系統(tǒng)就是一個二者良好集成的地方。PWA都只是一些“普通”的網(wǎng)絡(luò)應(yīng)用程序，且一些額外的裝飾的東西。只要有瀏覽器能夠查看它們，它們就應(yīng)該可以工作。

2.不僅僅事關(guān)谷歌

Mozilla、三星互聯(lián)網(wǎng)和微軟都對PWA API的開發(fā)投入了大量資金。此外，微軟已宣布，他們將開始在Windows Store中列出PWA應(yīng)用程序。iOS的支持也在進行之中，盡管它還沒有完全完成，但每個發(fā)行版都會越來越好。

3.不僅僅應(yīng)用智能手機終端

雖然目前手機的支持情況更好，但Chrome團隊已宣布2018年是他們將PWA帶入桌面的一年。

入門

開發(fā)PWA非常簡單，最難的部分是讓W(xué)ebRTC啟動并運行。我接下里將繼續(xù)介紹并假設(shè)你已經(jīng)完成了該任務(wù)的網(wǎng)絡(luò)部分并準備好了一個正在運行的應(yīng)用程序。如果沒有，那么在這個網(wǎng)站上有很多其他的指南可以指導(dǎo)你實現(xiàn)這個目標。本指南是如何將你的WebRTC 網(wǎng)絡(luò)應(yīng)用程序轉(zhuǎn)換為PWA。

先決條件

要構(gòu)建漸進式網(wǎng)絡(luò)應(yīng)用程序，你需要了解兩個關(guān)鍵概念：

Web App Manifest網(wǎng)絡(luò)應(yīng)用程序清單

Service Worker（服務(wù)工作線程）

以上是PWA之所以是PWA的兩項關(guān)鍵技術(shù)。此外，該頁面需要通過HTTPS提供服務(wù)（請注意，對于本地主機，這一要求是寬松的）。理想情況下，它也應(yīng)該是高性能的，并能夠在各種屏幕尺寸和設(shè)備上良好地響應(yīng)并工作。

性能

在為智能手機編寫網(wǎng)絡(luò)應(yīng)用程序時，你必須特別注意性能要求。盡管現(xiàn)在很多流行的設(shè)備比以往的筆記本電腦都要好，但這些設(shè)備會受到熱量的限制，并且任何性能瓶頸都會對你造成10倍的打擊。這就要求你在真實設(shè)備上進行測試 - 不要被設(shè)備仿真器和模擬器所迷惑。Chrome開發(fā)工具確實有很多旋鈕和撥號盤來模擬調(diào)節(jié)，但是它永遠都不像現(xiàn)實的手機那么真實。

WebRTC是一項資源密集型技術(shù)，對用戶的硬件要求很高，因此你需要特別注意這一點。了解Chrome開發(fā)工具中的性能面板，并盡量減少不必要的重繪。

使用Chrome的開發(fā)工具來優(yōu)化幀率

對于那些使用React來創(chuàng)建PWA的開發(fā)者的一句忠告：虛擬DOM算法非常熱衷于在UI更新中刪除和重新添加視頻幀，從而造成巨大的性能瓶頸。所以要格外的小心，并避免此類情況的發(fā)生。幸運的是，這些重繪十分扎眼，特別是在測試真實設(shè)備上的站點時。

連接性差

由于PWA的使用主要是移動設(shè)備，因此你應(yīng)該考慮到網(wǎng)絡(luò)覆蓋范圍的變化。盡管WebRTC實際上不能脫機工作，但可能需要添加基本的離線支持。你的目標是提供類似于本地的體驗，因此你應(yīng)該盡量獲取一些離線用戶的體驗。通過這種方式，你可以更好的向用戶提供提示和信息，并向他們說明可以采取哪些措施來解決相應(yīng)的問題。例如，當你的手機沒有可用的網(wǎng)絡(luò)連接時，本地Skype應(yīng)用程序不顯示過時落后的信息。如果你可以從設(shè)備的緩存中加載該應(yīng)用程序，則加載時間會快得多。請注意，如若要根據(jù)Chrome將你的應(yīng)用歸類為PWA，你需要提供一些基本的離線功能。

代碼示例

現(xiàn)在，讓我們繼續(xù)看一些示例代碼，以幫助你入門。我假設(shè)你已經(jīng)安裝了一個網(wǎng)絡(luò)應(yīng)用程序并準備好了。

Manifest（清單）

網(wǎng)絡(luò)應(yīng)用程序清單是你通常放在標記內(nèi)的更為結(jié)構(gòu)化的版本。這里，你可以定義應(yīng)用程序的名稱，圖標，主題顏色以及瀏覽器用于定義用戶體驗的一些其他的提示。下面，你將會看到一個相當簡單的清單示例。

毫無疑問，name是用于啟動畫面和主屏幕的應(yīng)用程序名稱。當應(yīng)用程序的全名太長而無法全部顯示時，可選的short_name將會顯示在手機的主屏幕上。 background_color用于屏幕背景顏色設(shè)置。

start_url描述應(yīng)用程序在打開時應(yīng)該啟動的URL。通常設(shè)置為.或/。這意味著用戶可以進一步瀏覽路徑，并且仍然將“主”頁面添加到主屏幕。這與“普通”書簽的工作方式不同，即你在書簽上的任何頁面URL都是你獲得的URL。即使用戶從一篇文章中添加它，也允許CNN PWA始終從根路經(jīng)開始加載。例如，如果用戶在安裝PWA時訪問https://cnn.com/article/all-is-well-with-the-world.html，它仍會加載https://cnn.com。小竅門是在URL的末尾添加？openedFromHomescreen來跟蹤使用情況。

display用于描述應(yīng)用程序在啟動時的外觀。將其設(shè)置為“standalone”可以將所有瀏覽器鑲邊剝離，并使它看起來更像本機應(yīng)用程序。默認設(shè)置是“browser”，即它將在設(shè)備的默認瀏覽器中打開。

icons是用于應(yīng)用程序的一組圖標。操作系統(tǒng)會根據(jù)屏幕大小和像素大小來選擇與用戶設(shè)備最佳匹配的數(shù)據(jù)。

有關(guān)應(yīng)用程序清單的更全面描述，請查看MDN的優(yōu)秀文章MDN’s excellent article （https://developer.mozilla.org/en-US/docs/Web/Manifest）。

為了幫助你自動配置，我推薦該網(wǎng)站https://tomitm.github.io/appmanifest/。

Service Worker-服務(wù)工作線程

Service Worker是PWA的第二個重要部分。簡而言之，服務(wù)工作線程是一個可編程的代理服務(wù)器和緩存。它存在于自己的線程中，獨立于代碼執(zhí)行和運行時環(huán)境中的其他網(wǎng)絡(luò)應(yīng)用程序，甚至可以在網(wǎng)頁未打開時運行代碼。這是你編寫緩存策略并設(shè)置推送通知的地方。

關(guān)于如何編寫服務(wù)工作線程有很多的資源，所以在此我不會詳細介紹它是如何工作的，或者如何編寫。你可以在MDN更詳細地閱讀并參考學(xué)習(xí)。如果你不想自己編寫，Google的Workbox工具箱是管理服務(wù)工作線程的一個很好的庫。它具有高度的可配置性，并且可以消除很多自己從頭開始創(chuàng)建時的疑難和令人頭痛的問題。

為了讓你的應(yīng)用程序被Chrome分類為PWA，應(yīng)用程序需要加載服務(wù)工作線程和某種脫機功能。至少，你必須能夠在連接斷開時提供服務(wù)。

文件處理

需要特別注意的一點是，服務(wù)工作線程文件的位置非常重要。服務(wù)工作線程只能緩存它所在的同一文件夾中的或者是子文件夾下的資源。為了獲得最大的緩存能力，我建議盡可能地將其放置在根目錄中。

務(wù)必注意，服務(wù)工作線程運行時生命周期與網(wǎng)絡(luò)應(yīng)用程序的其余部分完全分離。安裝和更新生命周期也截然不同。通常，只要瀏覽器發(fā)現(xiàn)文件已更改，就會安裝新的服務(wù)工作線程。然而，生活并不總是這么簡單。已經(jīng)有很多的“僵尸”服務(wù)工作線程無限期的存活在那里，并無限期地緩存陳舊過時的內(nèi)容。如果你決定從頭開始自己創(chuàng)建一個服務(wù)工作線程，請考慮在里面放入一個“終止-開關(guān)” – 即服務(wù)工作線程完全取消無效緩存并重新安裝的一種方法。

另一點也非常重要-不要像對待其他資源一樣，使用哈希策略來使其失效并進行替換。上面所提到的Workbox庫已經(jīng)建立了解決這個問題的方式，并確保在應(yīng)用程序更改時重新生成有有效緩存。

推送通知

我也特別想提一提推送通知。尤其是對于WebRTC應(yīng)用程序，推送通知是將人們吸引到對話中的強大方式，因此我建議你花時間來完善它們。Peter Beverloo已創(chuàng)建了一個用于測試推送通知功能的強大工具。我強烈推薦你試一試。該網(wǎng)站可以讓你進行試驗并找出哪些功能適用于哪種設(shè)備和哪種瀏覽器。

權(quán)限

為了能夠?qū)⑼扑屯ㄖl(fā)送到用戶的手機上，你首先必須申請權(quán)限。在頁面打開時立即請求推送通知的權(quán)限通常被認為是不佳的形式。請確保用戶知道為什么他們需要這些推送，并及時地向他們提供增值服務(wù)。另外值得注意的是，一旦用戶停止使用你的應(yīng)用程序，并且不與你的通知進行交互，則該權(quán)限最終將被撤銷。使得通知與用戶息息相關(guān)并且是具有價值的，才能獲得最大利益。阻止通知也很容易，所以最好不要指望被應(yīng)用程序準許的通知能夠按預(yù)期設(shè)想一樣有效。

技巧和竅門

相機的方向

在手機上使用WebRTC時，你需要特別注意相機的方向。臺式電腦通常只提供單個相機流，只要使用getUserMedia，它就會理所當然地默認為內(nèi)置攝像頭或為操作系統(tǒng)中的任何默認設(shè)置。

完全不同的是，在開發(fā)WebRTC智能手機客戶端時，你必須考慮大部分的手機都是具有兩個攝像頭的。getUserMedia API允許你請求一個首選攝像頭，因此確保用戶使用前置攝像頭。如果不是，它就很可能會默認為后置攝像頭。另開發(fā)者更傷腦筋的是，手機可能會快速翻轉(zhuǎn)，故而你應(yīng)該建立能夠適時更改攝像頭的功能。但是由于你需要為新數(shù)據(jù)流提供RTC連接，因此在傳輸過程中更改相機可能有點棘手。

如果你不想解決該問題，另一個方法是進入預(yù)呼叫設(shè)置頁面，你可以在那里更改相機的方向。

“適用性”

內(nèi)聯(lián)關(guān)鍵事物

為了避免應(yīng)用程序加載時出現(xiàn)閃爍的白框，你應(yīng)該內(nèi)聯(lián)重要資產(chǎn)。如果你的應(yīng)用具有背景顏色的設(shè)置，請考慮將其添加到或標記中，以使其能夠立即加載。其次，你應(yīng)該關(guān)注應(yīng)用程序殼模模型。簡而言之：定義應(yīng)用程序加載到內(nèi)部的核心外殼，且這個外殼應(yīng)該盡可能的輕薄。第三，觀察你是否可以識別一組最關(guān)鍵的樣式表規(guī)則并將它們進行內(nèi)聯(lián)。你也可以使用rel =“preload”來獲取關(guān)鍵資產(chǎn)。

想加載更快？查看離線緩存來獲得即時加載時間以進行回訪。

使用平臺

為了進一步提高應(yīng)用程序的適用性，一定要充分利用平臺的功能。在一些瀏覽器上，你可以使用頁面上的按鈕生成本機共享對話框，通過它來邀請用戶參加電話會議。

這樣的API有很多，所以你可以花點時間了解正在開發(fā)的一些新的API，并考慮如何實現(xiàn)它們。并可使用功能檢測來確保功能的實際可用。顯然，千萬不要依賴于你支持的平臺上所沒有的功能。

Chrome開發(fā)者工具

Chrome開發(fā)者工具將是你的新起點，它是一款值得學(xué)習(xí)的、功能非常強大的工具。“性能”選項卡將顯示你的應(yīng)用程序如何實時運行。請定期在你的開發(fā)者計算機和實際設(shè)備上查看此信息。我這里強調(diào)Chrome Developer Tools，但絕不是讓你在其他瀏覽器中測試你的應(yīng)用程序。

應(yīng)用

應(yīng)用程序選項卡是一個你可以在其中找到制作應(yīng)用程序的部分概述的地方。它會讀取你的應(yīng)用程序清單，并為缺少的或不工作的部分提供提示和線索。

“Add to homescreen（添加到主屏幕）”是一個有用的按鈕，它將觸發(fā)代碼的安裝路徑，并會在應(yīng)用程序的某些部分不遵循PWA啟發(fā)式時通知你。另外，這里也是測試和診斷服務(wù)工作線程的地方。

觀察PWA應(yīng)用程序清單

審核

在“審核”標簽中，你可以訪問谷歌的Lighthouse。Lighthouse是一個功能強大的工具，你可以應(yīng)用它來對應(yīng)用程序執(zhí)行自動化性能和PWA啟發(fā)式評估。運行此項則將根據(jù)您的應(yīng)用程序在各種標準上的應(yīng)用程度，在0到100之間進行評分。同時，它還將提供指導(dǎo)并幫助你改善評估分數(shù)。隨著未來Chrome更新的啟發(fā)式轉(zhuǎn)變和發(fā)展，在你無需執(zhí)行任何操作的情況下，你的分數(shù)就可能會發(fā)生變化。出于這個原因，請確保定期運行此測試。此工具也可作為CLI使用，你可以將其插入Continuous Integration（CI），并通知你回歸。有關(guān)Lighthouse的更多信息，請參閱Google的文檔。

性能和內(nèi)存

此項對于診斷應(yīng)用程序的性能和識別瓶頸非常有用。如果你在筆記本電腦上遇到問題，那么該問題在受熱能限制的智能手機上則愈加嚴重。更重要的是,如果你的應(yīng)用程序總是以60幀/秒的速度運行，則默認在智能手機上不會出現(xiàn)同類情況。

這使我了解了Chrome瀏覽器中最重要的工具——遠程調(diào)試。

遠程調(diào)試

該選項在Developer Tools中是不可用的，但來自于chrome://inspect/#devices。從這里你可以設(shè)置遠程調(diào)試，以針對真實設(shè)備運行Chrome Developer Tools。我曾提到需要在實際設(shè)備上進行測試。這是一個非常強大的工具，它可以幫助你診斷筆記本上肉眼所看不到的問題。想獲取有關(guān)如何設(shè)置和使用它的更全面的指南，請參閱https://developers.google.com/web/tools/chrome-devtools/remote-debugging/。

使用Chrome的遠程開發(fā)者工具在移動設(shè)備等遠程設(shè)備上運行開發(fā)控制臺

你甚至可以通過手機實時檢查視圖。

PWA桌面版

最后，請記住，PWA不限于移動設(shè)備、智能手機使用。

為制作令人驚嘆的PWA所采取的大多數(shù)步驟，對于桌面應(yīng)用程序來說也可能是有價值的。僅僅因為你坐在“合適的”電腦前，這是否就意味著你不需要快速地，即時的加載數(shù)據(jù)和享受高性能的用戶體驗？

即便如此，PWA工具箱正于今年緩慢進入桌面領(lǐng)域。它已經(jīng)可以在功能標志后的Chrome上進行測試。我已經(jīng)在我的Macbook上運行了幾個星期，現(xiàn)在我很享受它帶來的功能優(yōu)化體驗。

它與Electron應(yīng)用程序價值主張非常相似，但與之不同的是你可以將Web應(yīng)用程序發(fā)布到用戶桌面，而不用捆綁整個Chromium瀏覽器實例。同樣，這意味著不用數(shù)百兆字節(jié)測量應(yīng)用程序下載的大小，也可以將其縮小到幾百千字節(jié)。另外，通過共享一個通用的瀏覽器引擎，與每個應(yīng)用程序的專用Chromium實例相比，您將看到更小的內(nèi)存占用。

顯示appear.in如何在安裝時看起來像在臺式計算機上運行。該圖標來自鏈接的清單。在MacOS上,應(yīng)用程序顯示在Dock中,并可以使用Spotlight打開-就像其他任何應(yīng)用程序一樣。