ServiceWorker / Cache / Set TTL - PullRequest
Новая
       45

ServiceWorker / Cache / Set TTL

0 голосов
/ 17 апреля 2019

относительно этого API https://developer.mozilla.org/en-US/docs/Web/API/Cache, Я также хотел бы установить cache lifetime.

скажем, cache this request for no longer than 10 minutes

Ответы [ 3 ]

1 голос
/ 17 апреля 2019

К сожалению, это невозможно.

В документе, который вы связали, конкретно указано, что элементы в объектах кэша, предоставляемых API-интерфейсом кэша, не обновляются и не удаляются автоматически.Вы должны реализовать такую ​​логику самостоятельно.

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

https://developers.google.com/web/tools/workbox/

0 голосов
/ 28 мая 2019

Вы можете динамически создавать имена кешей, которые кодируют время их создания и максимальный возраст, что-то простое, например: ${dateStr}_${maxAgeMs}. Затем при перехвате выборки в вашем сервисном работнике вы можете просмотреть существующие кэши, используя caches.keys, и найти тот, у которого не истек срок действия, используя только его имя и сопоставить с ним, или создать новый, если у них все просрочены и заполнены это с входящими выборками. Это также дает вам возможность удалить просроченные кэши.

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

0 голосов
/ 24 апреля 2019

Вот как я реализовал это без рабочего ящика.(Если вы можете переключиться на workbox , пожалуйста, сделайте, если не продолжаете читать)

  • Создала стратегию кэширования, которая onFetchComplete клонирует ответ из сети, добавляет заголовок метки времени, скажем «x-sw-cache-timestamp ".
  • сохранить этот клонированный обновленный ответ в кэш.

  • onCacheMatch сравнивает" x-sw-cache-timestamp "с currentTime и, если оно превышает 10минимальное окно, выборка из сети. 

    fucntion onFetchComplete(response)
{
  var timestampHeader = {};
  timestampHeader["x-sw-cache-timestamp"] = Date.now();

  return serviceWorker
      .cloneResponse(response, timestampHeader)
      .then(function (responseCopy)
      {
          cache.add(request, responseCopy.clone());
          return responseCopy;
       });
   }

 serviceWorker.cloneResponse = function (response, extraHeaders)
 {
        if (!response)
        {
            return serviceWorker.Promise.resolve();
        }

        var init = {
            status: response.status,
            statusText: response.statusText,
            headers: extraHeaders || {}
        };

        response.headers.forEach(function (val, key)
        {
            init.headers[key] = val;
        });

        return response.blob().then(function (blob)
        {
            return new serviceWorker.Response(blob, init);
        });
    });

    функция onCacheMatch (cachedResponse, запрос) {var durationInHeader = cachedResponse.headers.get ("x-sw-cache-timestamp"); 

    if (durationInHeader > (Date.now() - 600000))
{
    fetch(request);
    return cachedResponse;
}

    возврат извлечения (запрос);}

Надеюсь, это поможет!

...