在「小程序」PWA上開發WebRTC

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

文 / Trond Kjetil Bremnes

譯 / 王月美

審校 / 包研

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

使你的WebRTC應用程序像PWA一樣

什麼是PWA

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

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

什麼讓PWA如此強大？

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

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

Twitter的本地應用程序與PWA大小比較。來源：

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

第三，PWA讓你依賴於瀏覽器的安全性。對網路瀏覽器安全性的看法——我仍然相信谷歌、Mozilla、微軟和蘋果這樣的大型團隊能夠快速解決安全問題，也不願意相信其他應用程序開發人員也會做的同樣出色。

PWA安裝

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

當一個網路應用程序滿足一定數量的啟發式演算法時，瀏覽器會注意到，並開始推薦用戶將該網路應用程序「安裝」為PWA。這種安裝增銷與瀏覽器到瀏覽器的差別很大-例如Chrome會顯示一個彈出窗口，三星互聯網會有一個用戶可以點擊的明顯標誌。這就為用戶提供了一個提示，即這不僅僅只是個文檔，而是一個完整的網路應用程序。

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

常見的誤解

關於PWA的一些討論我已經一次又一次地駁回，但仍然值得在這裡重申一下。

1．不僅僅應用於Android系統

雖然目前可能在Android上效果最好，但它們也可以在其他操作系統上工作。Chrome操作系統就是一個二者良好集成的地方。PWA都只是一些「普通」的網路應用程序，且一些額外的裝飾的東西。只要有瀏覽器能夠查看它們，它們就應該可以工作。

2.不僅僅事關谷歌

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

3.不僅僅應用智能手機終端

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

入門

開發PWA非常簡單，最難的部分是讓WebRTC啟動並運行。我接下里將繼續介紹並假設你已經完成了該任務的網路部分並準備好了一個正在運行的應用程序。如果沒有，那麼在這個網站上有很多其他的指南可以指導你實現這個目標。本指南是如何將你的WebRTC 網路應用程序轉換為PWA。

先決條件

要構建漸進式網路應用程序，你需要了解兩個關鍵概念：

Web App Manifest網路應用程序清單

Service Worker（服務工作線程）

以上是PWA之所以是PWA的兩項關鍵技術。此外，該頁面需要通過HTTPS提供服務（請注意，對於本地主機，這一要求是寬鬆的）。理想情況下，它也應該是高性能的，並能夠在各種屏幕尺寸和設備上良好地響應並工作。

性能

在為智能手機編寫網路應用程序時，你必須特別注意性能要求。儘管現在很多流行的設備比以往的筆記本電腦都要好，但這些設備會受到熱量的限制，並且任何性能瓶頸都會對你造成10倍的打擊。這就要求你在真實設備上進行測試 - 不要被設備模擬器和模擬器所迷惑。Chrome開發工具確實有很多旋鈕和撥號盤來模擬調節，但是它永遠都不像現實的手機那麼真實。

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

使用Chrome的開發工具來優化幀率

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

連接性差

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

代碼示例

現在，讓我們繼續看一些示例代碼，以幫助你入門。我假設你已經安裝了一個網路應用程序並準備好了。

Manifest（清單）

網路應用程序清單是你通常放在標記內的更為結構化的版本。這裡，你可以定義應用程序的名稱，圖標，主題顏色以及瀏覽器用於定義用戶體驗的一些其他的提示。下面，你將會看到一個相當簡單的清單示例。

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

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

display用於描述應用程序在啟動時的外觀。將其設置為「standalone」可以將所有瀏覽器鑲邊剝離，並使它看起來更像本機應用程序。默認設置是「browser」，即它將在設備的默認瀏覽器中打開。

icons是用於應用程序的一組圖標。操作系統會根據屏幕大小和像素大小來選擇與用戶設備最佳匹配的數據。

有關應用程序清單的更全面描述，請查看MDN的優秀文章MDN』s excellent article （https://developer.mozilla.org/en-US/docs/Web/Manifest）。

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

Service Worker-服務工作線程

Service Worker是PWA的第二個重要部分。簡而言之，服務工作線程是一個可編程的代理伺服器和緩存。它存在於自己的線程中，獨立於代碼執行和運行時環境中的其他網路應用程序，甚至可以在網頁未打開時運行代碼。這是你編寫緩存策略並設置推送通知的地方。

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

為了讓你的應用程序被Chrome分類為PWA，應用程序需要載入服務工作線程和某種離線功能。至少，你必須能夠在連接斷開時提供服務。

文件處理

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

務必注意，服務工作線程運行時生命周期與網路應用程序的其餘部分完全分離。安裝和更新生命周期也截然不同。通常，只要瀏覽器發現文件已更改，就會安裝新的服務工作線程。然而，生活並不總是這麼簡單。已經有很多的「殭屍」服務工作線程無限期的存活在那裡，並無限期地緩存陳舊過時的內容。如果你決定從頭開始自己創建一個服務工作線程，請考慮在裡面放入一個「終止-開關」 – 即服務工作線程完全取消無效緩存並重新安裝的一種方法。

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

推送通知

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

許可權

為了能夠將推送通知發送到用戶的手機上，你首先必須申請許可權。在頁面打開時立即請求推送通知的許可權通常被認為是不佳的形式。請確保用戶知道為什麼他們需要這些推送，並及時地向他們提供增值服務。另外值得注意的是，一旦用戶停止使用你的應用程序，並且不與你的通知進行交互，則該許可權最終將被撤銷。使得通知與用戶息息相關並且是具有價值的，才能獲得最大利益。阻止通知也很容易，所以最好不要指望被應用程序准許的通知能夠按預期設想一樣有效。

技巧和竅門

相機的方向

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

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

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

「適用性」

內聯關鍵事物

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

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

使用平台

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

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

Chrome開發者工具

Chrome開發者工具將是你的新起點，它是一款值得學習的、功能非常強大的工具。「性能」選項卡將顯示你的應用程序如何實時運行。請定期在你的開發者計算機和實際設備上查看此信息。我這裡強調Chrome Developer Tools，但絕不是讓你在其他瀏覽器中測試你的應用程序。

應用

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

「Add to homescreen（添加到主屏幕）」是一個有用的按鈕，它將觸發代碼的安裝路徑，並會在應用程序的某些部分不遵循PWA啟發式時通知你。另外，這裡也是測試和診斷服務工作線程的地方。

觀察PWA應用程序清單

審核

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

性能和內存

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

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

遠程調試

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

使用Chrome的遠程開發者工具在移動設備等遠程設備上運行開發控制台

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

PWA桌面版

最後，請記住，PWA不限於移動設備、智能手機使用。

為製作令人驚嘆的PWA所採取的大多數步驟，對於桌面應用程序來說也可能是有價值的。僅僅因為你坐在「合適的」電腦前，這是否就意味著你不需要快速地，即時的載入數據和享受高性能的用戶體驗？

即便如此，PWA工具箱正於今年緩慢進入桌面領域。它已經可以在功能標誌後的Chrome上進行測試。我已經在我的Macbook上運行了幾個星期，現在我很享受它帶來的功能優化體驗。

它與Electron應用程序價值主張非常相似，但與之不同的是你可以將Web應用程序發布到用戶桌面，而不用捆綁整個Chromium瀏覽器實例。同樣，這意味著不用數百兆位元組測量應用程序下載的大小，也可以將其縮小到幾百千位元組。另外，通過共享一個通用的瀏覽器引擎，與每個應用程序的專用Chromium實例相比，您將看到更小的內存佔用。

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

《FFmpeg從入門到放棄》

上海沙龍贏新書

FFmpeg被譽為多媒體開發的瑞士軍刀，「大師兄」劉歧、趙文傑、武愛敏三位老師花費三年打造業內首本《FFmpeg從入門到精通》，報名本周六上海沙龍就有機會拿到新書，現場還有展曉凱老師的《音視頻開發進階指南》，據說兩本一起學習效果加倍。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！