什么是 PWA （渐进式 Web 应用程序）？
PWA 是一种使用现代 Web 技术创建的 Web 应用程序，它提供了原生应用程序的体验，包括离线支持、桌面通知、本地缓存等。PWA 不需要通过应用商店安装，用户可以通过 Web 浏览器直接访问。
PWA 的调试
在开发 PWA 应用程序时，无法像传统 Web 应用程序那样调试。因为在 PWA 应用程序中，数据通常存储在本地缓存中，应用程序状态随时可能发生变化。因此，开发者必须使用与传统 Web 应用程序不同的方式进行调试。
调试工具
在调试 PWA 应用程序时，我们需要使用 Chrome 浏览器的开发者工具。如果您尚未安装 Chrome 浏览器，请访问 Google Chrome 官网 下载安装。
打开您的 PWA 应用程序并按 F12 打开开发者工具。选择 Application 标签，您将看到 Service Workers、Cache、IndexedDB 和 LocalStorage。这些选项卡为您提供了与 Web 应用程序相关的调试信息。
实时重新加载
在 PWA 应用程序中，您不必每次更改代码后都要重新启动您的服务器。由于实时重新加载技术的出现，您可以在更改代码后自动重新加载应用程序，您只需在开发者工具中启用文件监听功能，你的应用程序将自动重新加载并在您进行任何更改后保持最新状态。
在 Chrome 开发者工具的 Sources 标签的左侧面板中，选择 Filesystem，然后选择Add folder to workspace （添加目录到工作区），将您的 PWA 应用程序目录添加到工作区中。在左侧面板中找到您的文件，右键单击文件并选择 Map to Network Resource，以将本地文件映射到 Web URL。
开启实时重新加载，您只需在开发者工具中启用 Device Toolbar（设备工具栏），选择您想要 emulate（仿真） 的设备，并尝试更改你的应用程序的样式或功能。
示例代码
-- --------
----- -------- ----------- -
-- ----------
----- ----- - ----- ------------------------
----- --- - ----- -------------------------
-- ----- -
-- -------------
----- ---- - ----- -----------
------ -----
- ---- -
-- ----------------
----- -------- - ----- -------------------
----- ---- - ----- ----------------
----- ---------------------- --- --------------------------------
------ -----
-
-这段代码是一个从缓存中获取数据的示例。在此示例中，我们首先尝试从缓存中获取数据。如果找到缓存数据，则返回它。如果没有找到缓存，则发送网络请求并将响应存储在缓存中。这段代码说明了如何使用 Service Worker 程序缓存和 IndexedDB 存储数据。
-- ------ --- ----
---------------------------------------------- ------- -- -
-----------------------
----- ------------- - ------------------------------------------
--------------------------------------- ----- -- -- -
---------------
----- ------------ - ----- -----------------
-- --------------------- --- ----------- -
----------------- -------- --- ---- ---------
- ---- -
----------------- --------- --- ---- ---------
-
---
-------------------- - ------
---这段代码是一个 PWA 应用程序的安装提示示例。在此示例中，我们监听 beforeinstallprompt 事件，并提示用户是否安装 PWA 应用程序。如果用户点击 “安装” 按钮，则向用户显示添加到主屏幕的提示。这段代码说明了如何使用 beforeinstallprompt 事件和 userChoice 属性与用户进行交互。
结论
在本地调试 PWA 应用程序是开发过程中最重要的步骤之一。通过使用 Chrome 开发者工具，您可以查看和更改缓存和应用程序状态。在您的开发流程中使用实时重新加载可以更快速地进行 PWA 应用程序开发。此外，示例代码也帮助您了解如何使用 Service Worker 程序和其他 Web 技术来构建 PWA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6718a79cad1e889fe22d2436