PWA（Progressive Web App）是一种新兴的 Web 应用程序类型，可以让 Web 应用程序在移动设备上表现得像原生应用程序一样。PWA 使用新的 Web 技术（如 Service Worker 和 Web App Manifest），可以在离线状态下提供基本功能、快速加载和交互性。在最近的几年里，PWA 在前端领域受到了越来越广泛的关注。
然而，有些用户们在将 PWA 添加到主屏幕后，会遇到黑屏闪退的问题。这个问题会让用户们感到非常不爽，同时也会影响到 PWA 的使用率。针对这个问题，本文将介绍一些解决方法，帮助开发者们更好地构建 PWA。
问题分析
当 PWA 添加到主屏幕后，用户点击图标打开应用程序时，应用程序会突然黑屏然后闪退，这是因为添加到主屏幕的 PWA 必须使用全屏模式运行。如果你的 PWA 中缺少必需的代码或配置，就会发生黑屏问题。
根据问题分析，我们可以得出两个解决问题的步骤：
- 确定问题原因
- 解决问题
确定问题原因
我们可以通过以下步骤，确定问题原因：
1. 在开发者工具中跟踪错误
在移动设备上打开应用程序，使用 Chrome 开发者工具（或其他的开发者工具）进行调试。如果有错误发生，就会在 Console 日志中呈现出来。这时候应该检查 Console 日志中的错误消息，根据错误消息定位问题。
2. 检查 Web App Manifest
PWA 应该具备 Web App Manifest，它是一种 JSON 文件，包含了应用程序的元数据。Web App Manifest 描述了应用程序的名称、图标、主题颜色、启动 URL 等信息。如果 Web App Manifest 中的信息有误，会导致应用程序无法正常启动。检查 Manifest 文件，确保其中的信息与应用程序本身是一致的。
3. 检查 Service Worker 缓存
Service Worker 是 PWA 的核心技术之一，用于离线缓存和提供离线功能。Service Worker 缓存的内容应该与应用程序一致。如果缓存的内容与应用程序不一致，则会发生错误，导致应用程序无法正常启动。检查 Service Worker 缓存，确保其中的内容与应用程序本身是一致的。
解决问题
根据问题原因，我们可以分别采取以下措施来解决问题：
解决问题 1：在开发者工具中跟踪错误
首先，在移动设备上打开应用程序，使用 Chrome 开发者工具（或其他的开发者工具）进行调试。如果有错误发生，就会在 Console 日志中呈现出来。根据错误消息定位问题，并详细研究代码，进行修复。
以下是一种基础的示例（数据来源于 https://jsonplaceholder.typicode.com/posts）：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -------------------------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
------ -- -- -
----- --------- - -------------------------------------
----- ---- - ----- ------------
------------------- - ----------- ------ ---- -- -- -
---- -------------
-----------------
--------------
------
------------
-----在这个示例代码中，我们发现 fetch 请求的 URL 中，多输入了一个 "s" 字符。这个 TYPO 肯定会导致请求错误，从而在黑屏闪退时产生一个错误的错误消息。我们可以通过删除多余的字符来修复这个 TYPO，代码就会正常运行。
解决问题 2：检查 Web App Manifest
在检查 Web App Manifest 时，检查以下元数据：
- 名称：确保名称正确并且与应用程序本身一致。
- 图标：确保图标的文件名和路径正确（路径可以是相对路径或绝对路径）。
- 启动 URL：确保 URL 是应该打开的 URL，并且与应用程序本身一致。
- 必要字段：确保 Manifest 文件中的必需字段存在并正确。
以下是一个基本的 Manifest 示例：
-- -------------------- ---- -------
-
------- --- -----
------------- --- -----
-------- --
------ --------------------------
-------- ----------
------- -----------
---
------------ --------------
---------- -------------
-------------- ---------
-如果 Manifest 文件存在问题，我们需要找到问题所在并进行修复。
解决问题 3：检查 Service Worker 缓存
在检查 Service Worker 缓存时，需要检查以下内容：
- 缓存的 URL：确保 Service Worker 缓存的 URL 与应用程序本身一致。
- 缓存的资源类型：确保缓存的资源类型与应用程序本身一致。
- 缓存的版本：确保缓存的版本与应用程序本身一致。
以下是一个基本的 Service Worker 示例：
-- -------------------- ---- -------
----- ---------- - ------------------
----- -------------- - -
----
--------------
------------------
--------------
------------------------
-------------------------
--
-------------------------------- - -- -
------------
-----------------------
----------- -- -----------------------------
--
---
------------------------------ - -- -
--------------
-----------------------
-------------- -- -
-- ---------- -
------ --------
-
------ -----------------
--
--
---
--------------------------------- - -- -
------------
-------------
---------------- -- ------------
--------------------------- -- --------- --- -----------
-------------- -- -------------------------
--
--
---这个 Service Worker 示例使用了一个缓存版本号，如果版本需要更新，只需更改缓存版本号即可。
总结
PWA 是一个很有前途的 Web 应用程序类型，但它与传统的 Web 应用程序有很大不同，可能会产生一些新问题。在本文中，我们聚焦于一个比较常见的问题：PWA 添加到主屏幕后黑屏闪退。我们解释了可能的原因，并提供了相应的解决方法。希望本文能帮助开发者们更好地构建 PWA。
对于初学者来说，可以通过学习基础的技术（如 Service Worker 和 Web App Manifest）和通过实践构建属于自己的 PWA，从而深入理解 PWA 的工作原理和应用场景。同时，也要时刻关注 PWA 技术的最新动态和趋势，不断改进和完善自己的 PWA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475b9ee968c7c53b02bc04e