前言
PWA（Progressive Web App）是一种使用现代 Web 功能来提供应用程序类似体验的 Web 应用程序。PWA 在现代浏览器中得到了很好的支持，但是在 Safari 中却存在一些兼容性问题。本文将介绍如何在 PWA 中解决 Safari 浏览器的兼容性问题。
兼容性问题
在 Safari 中，如果我们以桌面模式打开 PWA 应用程序，这时候刷新页面会导致所有 Service Worker 被注销。这是因为 Safari 浏览器在刷新页面时会直接移除 Service Worker，为了解决这个问题，我们可以在 Service Worker 中使用“fetch”事件来缓存我们的资源。
示例代码：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---解决方案
解决 Safari 浏览器中的 Service Worker 的兼容性问题，我们可以使用以下解决方案：
1. 使用 'caches' API
在 Safari 浏览器中，不能使用 'indexedDB' 及 'localStorage' API 存储缓存。使用 'caches' API会是一个不错的选择。
-- -------------------- ---- -------
--------
-----------------------
--------------------- -
------------------ ----------
---
--------
--------------------------------------------- -
-- ---------- -
------ ---------
-
---------
------ -------------------------------------------- -
-- ---------------- --- ---- -
------ --- ---------------- --------- ---------------- ---------------
-
------ ---------
---
---2. 使用 'fetch' API
在 Safari 浏览器中，使用 'fetch' API能帮助我们更好地控制请求和响应。
-- -------------------- ---- -------
-------------------------------------- -
------
-------------------------------------------- -
------------------ ------------------
------------------- ----
------
------ ---------
------------------- -
---------
------ --------------------------------------------- -
-- ---------- -
------ ---------
-
------ --- ---------------- --------- ---------------- ---------------
---
---3. 使用 'event.waitUntil' API
Safari 浏览器在 'fetch' 事件中需要等待之前的 Service Worker 脚本完成才能激活新版 Service Worker 脚本，因此需要使用 'event.waitUntil' 来保证新脚本能够正确注册。
-- -------------------- ---- -------
------------------------------ --------------- -
----------------
--------------------------------------------------- -
------ -------- -- -------------------------------------------- -
-------------------------------------------- -
------------------------ ------------------
------------------- ----
---
--
--
---总结
本文介绍了如何在 PWA 中兼容 Safari 浏览器。通过使用 'caches'、'fetch' 和 'event.waitUntil' API 来解决 Safari 浏览器中的 Service Worker 兼容性问题。通过这些方法，我们可以保证 PWA 应用程序在 Safari 中的正常使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649514d248841e989425dc4e