如何使用浏览器工具调试PWA

如何使用浏览器开发工具调试 PWA（Progressive Web Apps）

本教程说明了Chrome和Firefox的开发工具展示了什么样的工具，用于帮助用户调试PWA。

什么是PWA

首先，一个PWA是一个根据设备的支持情况，提供了额外特性的应用，比如：

• 离线工作能力
• 推送通知
• 几乎原生应用的展现和速度
• 资源的本地和缓存

但是PWA并不能在不支持最新技术的设备上像正常网站那样工作。

Chrome开发者工具概览

我们从Chrome开始。打开开发者工具，你会看到很多面板。你可能比较熟悉其中的一些面板，比如控制台（Console）、元素面板（Elements）、网络（Network），因为你在构建网站和网络应用程序的时候天天都在用。

应用程序面板（Application）是不久前加的，包含了很多熟悉的工具。在2016年夏天时，资源面板（Resources）被重命名为应用程序面板（Application）。这个面板把所有Web应用程序区别于Web网页的特点都集合在一起。稍后，我们将详细解释。

一个实际的例子

本教程完整的探索了一个PWA，这个PWA可以这里获得。你打开Chrome，严格按照我们的步骤走，不用在本地建立其他任何的东西。

模拟设备

首先设置Chrome开发者工具的『设备模拟』。这样你就可以在浏览器中模拟一个设备了。我们选择Android设备，因为最新的PWA只有在Android上才能完全展示出它的潜力。对iOS和Safari桌面版的支持者来说，Safari将要开始支持Service Workers，似乎是朝着正确的方向前进了一步。

详细的应用程序面板

应用程序面板包含了很多PWA的元素。

清单（Manifest）

清单让用户可以选择把应用『添加到主屏幕』。清单提供了很多应用被安装到到设备该如何表现的细节说明。任何的错误定义清单将会报告问题。

清单中可以看到应用的名字（首屏上的简短名字），图表预览，以及一些展现的细节。

• 启动地址：当用户从主屏首屏上启动Web应用是，设备要加载的地址。您可以添加一个活动标识符来区分统计分析中的PWA。
• 主题颜色：指示你网站的主题。Chrome使用这个主题颜色来着色浏览器的一些UI部分，比如地址栏。可以使用meta标签来自定义每个页面的颜色，但是当应用从主屏启动时，在清单中指定的主题颜色提供站点范围的主题颜色。

上图为使用主题颜色选项来改变浏览器UI颜色的例子

• 背景颜色：在清单中指定Web应用程序的背景颜色，这使得浏览器在CSS不可用之前的加载过程可以展示背景颜色。这为用户带来更好的体验。一旦CSS可用，该值将被实际的Web应用程序样式覆盖。
• 方向（Orientation）：指定默认的方向，可选值包括「any」、「natural」、「landscape」、「portrait」和其他在「屏幕方向API工作草案」中详细介绍的选项。
• 展示：定了应用程序如何呈现。有效值包括「fullscreen」（打开应用时全屏展示）、「standalone」（显示设备标准的状态栏和系统返回按钮）、「minimal-ui」(只有返回、前进、重新加载按钮)和「browser」（包括地址栏正常的浏览器UI）。

在清单面板顶部，点击「manifest.json」链接，将会打开源码面板，包括了清单的所有代码。

「manifest.json」代码例子

清单允许定义许多其他的字段，建议直接看「Web应用清单工作草案」了解更多。

最后，也是非常重要的，就是添加到首屏链接。在桌面Chrome上，它会触发浏览器将应用添加到货架（shelf）。 在移动设备上，它提示安装应用程序（将图标添加到主屏幕）:

Service Workers

列表中的下一个是『Service Workers』选项卡。Service Workers技术使得PWA可以离线工作，同时允许您拦截网络请求并使用Cache API在本地存储资源。

通过此屏幕，您可以通过启用选项卡中离线复选框来强制离线模式：

强制离线模式，反映在应用程序中。

在设备模式屏幕下，离线也是强制的，除网络节流。

重新加载更新：当调试时，这个非常有用。Service Workers首次加载时会将其安装在设备上。 在Service Workers代码更改之前，它们不会更新，因此它们不像常规资源。

但是，即使您更新Service Workers，直到旧的Service Workers可以被删除为止，也就网页也不会使用 - 也就是说，直到用户关闭指向网络应用程序的所有选项卡。 此复选框才强制更新。

绕过网络可以完全关闭Service Worker启用的缓存。 当您希望从网络直接访问时，这会阻止应用程序使用缓存的资源。调试时也非常有用。

显示所有是一个选项，可以快速访问所有安装在设备上Service Worker。

每个Service Worker都有一个状态指示器，您可以停止并重新启动。 通过单击文件名，您可以使用内置的JavaScript调试器检查源代码并将其挂接到其中：

您最有可能使用的是Service Worker生命周期事件模拟。 您可以强制触发以下事件：

• Update 将强制更新Service Worker
• Push 模拟一个推送事件
• Sync 模拟后台同步事件，这允许用户脱机执行操作，服务器上线后，再与服务器通信。
• Unregister 取消注册Service Worker, 以便用户可以一个干净的状态启动。

清除存储

清除存储选项卡显示您的Web应用程序使用的总存储大小，剩余的存储空间，并允许您选择要清除的存储空间。

存储

存储选项卡包含与通常存储选项（如本地/会话存储，IndexedDB和Cookies）进行交互的工具。 对于Service Worker来说存储并不是唯一的，所以我不会在这里详细介绍。

缓存

忽略应用程序缓存选项卡 - 这是一种不推荐的技术 - 缓存存储选项卡是Service Worker的关键。 它使用Cache API（Service Workers规范的一部分）显示存储的资源内容。 Service Worker使用缓存没有限制。

通过Google Chrome缓存存储演示项目可以更清楚看到具发生了什么，当把内容添加到缓存时。

首先，先不使用缓存。

按住创建WNDT62缓存按钮触发缓存的创建：

然后通过WNDT62中的创建 RESOURCE_A，添加一项内容到缓存。

按住 更新RESOURCE_A增加主体内容大小，这个可以通过以下代码查看：

caches.open('WNDT62').then(function(cache) {
  return cache.match('RESOURCE_A').then((res) => {
    res.text().then(body => console.log(body));
  })
})

每次你按更新RESOURCE_A时，返回值都会增加。

按住删除WNDT62来删除缓存，释放资源所使用的空间，并把应用的状态重置为初始状态。

当加载Service Workers使用Cache API缓存的资源时，DevTools的网络面板显示为来自Service Workers的：

Firefox如何？

Firefox对PWA以及Service Workers有很大的支持。 但是，它的开发者工具不会像Chrome开发工具那样显示出来。 Firefox可以在“工具”> “Web开发人员”>“Sevice Worker”菜单下找到。

从这里您可以取消注册任何Service Worker，并在调试器中为任何类型的工作线程（也包括Web Workers）打开线程代码。 您还可以触发Push API push 事件来调试Push事件。

您无法模拟事件或强制更新或绕过Service Workers，如Chrome。 我希望，在Firefox这很快将变成可能，以便有更容易的测试体验。

像Chrome一样，当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时，在Transferred列下列出了『Service Worker』：

整体来说

PWA是使移动Web变得更好的一个转折点，并为用户提供了原生应用程序之外的良好体验。

浏览器，尤其是Chrome，可以为他们提供很好的工具。

Google还提供Lighthouse作为其浏览器工具的一部分，可以在Chrome DevTools中单独安装。 它提供自动检查，以确保您的Web应用程序是最佳构建的，并且包括对Service Worker的支持。 一个非常有用的工具，千万不要错过。

如果你喜欢这篇文章，请给我一些鼓掌，让更多的人看到它。 谢谢！

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。