随着移动设备的普及，PWA（Progressive Web App）作为一种新型的 Web 应用程序形态，被越来越多的开发者所接受。然而，PWA 中 HTTPS 安全问题却是一个值得深入探究的话题。本文将分析 PWA 中 HTTPS 安全问题的原因，并给出解决方案。
HTTPS 安全问题的原因
PWA 中的 HTTPS 安全问题主要源于以下两个方面：
Service Worker 的安全限制
Service Worker 是 PWA 中的核心技术，它可以在后台运行，拦截网络请求并返回缓存数据，从而提高应用程序的性能和离线访问能力。然而，Service Worker 的安全限制也导致了 HTTPS 安全问题。Service Worker 只能在 HTTPS 协议下运行，这意味着如果你的 PWA 应用程序没有启用 HTTPS，那么 Service Worker 就无法正常工作，导致应用程序无法使用缓存数据和离线访问功能。
HTTPS 安全限制
PWA 应用程序是通过 Web App Manifest 和 Service Worker 来实现的。Web App Manifest 是一个 JSON 文件，它描述了应用程序的名称、图标、启动 URL 等元数据信息。而 Service Worker 则是一个 JavaScript 文件，它拦截网络请求并返回缓存数据。这两个文件都必须通过 HTTPS 协议进行传输，否则就会被浏览器拦截。这意味着如果你的 PWA 应用程序没有启用 HTTPS，那么 Web App Manifest 和 Service Worker 就无法正常加载，导致应用程序无法启动。
解决方案
为了解决 PWA 中的 HTTPS 安全问题，我们可以采取以下几种方案：
使用 HTTPS 协议
这是最简单的解决方案，只需要将你的 PWA 应用程序部署到支持 HTTPS 协议的服务器上即可。如果你使用的是云服务提供商，比如阿里云、腾讯云等，那么他们已经为你提供了免费的 SSL 证书，只需要在控制台中开启 HTTPS 即可。如果你使用的是自己的服务器，那么你需要购买 SSL 证书并进行配置。
使用 Cloudflare Workers
Cloudflare Workers 是 Cloudflare 提供的一项服务，它可以让你在 Cloudflare 网络中部署 JavaScript 代码，并在请求到达你的服务器之前对其进行处理。使用 Cloudflare Workers 可以使你的 PWA 应用程序在不使用 HTTPS 的情况下正常工作。具体做法是将你的 PWA 应用程序部署到 Cloudflare Workers 中，并使用 Cloudflare CDN 来加速你的应用程序。这样，即使你的服务器没有启用 HTTPS，也可以通过 Cloudflare Workers 来实现 HTTPS 安全传输。
使用 Firebase Hosting
Firebase Hosting 是 Google 提供的一项服务，它可以让你轻松地部署 Web 应用程序，并支持 HTTPS 安全传输。使用 Firebase Hosting 可以使你的 PWA 应用程序在不使用 HTTPS 的情况下正常工作。具体做法是将你的 PWA 应用程序部署到 Firebase Hosting 中，并使用 Firebase CDN 来加速你的应用程序。这样，即使你的服务器没有启用 HTTPS，也可以通过 Firebase Hosting 来实现 HTTPS 安全传输。
示例代码
以下是一个使用 Cloudflare Workers 实现 PWA 应用程序的示例代码：
-- -------------------- ---- ------- -- -- ------- ------ -------------------------------- --------------- - ---------------- -------------------------------------------- - ------ -------------- ---- -------------- -------------- ---------- --- -- -- --- -- ------------- ------------------------------ --------------- - ------------------ --------------------------------------------------- - ------ -------- -- --------------------- -- -- ---展开代码
以上代码使用了 Service Worker 技术来实现缓存数据和离线访问功能。如果你的 PWA 应用程序没有启用 HTTPS，那么 Service Worker 就无法正常工作。为了解决这个问题，你可以使用 Cloudflare Workers 来部署你的应用程序，并在请求到达你的服务器之前对其进行处理，从而实现 HTTPS 安全传输。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d52f1aa941bf71349931c3
