解决使用 HTTPS 部署 PWA 出现的问题-JavaScript中文网-JavaScript教程资源分享门户

前言

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 证书的示例代码：

// javascriptcn.com 代码示例
# 安装 Certbot 工具
$ sudo apt-get update
$ sudo apt-get install software-properties-common -y
$ sudo add-apt-repository universe
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install certbot -y

# 获取 SSL 证书
$ sudo certbot certonly --standalone -d example.com -d www.example.com

配置 Service Worker

在 HTTPS 站点上注册 Service Worker 时，需要注意以下几点：

Service Worker 文件必须在 HTTPS 站点上
Service Worker 文件必须位于站点根目录下
Service Worker 文件必须在 HTML 文件中注册

以下是 Service Worker 文件的示例代码：

// javascriptcn.com 代码示例
// service-worker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/app.js',
        '/styles.css'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

以下是在 HTML 文件中注册 Service Worker 的示例代码：

// javascriptcn.com 代码示例
<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>My PWA</title>
  <link rel="manifest" href="/manifest.json">
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
          console.log('Service Worker registered:', registration);
        })
        .catch(function(error) {
          console.error('Service Worker registration failed:', error);
        });
    }
  </script>
</head>
<body>
  ...
</body>
</html>

离线缓存文件

为了让离线访问正常工作，需要将一些文件缓存到浏览器中。可以使用 Cache API 来缓存文件。以下是将文件缓存到浏览器中的示例代码：

// javascriptcn.com 代码示例
// service-worker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/app.js',
        '/styles.css'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

在上面的示例代码中，我们将 '/'、'/index.html'、'/app.js' 和 '/styles.css' 这些文件缓存到了浏览器中。在离线访问时，浏览器将从缓存中获取这些文件，从而实现离线访问。

总结

在使用 HTTPS 部署 PWA 时，可能会遇到一些问题，如 Service Worker 无法注册和离线访问失败。为了解决这些问题，我们需要部署 HTTPS 站点、配置 Service Worker 和离线缓存文件。通过本文的介绍，相信读者已经了解了如何解决使用 HTTPS 部署 PWA 出现的问题，希望对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650b97fd95b1f8cacd5a7a12