前言
随着智能手机的普及，人们对移动应用体验的要求越来越高。传统的移动应用需要用户主动打开并使用，而在这个过程中，一旦用户离开应用，应用程序也就停止工作。这种使用方式对于一些应用来说并不友好，比如社交、聊天等需要实时获取信息的应用程序。为了提高应用程序的用户体验，PWA（Progressive Web App） 应运而生。
PWA 应用是一种结合 Web 和 Native 应用的优点，能让用户像使用 Native 应用一样使用 Web 应用，甚至比 Native 应用更好。其中一个关键特性是，当用户离开应用（比如锁屏、最小化）时，应用能够在后台运行，继续处理数据。
本篇文章将着重介绍 PWA 应用如何处理后台运行的问题，从技术实现、实用性等角度展开探讨。
为什么需要后台运行？
对于一些需要实时获取数据或推送消息的应用，后台运行是必不可少的特性。比如实时聊天、即时通讯、社交信息流、在线游戏等等，都需要在用户离开应用时继续工作。
PWA 应用能够做到在后台运行，不仅可以提高用户的使用体验，还能保证用户能及时收到相关的消息和通知，增强用户的活跃程度和黏性。
PWA 应用如何实现后台运行？
PWA 应用要想实现后台运行，需要用到 Web Workers API、Service Workers API 和 Push API。
Web Workers API
Web Workers API 允许我们在 Web 应用中使用多线程，将复杂的任务放在后台线程中处理。与主线程相比，后台线程不会阻塞主线程，避免了应用的卡顿和崩溃。
Web Workers 分为两种：Dedicated Workers 和 Shared Workers。前者是一种专用线程，只能被创建它的脚本使用，后者可以被多个脚本共用。
我们可以通过如下代码创建 Dedicated Worker。
----- ------ - --- --------------------
当代码执行到这里的时候，浏览器将开启一个新的线程，并将 worker.js 文件加载到该线程中。Worker 中的代码将在后台运行，与主线程互不干扰。
Service Workers API
Service Workers API 是 PWA 应用的核心。它是一个独立的 JavaScript 线程，可以被用来控制 Web 里面核心的请求和响应。在这个意义上来说，它像是一个代理服务器，允许我们缓存请求和响应，甚至可以在离线时使用缓存。
Service Worker 一般会拦截网络请求，并能够缓存响应数据。当用户离开应用时，Service Worker 依然可以在后台处理网络请求，并将处理结果缓存下来，以供用户下次使用。这种方式可以大幅度提高应用的响应速度，并且使得应用离线使用成为可能。
下面是 Service Worker 的注册代码，我们可以在 index.html 文件的 script 标签中添加如下代码：
-- ---------------- -- ---------- -
------------------------------------------
------------------ -- -
-------------------- ------ ------------- --------------
--
------------ -- -
---------------------- ------ ------------ --------- -------
---
-当我们运行 PWA 应用时，浏览器会尝试注册 Service Worker，在注册完成后，Service Worker 就可以控制页面与网络的请求和响应了。
Push API
Push API 允许服务端向客户端推送消息，即 Web Push Notification。在 PWA 应用中，Push API 和 Service Worker 配合使用，可以实现应用在后台运行时，仍然能够接收到推送消息。
获取用户许可 Push Notification 需要用户授权，我们可以使用 Notification API 弹出一个提示框，请求用户授权。
------------------------------------------------ -- -
-- ----------- --- ---------- -
------------------------- ---------- ----------
-- ----- ------- ---------- ---- -------
-
---用户授权后，我们需要将用户的订阅信息发送到服务端，并利用推送服务发送消息给客户端。推送服务一般有两种实现方式：WebSocket 和 HTTP。
-- - ------- ------ --- ---- -----
----------------------------- ----- -- -
-- -----------
---
-- - -------- -------
-------------------------------------- -- -
--------------------------- ---------------- ---- --
------------------ -- -
----------------- --------------- --------------
-- - ------------ ------
---
---当服务端有新的消息时，服务端会发送消息到客户端，客户端通过 Service Worker 接收消息，并显示推送通知。
总结
本文重点介绍了 PWA 应用如何处理后台运行的问题。PWA 应用通过 Web Workers API、Service Workers API 和 Push API 实现了在后台运行时，仍然能够处理和响应客户端的请求和推送消息。PWA 应用的后台运行特性为一些需要实时获取数据和推送消息的应用提供了更好的用户体验。
PWA 应用的技术实现较为复杂，需要良好的编程技能和较深的 Web 开发经验。但是，它为移动应用程序的快速开发和迭代提供了非常好的途径。我们相信，未来在移动应用开发领域，PWA 应用会有越来越广泛的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f57c91f6b2d6eab3e3634f