为了使 Progressive Web App（PWA）更加安全和可靠，使用 HTTPS 是必不可少的。在本文中，我们将介绍如何在 PWA 中使用 HTTPS，以保证最高程度的数据保护和用户信任。
什么是 HTTPS？
HTTPS（Hyper Text Transfer Protocol Secure，安全超文本传输协议）是一种基于 TLS（Transport Layer Security，传输层安全）/SSL（Secure Sockets Layer，安全套接字层）协议的安全通信协议。它通过在客户端和服务器之间建立加密的通信链路，可以确保网络通信的安全性，防止信息被窃听、篡改或伪造。
为什么要在 PWA 中使用 HTTPS？
对于 PWA 应用程序，使用 HTTPS 可以带来多种好处，包括：
安全性：通过使用 HTTPS，保证应用程序的安全性，防止信息被盗取或用户数据被篡改。
提高用户信任：使用 HTTPS 可以提高用户信任度，这是至关重要的，因为在没有信任的情况下，用户不愿意使用应用程序。
提高应用程序的可发现性：Google 等搜索引擎为 HTTPS 网站提供优先级，并且使用 HTTPS 的应用程序会在搜索结果中排名更高。
JavaScript 安全性：使用 HTTPS 使得你不能使用在未加密页面上的外部 JavaScript 库。
如何使用 HTTPS 在 PWA 中
实现 HTTPS 在 PWA 中有多种方法，最常见的是使用 SSL/TLS 证书。这些证书可从许多不同的来源获得，包括经过验证的第三方证书颁发机构（CA）、自签名证书、Let’s Encrypt 或一些代表性的云提供商等等。
以下是在 Web App 中使用 HTTPS 的指南：
步骤 1：获得 SSL 证书
要在 PWA 中使用 HTTPS，您需要获得 HTTPS 证书。可以从经过验证的第三方证书颁发机构（CA）处购买证书，但也可以使用 Let’s Encrypt 或一些云提供商等等。
步骤 2：将证书添加到服务器
在获得证书后，需要将它添加到服务器中。按照证书生产商的规定进行操作，以确保正确设置证书。
步骤 3：将 Web 应用程序安装到 HTTPS 服务器中
使用 HTTP 连接部署 Web App 可能会因“Mixed Content”错误而被拒绝。Mixed Content 错误意味着您的 Web 应用程序在使用非加密（HTTP）连接时执行了跨源或没有 SSL/TLS 保护的内容，导致浏览器认为您的应用程序的数据不安全。
因此，完美的解决方案是将您的 Web 应用程序安装到 HTTPS 服务器上。
以下是一个简单的应用程序清单示例，在应用程序启动时请求 HTTPS 内容：
-- -------------------- ---- -------
-
------- --- -----
-------------- --- ----------- --- -----
------------ ----------------------
---------- -------------
-------- -
-
------------------------
------------------
------------------
-
--
----------------------- -
-
----------- -------
------ ----------------------------------------------------------------
----- -----------------
-
--
-------------- ----------
------------------- ----------
-------- ---
-步骤 4：使用 HTTPS 进行通信
在 PWA 应用程序中，需要使用 HTTPS 协议来访问服务器。使用 HTTPS 可以避免许多安全问题，如身份验证和安全令牌的泄露等问题。
在 JavaScript 代码中，如下所示例，可以使用 HTTPS：
fetch('https://my-pwa.com/data')
.then(function(response) {
return response.json()
})
.then(function(data) {
console.log(data)
})结论
使用 HTTPS 是保护 Progressive Web App 不可或缺的一步。它不仅可以保障应用程序数据和用户隐私不受攻击，还可以增强用户对于应用程序的信任度。在本文中，我们介绍了如何在 PWA 中使用 HTTPS，并提供了一些示例代码，希望能够帮助你更好地保护你的 PWA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f28f4ba44b36ee57665ee5