如何处理 PWA 应用在安卓上无法更新的问题
逐渐流行的 PWA 应用带来了许多好处，例如使 Web 应用程序更快、更可靠，可以以离线模式运行，提供了接近原生体验的快速响应速度，但是有一个常见的问题是——当使用 PWA 应用的用户将其安装到 Android 设备上时，PWA 应用可能无法自动更新。在本文中，我们将介绍可能会导致此问题的原因及如何解决它。
原因
PWA 应用在 Android 设备上无法自动更新的原因是，一旦用户安装了 PWA 应用，该应用的代码和资源就存储在设备的缓存中，因此，如果应用程序更新，则必须让用户手动删除该应用程序并重新安装更新版本，否则，即使 PWA 应用已经发布了新版本，用户也将无法自动更新应用程序。
解决方案
当然，Google 意识到了这个问题，因此他们提供了一种解决方案——通过在 PWA 应用程序的 manifest.json 中添加相关参数，通知 Android 设备在应用程序更新时自动刷新缓存并获取最新版本的应用程序。
具体来说，您需要在 PWA 应用程序的 manifest.json 文件中添加以下选项：
---------------- - ----------- ----- -
这个选项告诉浏览器在更新 PWA 应用程序时，不要保留缓存，以便请求并获取最新的应用程序版本。
示例代码
让我们来看一下如何在一个简单的 PWA 应用中使用这个选项。以下示例基于 create-react-app。
- 在项目根目录下创建一个 manifest.json 文件，包含以下内容：
-
------- --- --- -----
------------- ---------
------------ ----
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
------ -----------
-------- ----------
------- -----------
-
--
---------------- -
----------- -----
-
-上面的 manifest.json 文件包含必要的 meta 数据以及使用我们此时关心的 servieworker.preserve 选项。
- 在 项目中，打开 /src/index.js 文件并添加以下一行：
------------------------ --------- -------------- -- - ---------------------------------- ----- -------------- --- ------------------------- - ---
这行代码负责在注册 Service Worker 的时候，添加 onUpdate 回调，并在 Service Worker 版本更新时重载页面。
- 打开 /src/service-worker.js 并添加以下一行：
-------------------------------- ------- -- -
-- ----------- -- --------------- --- --------------- -
-------------------
-
---这会在 Service Worker 接收到类型为 SKIP_WAITING 的消息时，跳过等待并立即激活最新的 Service Worker。
现在，当 PWA 应用程序发布新版本时，Android 设备将自动更新缓存，并获取最新版本的应用程序，而不需要用户手动删除并重新安装应用程序。
总结
解决 PWA 应用程序在 Android 设备上无法自动更新的问题的关键是在 PWA 应用程序的 manifest.json 文件中添加相关选项，以便通知 Android 设备更新应用程序时刷新缓存，并获取最新的应用程序版本。由于 Service Worker 是 PWA 应用程序的核心技术之一，因此上述解决方法基于 Service Worker 的 API 实现。同样，也可以使用其他 PWA 架构实现此功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f5d0daf6b2d6eab3e9ca5c