pwa中fetch拦截_在新的Microsoft Edge中构建PWA

pwa中fetch拦截

Microsoft 在新版本的Edge中 从EdgeHTML呈现引擎切换到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会检查服务工作者的新版本，以确保他们始终使用最新版本。 无需编写代码来管理更新。 这都是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开发。

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

pwa中fetch拦截