随着互联网越来越普及，Web 应用的需求也变得越来越高。然而，Web 应用还存在一些局限，如离线缓存、快速加载等。PWA（Progressive Web App）的出现就是为了解决这些问题。而 PWA 的核心技术之一就是 Service Worker。
Service Worker 是什么？
Service Worker 是一个 JS 脚本，它在用户退出网站后仍然可以在后台运行。它可以和浏览器之外的其他资源打交道，比如发送网络请求和查找缓存。Service Worker 是 PWA 实现离线缓存和快速加载等功能的重要手段。
Service Worker 的运行原理
Service Worker 使用事件驱动模型，通过监听浏览器事件来实现相关功能。
安装
Service Worker 安装过程可以分为注册、下载及安装三个阶段。这三个阶段的代码如下：
-- -- ------- ------
------------------------------------------
--------- -- -
-------------------- ------ -------
----------------------------------- -- -- -
-- --- ------- ------ -----------
----- --------- - ---------------
----------------------------------------- -- -- -
-- ---------------- --- ------------ -
-------------------- ------ -------
-
---
---
--
------------ -- -
-------------------- ------ ------
---在这个代码块中，我们首先使用 navigator.serviceWorker.register 方法注册 Service Worker。一旦注册成功，我们就可以监听 Service Worker 的状态变化了。在 updatefound 事件触发时，我们获取新的 Service Worker 脚本，并在 statechange 事件中监听其更新状态，如果更新完成（state 为 installed），就输出更新完成的信息。
缓存
Service Worker 的其中一个核心功能是缓存请求和响应。它通过监听 fetch 事件来实现请求和响应的缓存。
当客户端请求资源时，Service Worker 将首先检查该资源是否已经被缓存。如果缓存中有该资源，则将缓存的响应返回给客户端。如果缓存中没有该资源，则 Service Worker 将为该请求发送一个网络请求，并在网络请求返回后将响应缓存起来以供后续使用。
以下是代码展示：
-- ------
----- --------- - -----------
-------------------------------- ----- -- -
----------------
--------------------------------- -- -
-------------------- ------ -------
------ --------------
----
-------------
-------------
----------------------
---
--
--
---
-- --------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ------------
-- ---------- -
------ ---------
-
-- ----------- ---- ------------
------ ---------------------------------- -- -
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
----- --------------- - -----------------
--------------------------------- -- -
------------------------ -----------------
---
------ ---------
---
--
--
---在这个代码块中，我们定义了一个缓存名称，并使用 caches.open 方法打开我们在其中缓存静态资源。Service Worker 中的 install 事件在安装 Service Worker 时触发，允许我们进行一些资源预缓存。如上代码，在 install 事件中，我们使用 cache.addAll 方法将需要缓存的资源添加到缓存中。
fetch 事件会监听所有的网络请求，并允许我们实现自定义的响应逻辑。在上述代码块中，我们首先将请求与缓存进行匹配，如果缓存中有该资源，则从缓存获取。如果缓存中没有该资源，则 Service Worker 发送网络请求，并缓存响应。
通信
Service Worker 通过发送/监听 message 事件与网页通信，使网页能够调用 Service Worker 中的功能。
网页向 Service Worker 发送消息：
--------------------------------------------------- -------- -- - -------------------- ------ ------ - ------ --- --------------------------------------------------------
Service Worker 中的 message 事件响应：
-------------------------------- ----- -- - --------------------- - ------------ ------------------------------------- ---
在这个代码块中，我们使用 navigator.serviceWorker.controller 发送数据到 Service Worker。同时，在 Service Worker 中监听 message 事件，当事件触发时，将返回数据。
总结
本文介绍了 PWA 技术中的 Service Worker，并详细讲解了其运行原理，包括安装、缓存和通信这三个方面。Service Worker 的事件驱动模型，使得它可以实现离线缓存、快速加载及其它功能。而对于 Web 开发者而言，Service Worker 将成为实现 PWA 的利器。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6542ea607d4982a6ebc93710