当 PWA 遇到 HTTPS 的时候，你需要知道的全部
随着移动设备的普及，越来越多的网站开始使用 PWA 技术来提供更好的用户体验。然而，在使用 PWA 的同时，我们也需要考虑网站的安全性；HTTPS 是保持网站安全的重要标准。本文将介绍当 PWA 遇到 HTTPS 的时候，你需要知道的全部。
什么是 PWA？
PWA (Progressive Web App) 是指一种支持离线、可以添加到主屏幕的 Web 应用。PWA 具有快速、流畅、可靠的用户体验，在使用上和原生应用近似。
PWA 的优势是什么？
1.快速加载，可以和本地应用相媲美； 2.离线可用，即使在没有网络的情况下，用户依然可以使用应用。因为 PWA 使用了 Service Worker； 3.免下载安装，用户可以直接在网页中访问使用，是一种更加轻量级的应用程序 4.可以安装到设备主屏幕，启动时不需要输入域名； 5.可以充分利用设备的功能，如摄像头、地理位置等。
HTTPS 是什么？
HTTPS 是一种通过 SSL/TLS 加密连接的 HTTP 协议。它可以确保连接的安全性，使得连接双方可以安全传输敏感数据，如密码、信用卡号等。HTTPS 使得数据不被劫持或修改，保证了信息的完整性和私密性。
为什么 PWA 需要使用 HTTPS？
PWA 需要使用 HTTPS 原因有以下几点：
1.浏览器的安全机制要求 PWA 必须使用 HTTPS； 2.在 PWA 中使用 Service Worker，Service Worker 可以在客户端缓存数据并处理离线数据，如果没有HTTPS连接，那么这些数据在传输的过程中就有可能被别有用心的人篡改，从而导致网站不可靠；所以为了保证数据的安全，PWA 得使用 HTTPS。 3.对于某些功能，如摄像头、音频、蓝牙等，需要 HTTPS 才能访问。
如何在 PWA 中使用 HTTPS？
首先要获得一个 SSL 证书，可以使用免费的 Let's Encrypt 证书，也可以购买商业证书。
在服务器端开启 HTTPS 的方式有很多种，具体方法可以查看服务器提供商的文档。简单来说，可以通过在服务器端配置 SSL/TLS 证书来开启 HTTPS。常见的服务器软件包括 Nginx、Apache 和 Node.js。下面以 Node.js 作为例子，介绍如何配置 HTTPS。
使用 Node.js 配置 HTTPS
Node.js 内置了一个 https 模块，可以轻松地创建 HTTPS 服务器。
首先安装证书，然后在服务器端引入 https 模块：
const https = require('https');
const fs = require('fs');
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};其中，key.pem 和 cert.pem 是 SSL 证书的私钥和公钥。
然后，创建 HTTPS 服务器：
https.createServer(options, (req, res) => {
res.writeHead(200);
res.end('Hello World!');
}).listen(443);HTTPS 服务器监听端口 443，当访问时，会把请求重定向到 HTTPS 协议上。
如何在 PWA 中使用 HTTPS？
在 PWA 中使用 HTTPS 需要一些配置，具体来说，需要在 Service Worker 中配置 fetch 拦截器，以确保所有请求都使用 HTTPS 协议。
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).catch(() => {
return new Response('You\'re not connected to the internet.');
})
);
event.request.url.startsWith('https');
});这段代码会拦截所有 fetch 请求，如果它们不是 HTTPS 请求，则返回一个提示信息。
总结
本文介绍了当 PWA 遇到 HTTPS 的时候，你需要知道的全部。PWA 和 HTTPS 看起来没有很多直接的联系，但是它们之间的联系却十分密切。在开发 PWA 过程中，了解 HTTPS 的相关知识是必不可少的。如果你还没有使用 HTTPS，请尽早为你的网站配置 HTTPS，并为你的 PWA 提供更加安全和可靠的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64604254968c7c53b0200344