Как я могу заставить работника сервиса кешировать следующую страницу? - PullRequest
Новая
       70

Как я могу заставить работника сервиса кешировать следующую страницу?

1 голос
/ 08 января 2020

Я строю викторину. На странице отображается вопрос , а когда пользователь отвечает, на другой странице отображается ответ . Когда пользователь находится на странице вопроса, я хотел бы заранее кэшировать соответствующую страницу ответа.

Таким образом, когда пользователь отвечает на вопрос, страница ответа отображается без какого-либо времени загрузки (как это получено из работник службы, и он быстро работает.

Каков наилучший подход для достижения этой цели?

Решение, о котором я думал:

На странице вопроса вставьте скрытый IFrame отображает страницу ответа, позволяя работнику сервиса кэшировать все ресурсы (html и изображения). Я думаю, что это слишком сложно и, похоже, не является общим решением; не могу найти других людей, использующих этот трюк, поэтому я подумал, что должен быть лучший способ?

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Вы можете сделать это, если ваш вопрос и соответствующие маршруты страницы ответов основаны на соглашениях. Например, 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);
    });
  }
});

В приведенном выше описании возможно некоторое уточнение код. Например, если пользователь достаточно быстр в своем ответе, чтобы справиться с фоновой выборкой страницы ответа, ему, возможно, придется ждать ответа сети вместо использования кэша, но это маловероятно.

0 голосов
/ 08 января 2020

Вы можете либо:

  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',
          ...
        ]
      );
    })
  );
});
...