PWA (Progressive Web App) 已经成为现代 Web App 开发的重要方式，它不仅可以让网站更像原生应用，还可以提供离线、推送等功能，同时也能更好地促进网站的性能和用户体验。其中，添加 PWA 到主屏幕上方便用户打开网站，也是 PWA 的常用功能。但是在使用 PWA 添加到主屏幕时，有时候会出现打开后自动闪退的问题，本文将介绍如何解决这个问题。
问题原因
PWA 添加到主屏幕的时候，默认会使用 Safari、Chrome 等浏览器内置的 Web App 模板生成桌面应用。这些模板通常会创建一个启动画面和一个图标，以便用户能够更好地识别和访问 App。但是，由于网络原因或其它原因，这些模板可能无法加载或者被阻塞，就会导致应用程序打开时立即崩溃或闪退。
解决方法
解决 PWA 添加到主屏幕上的闪退问题有以下几种方法。
1. 确认启动画面和图标是否正确
由于添加到主屏幕的 Web App 会使用内置的模板生成启动画面和图标，所以我们需要确认这些模板是否正确加载以及格式是否正确。在这里，我们强烈建议使用符合 W3C 标准的格式。
以下是一个 web app manifest 文件的例子，其中包含了与 PWA 关联的图标和启动画面的定义：
-- -------------------- ---- -------
-
------- --- -----
------------- ------
------------ --------------
-------- -
-
------ --------------
-------- --------
------- -----------
--
-
------ ---------------
-------- ----------
------- -----------
--
-
------ ---------------
-------- ----------
------- -----------
-
--
------------------- ----------
-------------- ----------
---------- ------------
-可以看到，我们需要指定各个尺寸的图标以及启动画面，并且指定其格式、大小、类型等信息。在确认了这些信息的正确性后，就可以尝试重新添加 PWA 到主屏幕并测试是否仍然会闪退。
2. 处理未捕获异常
打开 PWA 时可能会导致崩溃的另一个原因是未捕获的 JavaScript 异常。这些异常在浏览器内使用时可能不会体现出来，但是当将 PWA 添加到主屏幕并启动时，就会导致崩溃。
要防止这种情况，可以将错误处理添加到应用程序代码中，以捕获可能导致崩溃的异常。
以下是一个使用 try-catch 代码块来捕获可能的异常的例子：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
------ -----
-
-通过使用 try-catch 代码块，我们可以在发生异常时及时处理它们，并进行适当的日志记录和错误报告。这将有助于我们构建更健壮的 PWA。
3. 缓存数据和资源
PWA 可以通过 Service Worker 技术将数据和资源缓存到本地，以便在离线时也能正常使用。这不仅可以减少网络请求和提高性能，还可以在网络不太稳定或者中断时保持应用程序的可用性。
以下是一个使用 Service Worker 来缓存数据的例子：
-- -------------------- ---- -------
----- ---------- - -----------
----- ----------- - --------------- -------------- -----------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---通过这个 Service Worker，我们可以将一些常用的资源缓存到本地，并在访问这些资源时优先使用本地缓存，以减少网络请求。这将显著提升应用程序的性能和用户体验，同时还能降低闪退的概率。
总结
PWA 的添加到主屏幕功能可以让用户更加方便地访问网站，但是在使用过程中，可能会遇到闪退的问题，本文介绍了解决这个问题的三种方法：确认启动画面和图标是否正确、处理未捕获异常、缓存数据和资源。通过这些方法，我们可以构建更健壮、更可靠的 PWA，并为用户带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b11cf848841e9894d71c98