背景
PWA（Progressive Web App）作为一种新型的 Web 应用，具有许多优势，比如可以离线访问、响应速度快、交互体验好等。但是，一些 Web 开发者在使用 PWA 开发 Web 应用时，常常会遇到 iframe 不支持的问题。
在 PWA 中，由于采用了 Service Worker 技术，它只能管理主线程的请求，因此 iframe 中的内容是无法被 Service Worker 管理的，这也就导致了 iframe 在 PWA 中无法正常使用的问题。
解决方案
针对上述问题，我们提供以下两种解决方案：
方案一：在 iframe 刷新时使用 SW 做中转
在 PWA 中，我们可以通过使用 SW（Service Worker）来实现 iframe 内容的中转。
具体做法是：在 iframe 中嵌入一个 SW，当 iframe 中的页面需要被刷新时，由 SW 来进行中转。在该机制下，SW 需要将页面请求转发到当前 PWA 实例的主线程中，由主线程中的 SW 管理请求和响应，最后再将响应结果返回给子 iframe。
示例代码如下：
-- ---------
------------- --- -------------
-- ---- ------- ------ --- ------ ---
--------------------------------------------------- ------- -- -
-- ------ --- ------------
--------------------------
----- -----------
------- ----- -- -----------
---
---
-- - --- -------
------------------------------------------------
----- ----------
---- ----- -- -----------
---
--- -----
-- -- ------ --------- --- ---
-------------------------------- ------- -- -
------------------ --- -----------
-------------------------------- -- -
-- ---------- ------
--------------------------
----- -----------
------- ---
---
-------------- -- -
-- ------------ ------
--------------------------
----- -----------
------ ---
---
---
-
---方案二：使用 Web Worker 做跨域请求
在 PWA 中，我们也可以使用 Web Worker 进行跨域请求，利用 Web Worker 的特性，使其独立于主线程，不受 Service Worker 的管理。
具体做法是：在 iframe 中使用 Web Worker 发送请求，然后在 PWA 的主线程中使用 Service Worker 进行响应拦截和缓存处理。
示例代码如下：
-- ---------
------------- --- -------------
----- ------ - --- --------------------
--------------------------
---------------- - ------- -- -
-------------------- ------- ---------- ------------
--
--- ---------
-------------- - ------- -- -
---------------------------- -- -
-- ---------- --- ---
------------------
------- ---
---
-------------- -- -
-- ------------ --- ---
------------------
------ ---
---
---
---- -----
-- -- ------ -------
------------------------------ ------- -- -
----------------------------------------
------------------
------------------------------- -- -
-- --------
------ ----
-------------- -- -
---------------------- --------- -----
------ --- ----------------- ---------
--
--
-
---结论
以上两种方案都能很好地解决 iframe 在 PWA 中不支持的问题。如果您的 Web 应用中需要使用 iframe，可以根据具体需求选择相应的方案。
我们也可以通过 PWA 提供的其他特性，比如 Service Worker 管理缓存、Web Worker 执行 JS 计算等，来为 Web 应用带来更多的优势和改进。
学习与指导意义
本文针对 PWA 中常见的 iframe 不支持问题，提供了两种不同的解决方案，对于对 PWA 有兴趣的 Web 开发者来说，具有一定的学习和指导意义。
本文所提供的方案，都可以借鉴和运用到其他 Web 应用当中，具有很好的推广和应用前景。同时，本文所提供的示例代码也能够为 Web 开发者提供参考和借鉴，加快开发效率，提升开发技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670fab035f55128102668215