前言
随着移动设备的普及以及 Web 技术的发展，基于 Web 技术的移动应用也成为了一个很热门的话题。而 PWA（Progressive Web Apps）正是应运而生的一种新型 Web 应用。
PWA 可以理解为一种融合了 Native App 和 Web App 优点的应用形态。它具备离线访问、消息推送、快速响应等特点，同时又不需要下载安装，能够像普通网页一样通过浏览器访问。然而，要实现这些特性，需要用到 Service Worker 技术，而缓存是 Service Worker 的重点之一。
在 PWA 中，缓存的应用非常广泛。对于多个页面共同使用的资源，如样式、脚本等，若能够缓存起来，在下次访问时可大大提供访问速度和用户体验。本文将介绍一种 PWA 中 shell 公共缓存实现方案，希望能为开发者提供一定的参考。
Shell 和公共缓存
在 PWA 中，通常将页面分为 Shell 和 Content，其中 Shell 是指整个 Web 应用的框架内容，包括头部导航栏、页面底部等常见元素。而 Content 则是指每个独立页面的具体内容，例如文章内容、商品列表等。
在 Shell 中，通常会存在一些公共的脚本和样式文件，例如 jQuery、Bootstrap 等。而这些文件在访问其他页面时往往也会被重复访问，会对用户体验造成一定的影响。因此，我们需要对这些公共文件进行缓存，以提高网页的访问速度和用户体验。
公共缓存实现方案
Service Worker 对缓存的处理
在使用 Service Worker 进行缓存处理时，主要有以下几个步骤：
在 Service Worker 安装成功后，通过 cache.addAll() 方法将需要缓存的文件缓存到本地。
在进行请求时，先通过 cache.match() 方法判断请求的资源是否已经被缓存，若已被缓存则从缓存中取出并返回。
若请求资源未被缓存，则通过 fetch() 方法将请求发送到服务器端并获取响应结果，同时将获取的结果缓存到本地。
Shell 公共缓存的实现
在 Shell 的缓存处理中，我们需要将多个页面共同使用的公共文件进行缓存。
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
----------------------------------------- -
------ --------------
-------------------------
--------------------
-----------------------
---
--
--
---在上述代码中，我们通过 caches.open() 方法打开名称为 shell 的缓存，然后通过 cache.addAll() 方法将需要缓存的文件加入到该缓存中。这样做就可以将 Shell 中的公共文件缓存到本地，以提高访问速度和用户体验。
Shell 缓存更新
在上述代码中，我们缓存的文件是固定的，但随着 PWA 的变化，我们可能需要增加或删除某些文件，因此需要对 Shell 缓存进行更新。
-- -------------------- ---- -------
--------------------------------- --------------- -
----------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ----------------------------- -- --------- --- ----------------
-------------------------- -
------ -------------------------
--
--
--
--
---在上述代码中，我们在 Service Worker 激活时对缓存进行更新。首先获取所有的缓存列表，然后过滤出以 shell 开头且不为当前缓存名称的缓存，并将这些缓存删除，以便更新时重新缓存最新的 Shell 文件。
总结
在 PWA 中，进行缓存处理可以大大提高访问速度和用户体验。我们可以通过 Service Worker 实现对公共文件的缓存，将 Shell 文件进行缓存，并进行更新以保证最新的 Shell 文件被缓存。
当然，本文介绍的仅是一种简单的缓存处理方案，但凡事都有两面性，不恰当的缓存处理反而会影响用户体验。因此，我们在进行缓存处理时应考虑实际情况，根据具体应用场景进行合理的缓存处理，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8f08d5ad90b6d04151577