什么是 PWA 应用？
PWA（Progressive Web App）是一种新型的 Web 应用程序，它可以像原生应用程序一样运行在用户的设备上，同时具有 Web 应用程序的优点，例如跨平台、无需下载安装、可更新性等。PWA 应用可以通过 Web 技术实现离线缓存、推送通知、添加到主屏幕等功能，使得用户可以在离线情况下访问应用程序，并且具有更好的用户体验。
在开发 PWA 应用时，我们通常需要在本地进行测试。在传统的 Web 应用中，我们可以通过 localhost 来访问本地的 Web 服务器进行测试。但是，在 PWA 应用中，我们需要使用 HTTPS 协议来进行访问，否则浏览器会提示安全警告。那么，如何在 PWA 应用中使用 localhost 进行测试呢？
1. 使用自签名证书
我们可以使用自签名证书来模拟 HTTPS 环境。自签名证书是由我们自己生成的证书，由于不受任何权威机构的信任，因此在浏览器中会提示安全警告。不过，我们可以在开发环境中使用自签名证书来进行测试。
生成自签名证书
我们可以使用 OpenSSL 工具来生成自签名证书。在命令行中执行以下命令：
openssl req -x509 -newkey rsa:2048 -nodes -keyout localhost.key -out localhost.crt -days 365 -subj "/CN=localhost"
这个命令会生成一个名为 localhost.key 的私钥文件和一个名为 localhost.crt 的证书文件。
配置本地 Web 服务器
我们需要将生成的私钥文件和证书文件配置到本地 Web 服务器中。以 Node.js 的 http-server 为例，我们可以在启动 Web 服务器时指定证书文件和私钥文件：
http-server -S -C localhost.crt -K localhost.key
这个命令会启动一个 HTTPS 服务器，可以在 https://localhost:8080 地址访问。
在 PWA 应用中使用 localhost 进行测试
在 PWA 应用中，我们需要在 service worker 中注册一个 fetch 事件，用于处理网络请求。我们可以在 fetch 事件中使用 fetch API 发送网络请求，这时浏览器会发现我们使用的是自签名证书，会提示安全警告。我们可以通过在 fetch 调用中添加 {mode: 'no-cors'} 选项来绕过安全检查：
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request, {mode: 'no-cors'})
);
});这样，在 PWA 应用中使用 localhost 进行测试就可以了。
2. 使用 ngrok 工具
ngrok 是一个免费的反向代理工具，可以将本地的 Web 服务器暴露到公网上，从而可以通过 HTTPS 协议进行访问。使用 ngrok 可以避免使用自签名证书的麻烦，同时还可以在多个设备上进行测试。
安装 ngrok
我们可以在 ngrok 的官网 https://ngrok.com/ 上下载 ngrok 的安装包，解压后将 ngrok 可执行文件添加到系统的 PATH 中，即可在命令行中使用 ngrok 命令。
启动 ngrok
在命令行中执行以下命令启动 ngrok：
ngrok http 8080
这个命令会将本地的 8080 端口暴露到公网上，并生成一个随机的 HTTPS 地址，可以通过这个地址访问本地的 Web 服务器。
在 PWA 应用中使用 ngrok 进行测试
在 PWA 应用中，我们需要在 service worker 中注册一个 fetch 事件，用于处理网络请求。我们可以在 fetch 事件中使用 fetch API 发送网络请求，这时浏览器会发现我们使用的是 ngrok 生成的 HTTPS 地址，可以正常访问。
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request)
);
});这样，在 PWA 应用中使用 ngrok 进行测试就可以了。
总结
在开发 PWA 应用时，我们需要在本地进行测试。可以使用自签名证书或者 ngrok 工具来模拟 HTTPS 环境，从而可以在 PWA 应用中使用 localhost 进行测试。这样可以避免在公网上部署测试服务器的麻烦，同时还可以在多个设备上进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c70db6add4f0e0ff139274