随着 PWA 技术的不断发展，越来越多的线下应用也开始拥抱 PWA 技术。而在 PWA 应用中，服务工作线以及缓存的使用是非常重要的一部分。本文将从实践角度出发，结合示例代码来详细探讨服务工作线与缓存的使用。
服务工作线
服务工作线是一种运行在浏览器背景中的线程，用于控制网页或 PWA 应用的网络请求。由于服务工作线可以离线缓存资源，因此可以帮助我们实现 PWA 应用的离线访问。
注册服务工作线
在一个 PWA 应用中，我们需要先注册服务工作线。在注册服务工作线之前，我们需要首先判断浏览器是否支持服务工作线：
if ('serviceWorker' in navigator) {
// 支持服务工作线
}如果浏览器支持服务工作线，我们可以通过下面的代码来注册服务工作线：
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
// 注册服务工作线成功
})
.catch(error => {
// 注册服务工作线失败
});上面代码中的 service-worker.js 是一个 JavaScript 文件，其中定义了服务工作线的具体内容。我们需要在 service-worker.js 文件中添加一些代码，以实现离线访问的功能。下面是一个示例：
-- -------------------- ---- -------
-- ------
----- ---------- - ---------------
-- ---------
----- -------------- - -
----
--------------
-----------------
--------------
-------------------
--
-- ------
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
-- ---------
------ -----------------------------
--
--
---
-- ------
--------------------------------- ----- -- -
----------------
----------------------------- -- -
------ ------------
----------
----------------- -- --------- --- -----------
-------------- -- -------------------------
--
--
--
---
-- ------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ------------------------
-- ---------- -
------ ---------
-
-- -----------------------
------ ---------------------
--
--
---上面代码中，我们定义了一个名为 my-pwa-cache 的缓存，其中包含了需要缓存的文件。在安装事件中，我们使用 caches.open 方法打开目标缓存，然后通过 cache.addAll 方法将需要缓存的文件添加到缓存中。在激活事件中，我们通过 caches.keys 方法获取所有缓存的名称，然后通过 Promise.all 方法逐一删除不需要的缓存。在请求事件中，我们通过 caches.match 方法检查缓存中是否存在请求的资源，如果存在，则直接返回缓存中的资源；否则，我们通过 fetch 方法在网络中请求资源。
更新服务工作线
在服务工作线的定义中，我们还可以通过监听控制器变化事件来更新服务工作线。假设我们需要更新服务工作线，我们可以通过下面的代码来实现：
-- -------------------- ---- -------
-- ---------
----------------------------------------- -- -- -
-------------------------
-- ---------------------
-- ------- -------- --- ----------- -
-----------
-
---
-- ------
----- ----------------- - -------- -- -
-------------------------------- ----- -- -
----------------
-------------------------- -- -----------
--
---
--
-- ------
----- ------------------ - -------- -- -
--------------------------------- ----- -- -
----------------
---------------------------- -- -----------
--
---
--
-- ----
----- ------------- - -------- -- -
-------------------------------- ----- -- -
-- ------------------ --- -------------- -
-------------------
-----------
-
---
--在上面的代码中，我们定义了三个方法：installNewVersion、activateNewVersion 和 updateVersion。这三个方法分别用于安装新的版本、激活新的版本和更新版本。其中，installNewVersion 和 activateNewVersion 方法分别监听安装事件和激活事件，用于在安装和激活新的版本时执行回调函数；updateVersion 方法监听消息事件，当收到更新消息时，调用 self.skipWaiting() 方法来立即激活新版本。
缓存
除了服务工作线之外，缓存也是一个重要的概念。在 PWA 应用中，我们可以通过缓存来提高应用的访问速度、减少数据的传输量。下面就是一些关于缓存的技术点。
缓存 API
在 PWA 应用中，我们可以通过下面的代码来获取缓存对象：
caches.open(cacheName).then(cache => {
// 缓存对象
});上面代码中的 cacheName 是缓存的名称。通过 caches.open 方法，我们可以打开指定名称的缓存，然后通过返回的缓存对象进行缓存的操作。
在缓存对象中，我们可以使用以下方法：
cache.add(request)：缓存指定请求的结果。cache.addAll(requests)：缓存指定请求列表的结果。cache.put(request, response)：将指定请求的结果缓存为指定响应。cache.match(request)：从缓存中查找并返回指定请求的响应。
应用缓存
除了通过 JavaScript API 进行缓存之外，还可以使用应用缓存技术来实现离线访问。应用缓存是 W3C HTML5 规范中定义的一种缓存技术，通过在 HTML 文件中添加缓存列表，可以实现离线缓存的功能。以下是一个示例：
-- -------------------- ---- -------
--------- -----
----- --------------------------
------
---------- ----------
-------
------
---------- -----------
-------
-------在上面的代码中，我们在 HTML 文件的 html 标签中添加了 manifest 属性，该属性的值为 cache.manifest。cache.manifest 是一个文本文件，用于定义缓存列表，如下所示：
-- -------------------- ---- ------- ----- -------- - ------- ----- ------ ---------- ----------------- ---------------- ---------------- -------- -
在上面的代码中，我们定义了一个名为 CACHE 的缓存列表，其中包含了需要缓存的资源。在网络不可用的情况下，该缓存列表中的资源可以被直接访问。而在网络可用的情况下，访问缓存列表中不存在的资源时，浏览器会尝试从网络中加载。
除了 CACHE 的缓存列表之外，我们还可以定义 NETWORK 列表和 FALLBACK 列表。NETWORK 列表中的资源表示需要从网络中获取的资源；而 FALLBACK 列表中的资源则表示在某些资源无法从网络中加载时使用的替代资源。
完整示例
本文的完整示例代码如下所示：
-- -------------------- ---- -------
--------- -----
----- --------------------------
------
---------- ---------------
----- --------------- ---------------------------- -------------------
----- ---------------- ---------------------
-------
------
--------
------- ------------
---------
------
--------------
---------------
----------------------------------
-------------------------------
------------------ -- -
-- ---------
--
------------ -- -
-- ---------
----------------
---------------
---------------------------------------------------- -- -- -
-------------------------
-- ---------------------
-- ------- -------- --- ----------- -
-----------
-
---
----- ----------------- - -------- -- -
-------------------------------- ----- -- -
----------------
-------------------------- -- -----------
--
---
--
----- ------------------ - -------- -- -
--------------------------------- ----- -- -
----------------
---------------------------- -- -----------
--
---
--
----- ------------- - -------- -- -
-------------------------------- ----- -- -
-- ------------------ --- -------------- -
-------------------
-----------
-
---
---------------
-----------
------- --------
-------------------------------------------- -- -
-- ----
---
-------------------
-----------------------
------------------ ----------
----------------------------------
--------------
---------------- --------
- ------- -----
------
----------
--------------
-----------
----------------
--------
-
---------
- --------------------------
-------
--------
------ ---- --- -------
---------
------- --------------------------
-------
--------- -------------------- ---- -------
-- ------
----- ---------- - ---------------
-- ---------
----- -------------- - -
----
--------------
-----------------
--------------
-------------------
--
-- ------
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
-- ---------
------ -----------------------------
--
--
---
-- ------
--------------------------------- ----- -- -
----------------
----------------------------- -- -
------ ------------
----------
----------------- -- --------- --- -----------
-------------- -- -------------------------
--
--
--
---
-- ------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ------------------------
-- ---------- -
------ ---------
-
-- -----------------------
------ ---------------------
--
--
---
-- -------
----------------------------------------- -- -- -
-------------------------
-- ---------------------
-- ------- -------- --- ----------- -
-----------
-
---
----- ----------------- - -------- -- -
-------------------------------- ----- -- -
----------------
-------------------------- -- -----------
--
---
--
----- ------------------ - -------- -- -
--------------------------------- ----- -- -
----------------
---------------------------- -- -----------
--
---
--
----- ------------- - -------- -- -
-------------------------------- ----- -- -
-- ------------------ --- -------------- -
-------------------
-----------
-
---
---- -------------------- ---- -------
-
------- ---- ---------
------------- -------
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------- -
-
------ -------------------
-------- ----------
------- -----------
-
-
-以上是一份详情且有深度学习以及指导意义的PWA实践文章。通过本文的学习，相信您对服务工作线和缓存等概念都有了更深的理解，同时也可以根据本文的示例代码来更好地实现 PWA 应用的开发。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/679732f1504e4ea9bde40b05