什么是 PWA？
PWA（Progressive Web App，渐进式网络应用）是一种可以像本地应用程序一样感觉和运行的 Web 应用程序。PWA 使用 Web 技术构建，能够离线运行、快速响应，具备类似于本地应用的体验。
PWA 的优点
- 可离线访问
- 快速响应
- 具有潜在的原生应用程序体验
- 跨平台支持
- 可以像应用一样在主屏幕上添加快捷方式
PWA 在 http 环境下的挑战
PWA 使用 Service Worker 技术来缓存数据并离线运行。Service Worker 是运行在 https 环境下的 JavaScript。因此，PWA 要在安全的 https 环境中运行。然而，在某些情况下，我们希望使用 PWA 在 http 环境中运行。这可能是因为某些设备上不支持 https，或者因为我们的应用程序只需要相对较低的安全性。
在这种情况下，我们需要在 PWA 中实现一个方式来在 http 环境下使用 Service Worker，同时又保证安全。
如何在 PWA 中实现运行在安全的 http 环境下？
我们可以使用 Secure Contexts 标准来解决这个问题。Secure Contexts 定义了一组安全要求，包括必须通过安全传输来传输用户数据、必须在安全上下文中加载 JavaScript 等。
当一个页面站点在 HTTP 下时，它不能使用 Service Worker 来缓存和离线数据，因为这在 HTTP 下是不安全的。但是，我们可以使用 iframe 技术来在 HTTPS 环境中加载并控制内容，从而安全地在 HTTP 页面中使用 Service Worker 技术。
下面是一个示例代码，它使用 iframe 来在 HTTPS 环境中加载 Service Worker，并控制 HTTP 页面，从而在安全的 https 环境中缓存和离线数据。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- ---------------------------- ------------------
----- --------------- ---------------------------- -----------------
--------- --- ---------------
--------
------------------ -- ---------- -
------------------------------------------------------------ ------- -----
---------------------------- -
-------------------------- --------------
--
---------------------- -
------------------------- --------- -------
---
-
---------
-------
------
---------- -----------
------- ---------------------------------- ------------------------------------------------------------------------ -------------------------- - ------------------
-------
-------在这个示例代码中，我们在 http 页面上引用一个 iframe，该 iframe 加载了一个 https PWA 文件。我们可以从 iframe 中加载 Service Worker，并在 http 页面上使用 Service Worker 缓存和离线数据。
总结
PWA 是一个非常有前景的 Web 应用程序开发技术。然而，在一些情况下，我们希望在 http 环境中使用 PWA，在这种情况下，我们可以使用 iframe 技术来安全地在 HTTPS 环境中加载 Service Worker，并缓存和离线数据。这种方法可以帮助我们解决 PWA 在 http 环境下的安全和技术挑战。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2c66048841e9894eee1a6