如何使用浏览器工具调试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应用程序使用的总存储大小,剩余的存储空间,并允许您选择要清除的存储空间。

存储

存储选项卡包含与通常存储选项(如本地/会话存储IndexedDBCookies)进行交互的工具。 对于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的支持。 一个非常有用的工具,千万不要错过。

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


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



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

原文发布于微信公众号 - 京程一灯(jingchengyideng)

原文发表时间:2017-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券