背景
PWA（Progressive Web App）是一种新型的 Web 应用程序，它能够提供类似原生应用程序的体验，具有离线访问、推送通知、快速加载等特点。但是，在 Safari 中打开 PWA 应用程序时，有时会遇到空白页面的问题，这给用户带来了不便。
原因
Safari 对于 PWA 的支持不如其他浏览器那么完善，其中一个主要的原因是 Safari 不支持 Service Worker。Service Worker 是 PWA 中的一个重要组成部分，它能够在后台执行任务，从而实现离线访问、推送通知等功能。由于 Safari 不支持 Service Worker，因此在 Safari 中打开 PWA 应用程序时，就会出现空白页面的问题。
解决方案
为了解决在 Safari 中打开 PWA 应用程序时出现空白页面的问题，我们可以采取以下两种解决方案：
方案一：使用 Polyfill
Polyfill 是一种 JavaScript 库，它能够在不支持某些特性的浏览器中模拟这些特性，从而让应用程序能够在这些浏览器中正常工作。我们可以使用一个名为 serviceworker-webpack-plugin 的 Polyfill，它能够在 Safari 中模拟 Service Worker，从而解决空白页面的问题。
以下是一个示例代码：
-- -------------------- ---- -------
----- -------------------------- - ----------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
------ --------------
--------- --------
----------- ---
--
-
--方案二：使用 Workbox
Workbox 是一种 Google 推出的 PWA 开发框架，它能够自动生成 Service Worker 代码，从而实现离线访问、推送通知等功能。在 Safari 中，我们可以使用 Workbox 来生成一个名为 sw.js 的文件，然后在 HTML 文件中引用该文件，从而解决空白页面的问题。
以下是一个示例代码：
-- -------------------- ---- ------- ----------------------------------------------------------------------------------------- ------------------------------ ----------- -- ------------------- --- --------- --- --------------------------------- -- ------------------------------ ----------- -- ------------------- --- -------- --- ----------------------------------------- -- ------------------------------ ----------- -- ------------------- --- ----------- --- --------------------------------- --
总结
在 Safari 中打开 PWA 应用程序时出现空白页面的问题，是由于 Safari 不支持 Service Worker 导致的。为了解决这个问题，我们可以使用 Polyfill 或者 Workbox 来模拟 Service Worker。使用 Polyfill 的方法比较简单，但是需要手动管理 Service Worker 代码；使用 Workbox 的方法比较复杂，但是能够自动生成 Service Worker 代码，从而减少开发难度。无论采用哪种方法，都需要在 HTML 文件中引用 Service Worker 文件，从而让应用程序能够在 Safari 中正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66125bf3d10417a2222fc7eb