WebRTC面臨的最大挑戰之一是跨平臺提供一致、可靠的支持。對于大多數應用程序，尤其是那些在網(wǎng)絡(luò )上啟動(dòng)的應用程序，這通常意味著(zhù)除了支持網(wǎng)絡(luò )應用程序之外，還需要開(kāi)發(fā)原生或混合移動(dòng)應用程序。漸進(jìn)式網(wǎng)絡(luò )應用程序（PWA）是一種新概念，它能夠通過(guò)允許基于網(wǎng)絡(luò )的應用程序在不引入中間混合框架的情況下，看起來(lái)并像本地移動(dòng)應用那樣運作，從而將實(shí)現應用程序在網(wǎng)絡(luò )上統一。正如將要討論的那樣，這種方法優(yōu)點(diǎn)頗多，但它對WebRTC應用程序確實(shí)是有意義的嗎？
使你的WebRTC應用程序像PWA一樣
什么是PWA
簡(jiǎn)而言之，漸進(jìn)式網(wǎng)絡(luò )應用程序（簡(jiǎn)稱(chēng)PWA）是一種帶有一些額外功能的Web應用程序，是一種編寫(xiě)Web應用程序的新方式，它為你提供了一些操作系統通常不具備的“抓手”。WPA本身不是一個(gè)產(chǎn)品，至少它跟你口中所說(shuō)的“安卓應用程序”不一樣。這些技術(shù)集合使得網(wǎng)頁(yè)看起來(lái)，在體驗和操作方面更像是本機安裝的應用程序。
“P”代表“漸進(jìn)式增強”。首先，它初聽(tīng)起來(lái)感覺(jué)很奇怪，這意味著(zhù)應用程序的功能集隨著(zhù)用戶(hù)的使用而逐漸得以擴展。其次，這也意味著(zhù)你不能真正依賴(lài)于應用程序正常運行的功能。相反，你需要逐步增強基于用戶(hù)手機和操作系統功能的應用程序。由于它們使用的是幕后漸進(jìn)式增強的方式，所以很可能你已經(jīng)在使用PWA卻不得知。
什么讓PWA如此強大？
首先，就WebRTC而言，PWA可通過(guò)瀏覽器在任何地方工作，畢竟它們只是網(wǎng)頁(yè)，用戶(hù)無(wú)需下載任何東西。
其次，PWA可以大大減少應用程序的大小。由于你不需要嵌入瀏覽器，大多數運行時(shí)代碼已經(jīng)安裝在客戶(hù)端上。這意味著(zhù)最小的WebRTC應用程序的大小可以用KB來(lái)衡量，甚至包括UI庫。appear.in的PWA版本大小就只有200KB。而React和相關(guān)的庫就占用了3/4的文件大小，接下來(lái)我們可能會(huì )做更多工作來(lái)進(jìn)一步減少這類(lèi)文件的大小。
Twitter的本地應用程序與PWA大小比較。來(lái)源：
https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY
第三，PWA讓你依賴(lài)于瀏覽器的安全性。對網(wǎng)絡(luò )瀏覽器安全性的看法——我仍然相信谷歌、Mozilla、微軟和蘋(píng)果這樣的大型團隊能夠快速解決安全問(wèn)題，也不愿意相信其他應用程序開(kāi)發(fā)人員也會(huì )做的同樣出色。
PWA安裝
只要智能手機具有網(wǎng)頁(yè)瀏覽器，就可以將網(wǎng)頁(yè)添加到手機的主屏幕，這是用戶(hù)在第一臺iPhone上向手機添加新應用程序的唯一方法。自那時(shí)以來(lái)，這種很少使用的功能得以不斷發(fā)展，現已變得不再只是一個(gè)簡(jiǎn)單的書(shū)簽。
當一個(gè)網(wǎng)絡(luò )應用程序滿(mǎn)足一定數量的啟發(fā)式算法時(shí)，瀏覽器會(huì )注意到，并開(kāi)始推薦用戶(hù)將該網(wǎng)絡(luò )應用程序“安裝”為PWA。這種安裝增銷(xiāo)與瀏覽器到瀏覽器的差別很大-例如Chrome會(huì )顯示一個(gè)彈出窗口，三星互聯(lián)網(wǎng)會(huì )有一個(gè)用戶(hù)可以點(diǎn)擊的明顯標志。這就為用戶(hù)提供了一個(gè)提示，即這不僅僅只是個(gè)文檔，而是一個(gè)完整的網(wǎng)絡(luò )應用程序。
Google的示例PWA顯示了向主屏幕添加鏈接的選項 –https://github.com/googlearchive/voice-memos
常見(jiàn)的誤解
關(guān)于PWA的一些討論我已經(jīng)一次又一次地駁回，但仍然值得在這里重申一下。
1.不僅僅應用于A(yíng)ndroid系統
雖然目前可能在A(yíng)ndroid上效果最好，但它們也可以在其他操作系統上工作。Chrome操作系統就是一個(gè)二者良好集成的地方。PWA都只是一些“普通”的網(wǎng)絡(luò )應用程序，且一些額外的裝飾的東西。只要有瀏覽器能夠查看它們，它們就應該可以工作。
2.不僅僅事關(guān)谷歌
Mozilla、三星互聯(lián)網(wǎng)和微軟都對PWA API的開(kāi)發(fā)投入了大量資金。此外，微軟已宣布，他們將開(kāi)始在Windows Store中列出PWA應用程序。iOS的支持也在進(jìn)行之中，盡管它還沒(méi)有完全完成，但每個(gè)發(fā)行版都會(huì )越來(lái)越好。
3.不僅僅應用智能手機終端
雖然目前手機的支持情況更好，但Chrome團隊已宣布2018年是他們將PWA帶入桌面的一年。
入門(mén)
開(kāi)發(fā)PWA非常簡(jiǎn)單，最難的部分是讓W(xué)ebRTC啟動(dòng)并運行。我接下里將繼續介紹并假設你已經(jīng)完成了該任務(wù)的網(wǎng)絡(luò )部分并準備好了一個(gè)正在運行的應用程序。如果沒(méi)有，那么在這個(gè)網(wǎng)站上有很多其他的指南可以指導你實(shí)現這個(gè)目標。本指南是如何將你的WebRTC 網(wǎng)絡(luò )應用程序轉換為PWA。
先決條件
要構建漸進(jìn)式網(wǎng)絡(luò )應用程序，你需要了解兩個(gè)關(guān)鍵概念：
- Web App Manifest網(wǎng)絡(luò )應用程序清單
- Service Worker（服務(wù)工作線(xiàn)程）
以上是PWA之所以是PWA的兩項關(guān)鍵技術(shù)。此外，該頁(yè)面需要通過(guò)HTTPS提供服務(wù)（請注意，對于本地主機，這一要求是寬松的）。理想情況下，它也應該是高性能的，并能夠在各種屏幕尺寸和設備上良好地響應并工作。
性能
在為智能手機編寫(xiě)網(wǎng)絡(luò )應用程序時(shí)，你必須特別注意性能要求。盡管現在很多流行的設備比以往的筆記本電腦都要好，但這些設備會(huì )受到熱量的限制，并且任何性能瓶頸都會(huì )對你造成10倍的打擊。這就要求你在真實(shí)設備上進(jìn)行測試 - 不要被設備仿真器和模擬器所迷惑。Chrome開(kāi)發(fā)工具確實(shí)有很多旋鈕和撥號盤(pán)來(lái)模擬調節，但是它永遠都不像現實(shí)的手機那么真實(shí)。
WebRTC是一項資源密集型技術(shù)，對用戶(hù)的硬件要求很高，因此你需要特別注意這一點(diǎn)。了解Chrome開(kāi)發(fā)工具中的性能面板，并盡量減少不必要的重繪。
使用Chrome的開(kāi)發(fā)工具來(lái)優(yōu)化幀率
對于那些使用React來(lái)創(chuàng )建PWA的開(kāi)發(fā)者的一句忠告：虛擬DOM算法非常熱衷于在UI更新中刪除和重新添加視頻幀，從而造成巨大的性能瓶頸。所以要格外的小心，并避免此類(lèi)情況的發(fā)生。幸運的是，這些重繪十分扎眼，特別是在測試真實(shí)設備上的站點(diǎn)時(shí)。
連接性差
由于PWA的使用主要是移動(dòng)設備，因此你應該考慮到網(wǎng)絡(luò )覆蓋范圍的變化。盡管WebRTC實(shí)際上不能脫機工作，但可能需要添加基本的離線(xiàn)支持。你的目標是提供類(lèi)似于本地的體驗，因此你應該盡量獲取一些離線(xiàn)用戶(hù)的體驗。通過(guò)這種方式，你可以更好的向用戶(hù)提供提示和信息，并向他們說(shuō)明可以采取哪些措施來(lái)解決相應的問(wèn)題。例如，當你的手機沒(méi)有可用的網(wǎng)絡(luò )連接時(shí)，本地Skype應用程序不顯示過(guò)時(shí)落后的信息。如果你可以從設備的緩存中加載該應用程序，則加載時(shí)間會(huì )快得多。請注意，如若要根據Chrome將你的應用歸類(lèi)為PWA，你需要提供一些基本的離線(xiàn)功能。
代碼示例
現在，讓我們繼續看一些示例代碼，以幫助你入門(mén)。我假設你已經(jīng)安裝了一個(gè)網(wǎng)絡(luò )應用程序并準備好了。
Manifest（清單）
網(wǎng)絡(luò )應用程序清單是你通常放在
標記內的更為結構化的版本。這里，你可以定義應用程序的名稱(chēng)，圖標，主題顏色以及瀏覽器用于定義用戶(hù)體驗的一些其他的提示。下面，你將會(huì )看到一個(gè)相當簡(jiǎn)單的清單示例。
毫無(wú)疑問(wèn)，name是用于啟動(dòng)畫(huà)面和主屏幕的應用程序名稱(chēng)。當應用程序的全名太長(cháng)而無(wú)法全部顯示時(shí)，可選的short_name將會(huì )顯示在手機的主屏幕上。 background_color用于屏幕背景顏色設置。
start_url描述應用程序在打開(kāi)時(shí)應該啟動(dòng)的URL。通常設置為。或/。這意味著(zhù)用戶(hù)可以進(jìn)一步瀏覽路徑，并且仍然將“主”頁(yè)面添加到主屏幕。這與“普通”書(shū)簽的工作方式不同，即你在書(shū)簽上的任何頁(yè)面URL都是你獲得的URL。即使用戶(hù)從一篇文章中添加它，也允許CNN PWA始終從根路經(jīng)開(kāi)始加載。例如，如果用戶(hù)在安裝PWA時(shí)訪(fǎng)問(wèn)https://cnn.com/article/all-is-well-with-the-world.html，它仍會(huì )加載https://cnn.com。小竅門(mén)是在URL的末尾添加？openedFromHomescreen來(lái)跟蹤使用情況。
display用于描述應用程序在啟動(dòng)時(shí)的外觀(guān)。將其設置為“standalone”可以將所有瀏覽器鑲邊剝離，并使它看起來(lái)更像本機應用程序。默認設置是“browser”，即它將在設備的默認瀏覽器中打開(kāi)。
icons是用于應用程序的一組圖標。操作系統會(huì )根據屏幕大小和像素大小來(lái)選擇與用戶(hù)設備最佳匹配的數據。
有關(guān)應用程序清單的更全面描述，請查看MDN的優(yōu)秀文章MDN’s excellent article （https://developer.mozilla.org/en-US/docs/Web/Manifest）。
為了幫助你自動(dòng)配置，我推薦該網(wǎng)站https://tomitm.github.io/appmanifest/。
Service Worker-服務(wù)工作線(xiàn)程
Service Worker是PWA的第二個(gè)重要部分。簡(jiǎn)而言之，服務(wù)工作線(xiàn)程是一個(gè)可編程的代理服務(wù)器和緩存。它存在于自己的線(xiàn)程中，獨立于代碼執行和運行時(shí)環(huán)境中的其他網(wǎng)絡(luò )應用程序，甚至可以在網(wǎng)頁(yè)未打開(kāi)時(shí)運行代碼。這是你編寫(xiě)緩存策略并設置推送通知的地方。
關(guān)于如何編寫(xiě)服務(wù)工作線(xiàn)程有很多的資源，所以在此我不會(huì )詳細介紹它是如何工作的，或者如何編寫(xiě)。你可以在MDN更詳細地閱讀并參考學(xué)習。如果你不想自己編寫(xiě)，Google的Workbox工具箱是管理服務(wù)工作線(xiàn)程的一個(gè)很好的庫。它具有高度的可配置性，并且可以消除很多自己從頭開(kāi)始創(chuàng )建時(shí)的疑難和令人頭痛的問(wèn)題。
為了讓你的應用程序被Chrome分類(lèi)為PWA，應用程序需要加載服務(wù)工作線(xiàn)程和某種脫機功能。至少，你必須能夠在連接斷開(kāi)時(shí)提供服務(wù)。
文件處理
需要特別注意的一點(diǎn)是，服務(wù)工作線(xiàn)程文件的位置非常重要。服務(wù)工作線(xiàn)程只能緩存它所在的同一文件夾中的或者是子文件夾下的資源。為了獲得最大的緩存能力，我建議盡可能地將其放置在根目錄中。
務(wù)必注意，服務(wù)工作線(xiàn)程運行時(shí)生命周期與網(wǎng)絡(luò )應用程序的其余部分完全分離。安裝和更新生命周期也截然不同。通常，只要瀏覽器發(fā)現文件已更改，就會(huì )安裝新的服務(wù)工作線(xiàn)程。然而，生活并不總是這么簡(jiǎn)單。已經(jīng)有很多的“僵尸”服務(wù)工作線(xiàn)程無(wú)限期的存活在那里，并無(wú)限期地緩存陳舊過(guò)時(shí)的內容。如果你決定從頭開(kāi)始自己創(chuàng )建一個(gè)服務(wù)工作線(xiàn)程，請考慮在里面放入一個(gè)“終止-開(kāi)關(guān)” – 即服務(wù)工作線(xiàn)程完全取消無(wú)效緩存并重新安裝的一種方法。
另一點(diǎn)也非常重要-不要像對待其他資源一樣，使用哈希策略來(lái)使其失效并進(jìn)行替換。上面所提到的Workbox庫已經(jīng)建立了解決這個(gè)問(wèn)題的方式，并確保在應用程序更改時(shí)重新生成有有效緩存。
推送通知
我也特別想提一提推送通知。尤其是對于WebRTC應用程序，推送通知是將人們吸引到對話(huà)中的強大方式，因此我建議你花時(shí)間來(lái)完善它們。Peter Beverloo已創(chuàng )建了一個(gè)用于測試推送通知功能的強大工具。我強烈推薦你試一試。該網(wǎng)站可以讓你進(jìn)行試驗并找出哪些功能適用于哪種設備和哪種瀏覽器。
權限
為了能夠將推送通知發(fā)送到用戶(hù)的手機上，你首先必須申請權限。在頁(yè)面打開(kāi)時(shí)立即請求推送通知的權限通常被認為是不佳的形式。請確保用戶(hù)知道為什么他們需要這些推送，并及時(shí)地向他們提供增值服務(wù)。另外值得注意的是，一旦用戶(hù)停止使用你的應用程序，并且不與你的通知進(jìn)行交互，則該權限最終將被撤銷(xiāo)。使得通知與用戶(hù)息息相關(guān)并且是具有價(jià)值的，才能獲得最大利益。阻止通知也很容易，所以最好不要指望被應用程序準許的通知能夠按預期設想一樣有效。
技巧和竅門(mén)
相機的方向
在手機上使用WebRTC時(shí)，你需要特別注意相機的方向。臺式電腦通常只提供單個(gè)相機流，只要使用getUserMedia，它就會(huì )理所當然地默認為內置攝像頭或為操作系統中的任何默認設置。
完全不同的是，在開(kāi)發(fā)WebRTC智能手機客戶(hù)端時(shí)，你必須考慮大部分的手機都是具有兩個(gè)攝像頭的。getUserMedia API允許你請求一個(gè)首選攝像頭，因此確保用戶(hù)使用前置攝像頭。如果不是，它就很可能會(huì )默認為后置攝像頭。另開(kāi)發(fā)者更傷腦筋的是，手機可能會(huì )快速翻轉，故而你應該建立能夠適時(shí)更改攝像頭的功能。但是由于你需要為新數據流提供RTC連接，因此在傳輸過(guò)程中更改相機可能有點(diǎn)棘手。
如果你不想解決該問(wèn)題，另一個(gè)方法是進(jìn)入預呼叫設置頁(yè)面，你可以在那里更改相機的方向。
“適用性”
內聯(lián)關(guān)鍵事物
為了避免應用程序加載時(shí)出現閃爍的白框，你應該內聯(lián)重要資產(chǎn)。如果你的應用具有背景顏色的設置，請考慮將其添加到
或標記中，以使其能夠立即加載。其次，你應該關(guān)注應用程序殼模模型。簡(jiǎn)而言之：定義應用程序加載到內部的核心外殼，且這個(gè)外殼應該盡可能的輕薄。第三，觀(guān)察你是否可以識別一組最關(guān)鍵的樣式表規則并將它們進(jìn)行內聯(lián)。你也可以使用rel =“preload”來(lái)獲取關(guān)鍵資產(chǎn)。
想加載更快？查看離線(xiàn)緩存來(lái)獲得即時(shí)加載時(shí)間以進(jìn)行回訪(fǎng)。
使用平臺
為了進(jìn)一步提高應用程序的適用性，一定要充分利用平臺的功能。在一些瀏覽器上，你可以使用頁(yè)面上的按鈕生成本機共享對話(huà)框，通過(guò)它來(lái)邀請用戶(hù)參加電話(huà)會(huì )議。
這樣的API有很多，所以你可以花點(diǎn)時(shí)間了解正在開(kāi)發(fā)的一些新的API，并考慮如何實(shí)現它們。并可使用功能檢測來(lái)確保功能的實(shí)際可用。顯然，千萬(wàn)不要依賴(lài)于你支持的平臺上所沒(méi)有的功能。
Chrome開(kāi)發(fā)者工具
Chrome開(kāi)發(fā)者工具將是你的新起點(diǎn)，它是一款值得學(xué)習的、功能非常強大的工具。“性能”選項卡將顯示你的應用程序如何實(shí)時(shí)運行。請定期在你的開(kāi)發(fā)者計算機和實(shí)際設備上查看此信息。我這里強調Chrome Developer Tools，但絕不是讓你在其他瀏覽器中測試你的應用程序。
應用
應用程序選項卡是一個(gè)你可以在其中找到制作應用程序的部分概述的地方。它會(huì )讀取你的應用程序清單，并為缺少的或不工作的部分提供提示和線(xiàn)索。
“Add to homescreen（添加到主屏幕）”是一個(gè)有用的按鈕，它將觸發(fā)代碼的安裝路徑，并會(huì )在應用程序的某些部分不遵循PWA啟發(fā)式時(shí)通知你。另外，這里也是測試和診斷服務(wù)工作線(xiàn)程的地方。
觀(guān)察PWA應用程序清單
審核
在“審核”標簽中，你可以訪(fǎng)問(wèn)谷歌的Lighthouse。Lighthouse是一個(gè)功能強大的工具，你可以應用它來(lái)對應用程序執行自動(dòng)化性能和PWA啟發(fā)式評估。運行此項則將根據您的應用程序在各種標準上的應用程度，在0到100之間進(jìn)行評分。同時(shí)，它還將提供指導并幫助你改善評估分數。隨著(zhù)未來(lái)Chrome更新的啟發(fā)式轉變和發(fā)展，在你無(wú)需執行任何操作的情況下，你的分數就可能會(huì )發(fā)生變化。出于這個(gè)原因，請確保定期運行此測試。此工具也可作為CLI使用，你可以將其插入Continuous Integration（CI），并通知你回歸。有關(guān)Lighthouse的更多信息，請參閱Google的文檔。
性能和內存
此項對于診斷應用程序的性能和識別瓶頸非常有用。如果你在筆記本電腦上遇到問(wèn)題，那么該問(wèn)題在受熱能限制的智能手機上則愈加嚴重。更重要的是，如果你的應用程序總是以60幀/秒的速度運行，則默認在智能手機上不會(huì )出現同類(lèi)情況。
這使我了解了Chrome瀏覽器中最重要的工具——遠程調試。
遠程調試
該選項在Developer Tools中是不可用的，但來(lái)自于chrome://inspect/#devices。從這里你可以設置遠程調試，以針對真實(shí)設備運行Chrome Developer Tools。我曾提到需要在實(shí)際設備上進(jìn)行測試。這是一個(gè)非常強大的工具，它可以幫助你診斷筆記本上肉眼所看不到的問(wèn)題。想獲取有關(guān)如何設置和使用它的更全面的指南，請參閱https://developers.google.com/web/tools/chrome-devtools/remote-debugging/。
使用Chrome的遠程開(kāi)發(fā)者工具在移動(dòng)設備等遠程設備上運行開(kāi)發(fā)控制臺
你甚至可以通過(guò)手機實(shí)時(shí)檢查視圖。
PWA桌面版
最后，請記住，PWA不限于移動(dòng)設備、智能手機使用。
為制作令人驚嘆的PWA所采取的大多數步驟，對于桌面應用程序來(lái)說(shuō)也可能是有價(jià)值的。僅僅因為你坐在“合適的”電腦前，這是否就意味著(zhù)你不需要快速地，即時(shí)的加載數據和享受高性能的用戶(hù)體驗？
即便如此，PWA工具箱正于今年緩慢進(jìn)入桌面領(lǐng)域。它已經(jīng)可以在功能標志后的Chrome上進(jìn)行測試。我已經(jīng)在我的Macbook上運行了幾個(gè)星期，現在我很享受它帶來(lái)的功能優(yōu)化體驗。
它與Electron應用程序價(jià)值主張非常相似，但與之不同的是你可以將Web應用程序發(fā)布到用戶(hù)桌面，而不用捆綁整個(gè)Chromium瀏覽器實(shí)例。同樣，這意味著(zhù)不用數百兆字節測量應用程序下載的大小，也可以將其縮小到幾百千字節。另外，通過(guò)共享一個(gè)通用的瀏覽器引擎，與每個(gè)應用程序的專(zhuān)用Chromium實(shí)例相比，您將看到更小的內存占用。
顯示appear.in如何在安裝時(shí)看起來(lái)像在臺式計算機上運行。該圖標來(lái)自鏈接的清單。在MacOS上，應用程序顯示在Dock中，并可以使用Spotlight打開(kāi)-就像其他任何應用程序一樣。
《FFmpeg從入門(mén)到放棄》
上海沙龍贏(yíng)新書(shū)
FFmpeg被譽(yù)為多媒體開(kāi)發(fā)的瑞士軍刀，“大師兄”劉歧、趙文杰、武愛(ài)敏三位老師花費三年打造業(yè)內首本《FFmpeg從入門(mén)到精通》，報名本周六上海沙龍就有機會(huì )拿到新書(shū)，現場(chǎng)還有展曉凱老師的《音視頻開(kāi)發(fā)進(jìn)階指南》，據說(shuō)兩本一起學(xué)習效果加倍。
