什么是 PWA？
PWA（Progressive Web App）是一种新型的 Web 应用程序模型，它结合了 Web 应用程序和原生应用程序的优点，可以提供类似原生应用程序的用户体验，同时又具有 Web 应用程序的便捷性和跨平台性。
PWA 可以离线访问，可以在主屏幕上创建图标，可以接收推送通知，可以访问本地设备功能等等。PWA 的核心技术包括 Service Worker、Web App Manifest 和 HTTPS。
PWA 中的 API 访问问题
PWA 中访问 API 的方式与传统的 Web 应用程序有所不同，它通常使用 Fetch API 或 XMLHttpRequest 对象来访问 API。但是，如果你的 PWA 在 HTTPS 下运行，而你的 API 不支持 HTTPS，那么你将会遇到一个问题：PWA 无法访问 API。
这是因为浏览器在 HTTPS 下运行时，只允许访问使用 HTTPS 协议的资源，而不允许访问使用 HTTP 协议的资源。这是浏览器的一项安全策略，旨在保护用户的隐私和安全。
解决方案
为了解决 PWA 中的 API 访问问题，我们需要将 API 升级为 HTTPS。这可以通过以下几个步骤来完成：
1. 获取 SSL 证书
要使用 HTTPS，你需要获取一个 SSL 证书。你可以从许多 SSL 证书提供商（如 Let's Encrypt）获取免费的 SSL 证书。你也可以购买商业 SSL 证书，这通常会提供更高的保护级别和更好的支持。
2. 配置服务器
一旦你获得了 SSL 证书，你需要将其安装在你的服务器上，并配置服务器以使用 HTTPS。这通常需要一些技术知识，但是许多托管提供商（如 Heroku）提供了易于使用的工具来帮助你完成这些步骤。
3. 更新 API URL
一旦你的 API 可以通过 HTTPS 访问，你需要更新 PWA 中使用的 API URL。你可以在代码中使用相对路径来访问 API，这将使你的代码更加灵活和可移植。例如：
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));这将使你的代码在使用 HTTPS 或 HTTP 时都能正常工作。
4. 更新 Service Worker
如果你的 PWA 使用了 Service Worker，你需要更新 Service Worker 的代码，以便它可以通过 HTTPS 访问 API。你可以在 Service Worker 中使用相对路径来访问 API，就像在你的代码中一样。例如：
// javascriptcn.com 代码示例
self.addEventListener('fetch', function(event) {
if (event.request.url.startsWith('/api/')) {
event.respondWith(
fetch(event.request)
.then(response => response)
.catch(error => new Response(JSON.stringify({ error: error })))
);
}
});这将使你的 Service Worker 在使用 HTTPS 或 HTTP 时都能正常工作。
总结
PWA 是一种新型的 Web 应用程序模型，它结合了 Web 应用程序和原生应用程序的优点。PWA 中访问 API 的方式与传统的 Web 应用程序有所不同，它通常使用 Fetch API 或 XMLHttpRequest 对象来访问 API。如果你的 PWA 在 HTTPS 下运行，而你的 API 不支持 HTTPS，那么你将会遇到一个问题：PWA 无法访问 API。为了解决这个问题，你需要将 API 升级为 HTTPS，并更新 PWA 中使用的 API URL 和 Service Worker。这将使你的 PWA 在使用 HTTPS 或 HTTP 时都能正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650bfd3095b1f8cacd60fda5