近年来，随着 PWA 的兴起，越来越多的网站开始使用 PWA 技术来提供更好的用户体验。然而，在 Safari 浏览器上运行 PWA 时，用户可能会遇到一些问题。本文将介绍 Safari 浏览器上 PWA 的适配问题及解决方式。
问题描述
在 Safari 浏览器上运行 PWA 时，用户可能会在以下方面遇到问题：
1. 无法添加到主屏幕
Safari 浏览器可能无法正确识别 web app manifest 文件中的图标，因而无法将网站添加到主屏幕。
2. Service Worker 无法正常工作
Safari 浏览器的 Service Worker 支持程度较低，不支持 push notification 和 background sync 等功能。
3. 缓存文件受限
Safari 浏览器对于缓存文件有一定的限制，最大缓存文件大小为 50MB，超出限制时会自动清理缓存文件。
解决方式
针对上述问题，我们可以采取以下解决方式：
1. 添加到主屏幕
如果 Safari 浏览器无法正确识别 web app manifest 文件中的图标，可以尝试在 manifest 文件中加入以下代码：
-- -------------------- ---- -------
-
-------- -
-
------ --------------------
-------- ----------
------- -----------
-
--
---------- ------------
-其中，“display”属性可以指定在桌面上显示的方式，可以是 “fullscreen”、“standalone”、“minimal-ui” 或 “browser”。
2. Service Worker 正常工作
针对 Safari 浏览器不支持 push notification 和 background sync 等功能，我们可以在 Service Worker 中添加以下代码：
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request).catch(function() {
return caches.match(event.request);
}));
});此代码会在网络请求失败时，尝试从缓存中读取资源。这样即使 push notification 和 background sync 等功能不被支持，页面依然可以从离线缓存中获取资源。
3. 缓存文件受限
针对 Safari 浏览器对于缓存文件有一定的限制，我们可以使用 IndexedDB 来存储较大的文件。
-- -------------------- ---- -------
--- --------- - ----------------- -- ------------------- -
-------------------------------------
---
----------------------------
------------------------ -
------ ----------------
--
-------------------- -
------ --------------------------- -
--- -- - ----------------------- -------------
--------------------------------- -----------
------ ------------
---
---
--------------------------- -
------ ------------------------------------------------------------
--
-------------------- -
--- --- - --------------------------
--- --- - ------------------------------
------- - ----
-------------------------------
---以上代码会将从服务器获取的较大的文件存储到 IndexedDB 中，然后从 IndexedDB 中读取文件，并通过 URL.createObjectURL() 方法将 blob 转换为 URL，从而正常显示在页面中。
总结
本文介绍了 Safari 浏览器上 PWA 的适配问题及解决方式，涉及到添加到主屏幕、Service Worker 工作和缓存文件受限等方面。针对不同的问题，我们可以采取不同的解决方式来提高 PWA 在 Safari 上的可用性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ae326badd4f0e0ff7c0232