Служебный работник запускает событие waitUntil () на основании некоторого условия - PullRequest
Новая
       33

Служебный работник запускает событие waitUntil () на основании некоторого условия

0 голосов
/ 31 октября 2019

Я пытаюсь реализовать стратегию cache-then-network в сервисном работнике, которая обновляет кеш в фоновом режиме. Я хочу избежать ненужных fetch запросов, поэтому придумала следующее решение: 

function cache_then_network(event) {
    var updated = false;
    event.respondWith(
        caches.open(staticCacheName)
            .then(cache => cache.match(event.request)
                .then((response) => {
                    if (response) {
                        return response;
                    }
                    else {
                        return fetch(event.request)
                        .then((response) => {
                            const resClone = response.clone();
                            return caches.open(staticCacheName)
                                .then((cache) => {
                                    cache.put(event.request, response);
                                    updated = true;
                                    return resClone;
                                })
                        })
                    }
                })
            )
    )
    if (!updated) {
        event.waitUntil(update(event.request))
    }
}

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

Я плохо разбираюсь в работниках сферы обслуживания, и код в основном составлен из нескольких источников. Так что альтернативные / лучшие решения приветствуются. Моя конечная цель - сначала кешировать, извлекать данные из сети в фоновом режиме и устанавливать флаг, который сообщает, изменился ли контент.

1 Ответ

0 голосов
/ 01 ноября 2019

Работник службы offline-поваренная книга имеет все ответы - 

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});
...