时间戳

首页 > 解决方案 > 如何让服务人员缓存下一页？

service-worker - 如何让服务人员缓存下一页？

问题描述

我正在做一个测验。一个页面正在显示一个问题，当用户回答时，另一个页面正在显示答案。当用户在问题页面时，我想提前缓存相应的答案页面。

因此，当用户回答问题时，会在没有任何加载时间的情况下显示答案页面（因为它是从服务人员那里检索到的，而且速度非常快）。

实现这一目标的最佳方法是什么？

我想到的解决方案：

在问题页面上，插入一个隐藏的 IFrame，显示答案页面，允许服务人员缓存所有资源（html 和图像）。我认为这太棘手了，而且似乎不是一个常见的解决方案；真的找不到其他人使用这个技巧，所以我认为必须有更好的方法？

标签： service-workercacheapi

解决方案

您可以：

  1. 使用 SW 预先缓存所有内容（如果速度较慢的连接涉及许多页面，请注意）。
  2. 配置SW在每次请求后动态缓存
  3. 将标头添加cache-control到 HTTP 响应，以便浏览器自动缓存并且不需要 SW。

如果配置 2 和 3，发出fetch(url)请求使其缓存，那么后续请求将不会使用网络。

预缓存所有

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(
        [
          './question/1',
          './answer/1',
          './question/1',
          './answer/2',
          ...
        ]
      );
    })
  );
});

推荐阅读