什么是 PWA？
PWA（Progressive Web Apps）是一种新型的 Web 应用程序开发方式，它可以让我们的 Web 应用程序获得类似于 Native App 的用户体验。PWA 具有以下几个特点：
- 可安装：PWA 可以被用户安装在桌面或应用列表上，就像 Native App 一样。
- 可离线访问：PWA 可以在不联网的情况下继续访问，这也是其可以获得类似于 Native App 的用户体验的重要因素。
- 响应式设计：PWA 会根据设备的屏幕大小和分辨率进行自适应布局和横竖屏切换。
缓存更新
缓存更新是指在 Web 应用程序运行期间，对缓存中的资源进行更新，以确保用户获取到最新的数据。
当我们使用 Service Worker 进行缓存更新时，通常会采用以下几个步骤：
第一步：安装 Service Worker
我们可以在应用程序的页面中安装 Service Worker，并在安装成功后通过 navigator.serviceWorker.register 方法进行监听：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
---------------------- -
-------------------------- ------------ ------- -- -----
---
---
-第二步：缓存需要离线访问的资源
缓存离线访问的资源需要用到 Cache 接口，我们可以在 Service Worker 中使用该接口对需要缓存的资源进行缓存：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
--------------
------------
---
--
--
---其中，caches.open 方法用于打开一个指定名称的缓存，如果该名称的缓存不存在则会新建一个缓存；cache.addAll 方法则用于向缓存中添加需要缓存的资源。
第三步：更新缓存中的资源
如果我们需要更新缓存中的资源，可以使用 Cache 接口的 match 方法来查找旧版本的资源，并使用 cache.put 方法将新版本的资源放入缓存中：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ -------------------------------------------- -
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- -------------- - -----------------
-------------------------------------------- -
------------------------ ----------------
---
------ ---------
---
--
--
---其中，caches.match 方法用于查找缓存中是否存在指定的请求，如果存在则返回对应的响应；如果不存在，则使用 fetch 方法进行请求，并对请求得到的响应进行判断，如果请求失败或响应状态码不为 200 或响应类型不为 basic，则直接返回响应。如果响应有效，则进行一次缓存更新，将新版本的资源放入缓存中。最后返回响应，让请求得到响应的内容。
资源预加载
资源预加载是指在 Web 应用程序加载期间，预先加载一些可能需要用到的资源，以提高应用程序的响应速度和用户体验。
当我们使用 Service Worker 进行资源预加载时，通常会采用以下几个步骤：
第一步：安装 Service Worker
同样，在进行资源预加载之前，我们需要先安装 Service Worker 并进行监听。
第二步：预加载需要的资源
我们可以在 Service Worker 中使用 fetch 方法对需要预加载的资源进行加载：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
--------------
-------------
------------------------------------
-----------------------------------
---
--
--
---可以看到，在这个例子中，我们不仅预加载了本地的资源，还预加载了远程服务器上的资源。
第三步：优先使用预加载的资源
在网站的加载过程中，我们可以通过 request.mode 属性的值来决定是否优先使用预加载的资源：
-- -------------------- ---- -------
------------------------------ --------------- -
-- ------------------- --- ----------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
- ---- -
------------------
------------------------------------- -
------ ------------------------------
--
--
-
---可以看到，在这个例子中，我们首先判断请求类型是否为导航请求，如果是，则直接使用 fetch 方法获取资源并 catch 请求失败的情况，以显示离线页面。如果不是导航请求，我们就使用 caches.match 方法来查找该请求是否已经被缓存，如果已经被缓存则直接返回缓存中的响应，否则才使用 fetch 方法进行请求。
总结
以上就是如何在 PWA 中做好缓存更新和资源预加载的方法。缓存更新可以让我们的应用程序在使用过程中始终获取到最新的数据，资源预加载则可以提高应用程序的响应速度和用户体验。学习了这两种技术后，我们就可以为我们的 PWA 应用程序带来更好的用户体验。
参考链接
- Service Worker API - Web API 接口参考 | MDN
- 使用 Service Worker 实现离线 Web 应用程序 | Web Fundamentals | Google Developers
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473499e968c7c53b00c3216