什么是 PWA？
PWA（Progressive Web App）是指逐步增强的 Web 应用程序，可以像本地应用程序一样在移动设备和计算机上运行。PWA 最大的优点在于它脱离了应用商店的依赖，并且可以让用户在浏览器中像本地应用一样使用它。
PWA 开发调试技巧
在 PWA 的开发过程中，调试是一个必不可少的环节。接下来，我们将介绍一些 PWA 开发调试的最佳实践。
1. 开启 ServiceWorker 的调试模式
在 PWA 中，ServiceWorker 能够让访问过的资源被离线缓存下来，从而让用户在网络不佳的情况下也能访问到应用程序。在开发过程中，ServiceWorker 可能会出现各种问题，为了调试这些问题，我们可以将 ServiceWorker 开启调试模式：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', {
scope: '/',
debug: true
});
}当 ServiceWorker 调试模式开启时，我们可以在 Chrome 的 DevTool 中的 Application 面板找到 ServiceWorker，然后接下来的调试就跟普通的 JavaScript 文件一样了。
2. 模拟离线环境来测试页面
能够在离线环境下正常工作是 PWA 的一个最大优点，在开发过程中，我们可以使用 Chrome 的 DevTool 来模拟离线环境。我们可以在 DevTools 中找到 Network 面板，然后在 Offline 标签页下模拟离线环境。
3. 使用 webpack-dev-server 的 HMR
在 PWA 开发过程中，我们经常需要在多个浏览器窗口中同时查看应用，例如在移动设备和桌面浏览器之间进行切换。在这种情况下，webpack-dev-server 有一个很好的特性叫做 HMR（Hot Module Replacement），它可以做到无需页面刷新即可进行热替换。
开启 HMR 需要在启动 webpack-dev-server 的时候传入 --hot 参数：
webpack-dev-server --hot
4. 在移动设备上调试 PWA
在 PWA 开发过程中，我们需要在移动设备和桌面浏览器之间进行切换来查看应用在不同分辨率下的效果。在移动设备上进行调试往往会比在桌面浏览器上进行调试更加直观，所以我们需要一些工具来帮助我们在移动设备上进行调试。
例如，weinre 是一个在线调试器，它可以让开发者在 PC 上操作移动设备。使用 weinre 可以通过在 html 文件中添加一个 script 标签即可完成设置：
-- -------------------- ---- ------- --------- ----- ----- --------- - ------ ----- ---------------- ------------- ----------------- ------- ------------------------------------------------------------------------------- ------- ------ ------- -------
5. 灵活运用 Chrome DevTools
Chrome DevTools 是调试 PWA 不可缺少的工具之一，它提供了很多有用的功能，例如：
- 调试 ServiceWorker
- 离线缓存
- 网络波浪线图
- stack trace
- 快捷键
我们需要灵活运用这些工具来提高调试效率。
结论
PWA 是一个很棒的开发技术，但是在开发过程中，我们需要有一些调试技巧来帮助我们解决一些常见的问题。这篇文章介绍了一些常见的 PWA 开发调试技巧，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676cf6d782fcee791c6269a4