1

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

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

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

我想到的解决方案：

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

4

2 回答 2

0

您可以：

  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',
          ...
        ]
      );
    })
  );
});
于 2020-01-08T14:20:06.297 回答
0

如果您的问题和相应的答案页面路由是基于约定的，您可以这样做。例如，question-1.html回答为answer-1.html。如果您遵循此或类似模式，您可以捕获传入请求并立即在后台question-1.html启动请求。answer-1.html

self.addEventListener('fetch', function(event) {

  // If url is a question url, initiate answer request and cache it
  if(event.request.url.indexOf('question-') >= 0) {

    // Generate the answer url and request by convention
    var answerUrl = event.request.url.replace('question-', 'answer-');
    var answerRequest = new Request(answerUrl);

    // Initiate the fetch request for the answer page but don't wait on the response
    fetch(answerRequest).then(function(answerResponse) {
      // Cache the answer response when you get it
      caches.open('answers').then(function(cache) {
        cache.put(answerRequest, answerResponse);
      });     
    });

    // Return the question response
    event.respondWith(fetch(event.request));

  } else if(event.request.url.indexOf('answer-') >= 0) {

    // If the request is for an answer, respond from cache
    event.respondWith(caches.open('answers').then(function(cache) {
      // Return the answer from cache (or network just in case)
      return cache.match(event.request) || fetch(event.request);
    });
  }
});

上面的代码中可能有一些改进。例如，如果用户的回答速度足以击败回答页面的后台获取，他们可能不得不等待网络响应而不是使用缓存，但这不太可能。

于 2020-01-09T02:33:05.427 回答