基础策略

缓存策略的优势

我们可以采用不同的缓存策略来提升项目的性能。

如果某个数据请求已被缓存，我们便无需访问网络即可提供该数据。这带来了以下优势：一方面，响应速度显著提升；另一方面，即使客户端处于离线状态，我们也能提供数据，因为这些数据已本地存储。本节课将详细介绍更多优势。

必须注意的是，我们必须明确告知服务工作线程（Service Worker）哪些请求需要被处理。默认情况下，服务工作线程并不知道这些信息，尽管它的职责是拦截 HTTP 请求，但在未实现任何缓存策略之前，它不会执行任何操作。

仅缓存

这种策略通常用于实现应用的“离线优先”模式。服务工作线程会假设所需资源已经存在于本地缓存中。

该策略适用于静态资源的缓存，构建我们的“应用外壳”（app shell）。这些资源通常在服务工作线程安装阶段被获取，因此一旦服务工作线程就绪，它们即可本地可用。

1self.addEventListener('install', (event) => {
2  event.waitUntil(
3    caches.open('core-shell-cache').then((cache) => {
4      return cache.addAll([
5        '/css/styles.css',
6        '/css/assets/logo.png',
7        '/js/base.js'
8        // 其他文件...
9      ]);
10    })
11  );
12});
13
14self.addEventListener('fetch', (event) => {
15  event.respondWith(
16    caches.match(event.request)
17      .then((response) => {
18        // 数据已在缓存中
19        if (response) {
20          return response;
21        }
22
23        // 若无缓存匹配，响应将表现为网络错误
24      }
25    )
26  );
27});

当用户第二次访问我们的网页应用时（首次访问用于确保服务工作线程已安装），即使网络连接不佳，他们仍可访问数据。

例如，我们可以缓存基础 CSS 样式、公司标志和静态内容（如 .html 文件），以提供一个品牌化的离线页面。这不仅提升了用户体验，还能传递一些有用信息。比如对于一家餐厅，可以展示联系电话、营业时间以及当前优惠活动。具体取决于业务需求和应用场景。

然而，我们必须谨慎对待在安装阶段缓存过多资源的情况，应尽量保持缓存内容最小化。因为如果服务工作线程无法获取这些资源，整个安装过程将中断。

仅网络

这种策略与前一种方法相反。在此模式下，我们始终直接访问网络，完全不查询缓存。

仅网络策略最适合用于日志记录或任何离线时不需要的内容。

需要注意的是，除非需要执行自定义操作，否则请求将遵循浏览器的默认行为。因此，我们通常无需显式实现此策略。

1self.addEventListener('fetch', (event) => {
2   // 如有需要，此处可添加自定义逻辑
3   
4    event.respondWith(fetch(event.request));
5});