在新的Microsoft Edge中建構PWA

微軟從EdgeHTML渲染引擎到Edge的新版本中的 Chromium的轉換，使使用者可以更輕松地查找和安裝PWA（漸進式Web應用程式）。 導航到Edge中的Twitter或Spotify之類的PWA，它會在位址欄中顯示一個帶有+的小圓圈的圖示。 單擊此按鈕，Edge将安裝該站點的PWA版本，并将其添加到您的“開始”菜單中并支援脫機操作。

您不應将此與另一個Edge功能（将浏覽器頁籤添加到開始菜單并像在頁面上最少使用chrome的應用程式那樣使用）的功能混為一談。 這不是PWA，它更類似于Windows 8功能，可讓您将書簽添加到Windows工作列-最好将其添加為将喜歡的Web應用程式連結添加到Windows導航的一種方式。

[ 也在InfoWorld上：2020年探索的5種Microsoft開發人員工具和技術 ]

建立PWA

使用Edge建構的PWA是一流的Windows公民 。 它們像使用HTTPS來確定安全性的任何應用程式一樣進行安裝，并且可以通路Windows服務（例如通知）。 首先， 您必須為您的應用程式實作服務工作者，在PC上運作的代碼和Web應用程式之間提供代理。 他們處理事件并在必要時更新本地資産。 使用者啟動應用程式時，Edge會檢查Service Worker的新版本，以確定他們始終使用最新版本。 無需編寫代碼來管理更新。 這都是PWA經驗的一部分。

PWAbuilder之類的工具是入門 ，擷取URL并檢查使其成為PWA所需功能的有用方法 。 結果清單将幫助您開始轉換Web應用程式，而該服務将生成基本清單，并幫助您為應用程式選擇适當的服務工作者。 完成此操作并将代碼放在一起後，就可以測試PWA了。

在Edge中測試PWA

Edge的F12調試工具是建構和測試PWA流程的重要組成部分。 現在，它包括一個“應用程式”頁籤，您可以在其中探索組成PWA的元素，包括其清單，其服務工作者以及其對存儲和背景服務的使用。

即使已使用PWAbuilder或類似的服務來建構代碼，使用這些工具來調試PWA也是一個好主意。 深入研究F12工具，首先會看到PWA清單的内容。 這應該詳細說明該應用程式的名稱，其主題顔色（以便作業系統可以設定菜單欄）及其輸入URL。 清單視圖将顯示PWA随附的所有圖示，是以您可以檢查它們是否正确顯示。 不需要安裝PWA即可使用F12工具。 您可以在安裝之前在浏覽器中對其進行調試。 安裝後，您仍然可以通路F12，是以您可以調試和檢查目前正在運作的代碼。

F12工具顯示與目前頁面（托管應用程式JavaScript）關聯的活動服務人員。 單擊工作程式以檢視其源代碼并使用内置JavaScript調試器。 調試服務人員和任何其他JavaScript片段之間沒有什麼差別，是以可以使用相同的工具來探究代碼的工作方式以及代碼如何與應用程式中的HTML，CSS和其他JavaScript互動。

其他工具可讓您探索代碼如何使用存儲：本地鍵/值存儲，正在運作的代碼使用的任何會話存儲以及可用于儲存大量内容的持久性IndexedDB存儲的詳細資訊。 打算脫機運作的PWA将使用它們來緩存服務中的資料。 值得一提的是，其他PWA如何使用此存儲，以了解您的代碼應如何使用IndexedDB。 Microsoft的工具還支援WebSQL ，盡管隻有部分浏覽器支援此功能，并且實際上已由IndexedDB代替。

F12工具對IndexedDB的支援包括更改資料庫中内容的功能 ，是以您可以使用它來測試現有Web服務可能無法提供的内容。 将資産預加載到IndexedDB中可以幫助測試新功能，例如為您不想通過實時Web應用程式提供的媒體播放器或3D動畫提供示例内容。

Microsoft在F12開發人員工具中混合使用的Web應用程式工具非常适合測試和調試PWA。 深入JavaScript的相同工具可以與CSS和HTML一起使用，進而提供了一種有效的方法來檢視PWA在不同尺寸的螢幕上的行為以及它們如何響應網絡連接配接的變化。

将PWA與WebAssembly結合使用可現代化桌面應用程式

PWA在Windows應用程式的現代化中扮演着有趣的角色。 即将釋出的WinUI 3.0版本旨在将Windows UI元件與Windows SDK分開，并且在Uno WebAssembly .NET架構中受支援。 使用Windows 7版本的基于Chromium的Edge，可以選擇在WebAssembly上使用WinUI定位新的.NET 5應用程式。 這些由WebAssembly托管的.NET應用程式可以包裝為PWA，并安裝在Windows 7桌面上，使您較舊的硬體可以通路現代應用程式。

這使PWA成為了一個強大的工具，不僅可以確定跨平台（在macOS上，而且很快在Linux上），而且還可以確定代碼的向後相容性。 将WebAssembly與PWA結合起來是傳統安裝程式的一種有趣的替代方法，它使您可以即時更新代碼，并使其在所有裝置上的所有使用者立即可用，而無需新的安裝程式。 他們所需要的隻是一個活動的Internet連接配接，以下載下傳新的WebAssembly二進制檔案以及任何必需的資産。

使用PWA跨平台

遷移到基于Chromium的Edge應該可以更輕松地建構跨平台，跨浏覽器的PWA。 您的代碼應該能夠在Edge，Chrome，Firefox，甚至Safari上運作，進而在各處帶來相同的使用者體驗。 Microsoft正在努力使Edge成為PWA的首選平台，它提供了更簡便的方法來查找和安裝應用程式以及将它們內建到Windows平台服務中，而無需其他代碼。

如果您一直在考慮将Web應用程式轉換為PWA，那麼現在是開始的好時機。 使用新的Edge，您可以獲得一個不僅可以提供運作時環境，而且可以提供完整調試環境的工具。 借助Visual Studio Code中對Edge的某些調試工具的支援，您現在可以通路完整的端到端開發，測試和調試工具，這種組合可以簡化PWA開發。

From: https://www.infoworld.com/article/3535210/building-pwas-in-the-new-microsoft-edge.html