Стратегии кэширования определяют, как ведет себя PWA, когда приложение делает сетевой запрос и как оно занимается сбоями сети. Рабочая коробка – это широко используемая библиотека для создания PWA; Рабочая бокс-стратегия предоставляет следующие стратегии кэширования.
Уверяющий, что-то-ревалидат
Сервисный работник сначала будет обслуживать кэшированные активы и впоследствии обновляет кэш с последней версией. При ударе кэша он отвечает на запрос как можно быстрее. На кеш-промежутке запрос возвращается к сетевому запросу. Ответ от сетевого запроса затем используется для обновления кэша. Эта стратегия полезна в ситуации, когда получение ответа имеет более высокий приоритет по сравнению с наиболее современными результатами.
Кеш первой
Сервисный работник будет обслуживать кэшированные активы и будет запрашивать сеть, только если кэш недоступен. При удалении кэша он не будет обновлять кэш в фоновом режиме; Сеть вообще не будет использоваться. На кеш-промежутке запрос будет отправлен по сети, а ответ будет кэширован. Затем следующий запрос будет подан из кеша. Эта стратегия полезна для запросов на статические активы, которые часто не меняются.
Если стратегия кэширования не определена, Workbox сначала будет использовать кэш в качестве по умолчанию.
Сеть сначала
Сервисный работник по умолчанию попытается получить ответ по сети. Если сетевой запрос не удастся, он будет служить ответу от кэша. При успешном ответе на сеть он будет кэшировать ответ для будущего использования. Эта стратегия может быть полезна в запросах, которые часто обновляются.
Сеть Только
Сервисный работник всегда будет запрашивать сеть для ответа. Это может быть полезно, если вам нужно строго запросить сеть.
Кеш Только
Сервисный работник всегда будет запрашивать кэш для ответа. Вы должны убедиться, что вы предварительно запрашивают ресурсы перед запросом. Эта стратегия меньше используется на практике.
На вашем Служба-работник , добавьте пользовательскую стратегию для соревнования. ПРИМЕЧАНИЕ. Вы также можете определить пользовательские события для различных запросов выбора путем фильтрации в зависимости от происхождения или пути URL.
import { StaleWhileRevalidate } from "workbox-strategies";
...
//! Stale-While-Revalidate for all fetch events
self.addEventListener("fetch", (event) => {
const { request } = event;
event.respondWith(new StaleWhileRevalidate().handle({ event, request }));
});
Рабочая коробка также позволяет определять пользовательские стратегии. Все эти стратегии также позволяют настроить имя кэша, срок действия кэша и массив дополнительных плагинов рабочей коробки.
Счастливого взлома!
Оригинал: “https://dev.to/pssingh21/pwa-caching-strategies-1d7c”