前言
随着移动设备和移动网络的普及，越来越多的用户选择使用 Progressive Web App (PWA) 来浏览网页，因为 PWA 具有一些原生应用的优点，例如可以离线访问、在主屏幕上添加快捷方式等等。为了提高用户体验，我们需要让 PWA 应用在后台能够继续工作，本文将介绍如何实现 PWA 应用的后台运行。
什么是 PWA
Progressive Web App (PWA) 是一种使用 Web 技术编写的网页应用程序。PWA 具有原生应用的一些特点，例如可以添加到主屏幕、在离线情况下仍然可以使用、拥有消息推送功能等等。它还使用了一些新的 Web API，例如 Service Worker、Web App Manifest 等等，以提供更好的用户体验。
Service Worker
Service Worker 是 PWA 的核心技术之一，它是一种运行在浏览器后台的 JavaScript 脚本，可以拦截浏览器向服务器发送的请求，并在本地缓存响应结果。这就使得 PWA 应用可以在离线情况下继续工作。
Service Worker 还可以使用 web push 协议实现消息推送功能，从而让用户能够在应用关闭的情况下收到消息推送。当然，为了防止 Service Worker 被滥用，浏览器对其有一些限制。Service Worker 只能运行在 HTTPS 协议下，并需要用户同意安装。
实现后台运行
了解了 Service Worker 的原理后，我们就可以通过它来实现 PWA 应用的后台运行。具体的做法如下：
1. 注册 Service Worker
首先，在应用启动时需要注册 Service Worker，以便让它能够运行在浏览器的后台。在 HTML 文件中添加如下代码：
-- -------------------- ---- -------
--------
-- ---------------- -- ---------- -
------------------------------------------------------
-------- -- -
-------------------- ------ ---------- ---------------
--
------------ -- -
-------------------- ----------- ------- --------- -------
---
-
---------这段代码检测了浏览器是否支持 Service Worker，如果支持，则注册了一个 /service-worker.js 脚本。该脚本通过 install 和 activate 两个事件来进行初始化工作。
2. 监听 Service Worker 生命周期事件
在 Service Worker 中，我们可以监听一些生命周期事件，例如 activate、fetch、message 等等。其中，fetch 事件用于拦截浏览器向服务器发送的请求并进行缓存。
在 Service Worker 注册时，我们需要通过 addEventListener 方法来监听 install 和 activate 事件：
self.addEventListener('install', event => {
console.log('Service worker installed');
});
self.addEventListener('activate', event => {
console.log('Service worker activated');
});3. 手动发送 fetch 请求
通过上面的步骤，我们已经能够在 Service Worker 中监听 fetch 事件，并拦截请求。但如果我们想要后台运行并且发送请求，我们需要手动发送一些请求。
一个简单的方法是使用定时器，在一定时间间隔内发送一次请求：
-- -------------------- ---- -------
-------- ----------- -
--------------
-------------- -- ----------------
---------- -- -
-------------------- ---- -------------- ------
--
------------ -- -
-------------------- -------- ------- -------
---
-
---------------------- ------以上代码每隔 5 秒钟就向 /data 地址发送一个 GET 请求，并将结果以 JSON 格式返回。当然，实际情况中可能会更加复杂，例如发送 POST 请求、使用 WebSocket 等等。
4. 显示通知
除了发送请求之外，我们还可以通过 Service Worker 显示通知。在 Service Worker 中，我们可以使用 showNotification API，来显示一个系统级别的通知。
self.registration.showNotification('Hello', {
body: 'This is a notification from your PWA app',
icon: '/images/icon-512x512.png',
});以上代码在用户关闭 PWA 应用之后会显示一个通知，提示用户应用仍在后台运行。通知内容包括标题、正文和图标，具体样式根据浏览器不同可能会有一些差异。
总结
通过以上的步骤，我们就能够将 PWA 应用实现后台运行。其中，关键在于 Service Worker 的注册和监听 fetch 事件。通过手动发送请求，我们可以保持应用的后台运行，同时使用 showNotification 显示通知，让用户了解应用的运行状态。实际的应用中可能会更加复杂，例如需要在后台运行一些计算、使用 WebSocket 与服务器通信等等，但基本原理都是相同的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a26c948841e98947034a6