前言
PWA（Progressive Web App）是一种新兴的 Web 应用程序模型，它允许 Web 应用程序以本地应用程序的方式运行，并提供了许多本地应用程序的功能，如离线访问、推送通知、快速加载等。在 PWA 开发中，使用 HTTPS 协议是必须的，因为浏览器只允许在 HTTPS 站点上注册 Service Worker，而 Service Worker 是 PWA 的核心。
在实际开发中，使用 HTTPS 部署 PWA 时，可能会遇到一些问题。本文将介绍如何解决使用 HTTPS 部署 PWA 出现的问题。
问题描述
使用 HTTPS 部署 PWA 时，可能会遇到以下两个问题：
- Service Worker 无法注册
- 离线访问失败
Service Worker 无法注册
Service Worker 是 PWA 的核心，它可以让 Web 应用程序在离线状态下运行，并提供了其他一些功能，如推送通知、后台同步等。在使用 HTTPS 部署 PWA 时，浏览器只允许在 HTTPS 站点上注册 Service Worker，如果使用 HTTP 站点，则会出现以下错误：
Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
离线访问失败
离线访问是 PWA 的一个重要功能，它可以让用户在没有网络连接的情况下访问 Web 应用程序。在使用 HTTPS 部署 PWA 时，离线访问可能会失败，因为浏览器需要缓存一些文件以供离线访问使用，如果这些文件无法缓存，则离线访问将无法正常工作。
解决方案
为了解决使用 HTTPS 部署 PWA 出现的问题，我们可以采取以下措施：
- 部署 HTTPS 站点
- 配置 Service Worker
- 离线缓存文件
部署 HTTPS 站点
在使用 HTTPS 部署 PWA 时，首先需要部署 HTTPS 站点。可以使用免费的 Let's Encrypt SSL 证书来部署 HTTPS 站点。以下是使用 Certbot 工具自动获取 Let's Encrypt SSL 证书的示例代码：
-- -------------------- ---- ------- - -- ------- -- - ---- ------- ------ - ---- ------- ------- -------------------------- -- - ---- ------------------ -------- - ---- ------------------ ------------------- - ---- ------- ------ - ---- ------- ------- ------- -- - -- --- -- - ---- ------- -------- ------------ -- ----------- -- ---------------
配置 Service Worker
在 HTTPS 站点上注册 Service Worker 时，需要注意以下几点：
- Service Worker 文件必须在 HTTPS 站点上
- Service Worker 文件必须位于站点根目录下
- Service Worker 文件必须在 HTML 文件中注册
以下是 Service Worker 文件的示例代码：
-- -------------------- ---- -------
-- -----------------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
----------
-------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---以下是在 HTML 文件中注册 Service Worker 的示例代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
--------- -----------
----- -------------- ----------------------
--------
-- ---------------- -- ---------- -
------------------------------------------------------
---------------------------- -
-------------------- ------ ------------- --------------
--
---------------------- -
---------------------- ------ ------------ --------- -------
---
-
---------
-------
------
---
-------
-------离线缓存文件
为了让离线访问正常工作，需要将一些文件缓存到浏览器中。可以使用 Cache API 来缓存文件。以下是将文件缓存到浏览器中的示例代码：
-- -------------------- ---- -------
-- -----------------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
----------
-------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---在上面的示例代码中，我们将 '/'、'/index.html'、'/app.js' 和 '/styles.css' 这些文件缓存到了浏览器中。在离线访问时，浏览器将从缓存中获取这些文件，从而实现离线访问。
总结
在使用 HTTPS 部署 PWA 时，可能会遇到一些问题，如 Service Worker 无法注册和离线访问失败。为了解决这些问题，我们需要部署 HTTPS 站点、配置 Service Worker 和离线缓存文件。通过本文的介绍，相信读者已经了解了如何解决使用 HTTPS 部署 PWA 出现的问题，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650b97fd95b1f8cacd5a7a12