PWA（Progressive Web Apps，渐进式网络应用）是一种新兴的Web应用，它能提供与原生移动应用类似的用户体验，并且不需要通过应用商店进行安装，同时还可以实现离线缓存、消息推送等功能。在移动互联网时代，PWA技术的发展很快。
然而，PWA技术的普及程度还不够，因为它仍然有一些问题需要解决。其中最重要的问题是在iOS设备的Safari浏览器上，一旦用户将PWA应用添加到主屏幕并通过主屏幕启动，应用就会闪退。因此，本文将解决这个问题，指导读者如何使用PWA技术，以及如何在iOS设备上解决闪退问题。
PWA 技术详解
1. Web App Manifest
Web App Manifest是一个JSON文件，它描述了一个PWA应用的信息、名称、图标、主色调、主页URL、启动模式等。这个文件可以让Web应用更像是一个原生应用，因为它允许我们将应用添加到设备主屏幕，并且启动应用时会隐藏浏览器的地址栏和工具栏，同时还可以通过改变主色调等方式来使应用更像是原生应用。
Web App Manifest 示例代码：
-- -------------------- ---- -------
-
------- -------------
-------- -
-
------ -------------------------------
------- ------------
-------- -------
--
-
------ ---------------------------------
------- ------------
-------- ---------
--
-
------ ---------------------------------
------- ------------
-------- ---------
-
--
------------ --------------
---------- -------------
------------------- ----------
-------- ---
-2. Service Worker
Service Worker是PWA应用的核心技术，它是一个运行在浏览器后台的脚本，可以缓存应用的资源，并在网络离线时提供访问缓存数据的能力。它还可以拦截网络请求，实现对网络请求的自定义处理，例如资源缓存等。
Service Worker 示例代码：
-- -------------------- ---- -------
-- -- ------- --
-------------------------------- ------- -- -
----------------
----------------------------------------- -- -
------ --------------
--------------
-------------
-------------
------------------
---
--
--
---
-- -- ----- --
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---3. Web Push
Web Push是一种推送通知技术，它可以使PWA应用在用户离线时从服务器获得新的信息，并在收到新消息时立即向用户推送通知。Web Push的实现依赖于Service Worker，因为它需要通过Service Worker来处理接收到的消息，并将通知显示给用户。
实现Web Push需要配置VAPID（Voluntary Application Server Identification）私钥和公钥，这些钥匙可以使服务器知道发送消息的源头，并确定消息来自于可信的服务器。同时，也需要提交应用的服务工作线程到推送服务的服务器，并在应用首次使用时询问用户是否要接收推送通知。
Web Push 示例代码：
-- -------------------- ---- -------
-- -- ----- -------------
----- -------------------- - ------
-- -- ------- ------
------------------------------------------------------------------------- -- -
-- - ------- ------ -------
------ ------------------------------------
---------------- -----
--------------------- --------------------
---
---------------------- -- -
-- -----------
-- -- ------- ------ --------
--------------------------------------------------- ------- -- -
-- --------
----- ------- - -----------
-- ------
--- --------------------------- -
----- -------------
----- ------------
---
---
---如何解决 App Store 安装后闪退问题？
在iOS设备上，如果用户将PWA应用添加到主屏幕并通过主屏幕启动，应用就会闪退。这是因为Safari浏览器在启动应用时会将应用的URL打包成一个.app文件，并将它保存到设备本地。在保存这个文件时，Safari会将一些必要的文件缓存在本地，而这些缓存文件有可能会被误删除。当用户通过主屏幕启动应用时，Safari会检查本地缓存文件，如果缺失了必要的文件，就会闪退。
解决这个问题的方法是在Service Worker的install事件中，使用Cache Storage API对PWA应用中的所有资源进行缓存，以避免缺失必要的文件。
Service Worker的install方法中，可以使用cache.addAll方法来缓存所有URL：
-- -------------------- ---- -------
-------------------------------- ------- -- -
----------------
----------------------------------------- -- -
------ --------------
--------------
-------------
-------------
------------------
---
--
--
---在这个例子中，我们将缓存应用的HTML、CSS、JavaScript等资源。
当我们使用Cache Storage API将所有PWA应用中的资源缓存后，就可以解决在iOS设备上PWA应用闪退问题了。
总结
本文详细介绍了PWA（Progressive Web Apps）技术，并解决了在iOS设备上PWA应用闪退的问题。PWA技术可以为Web应用带来类似于原生应用的用户体验，并提供离线缓存、消息推送等多种功能。通过使用Web App Manifest、Service Worker和Web Push等技术，我们可以使Web应用更像原生应用，并为用户带来更好的浏览体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653097b87d4982a6eb2233d3