Service Workers и стратегии кэширования

Что такое service workers и применение стратегий кэширования

Service Worker в качестве посредника👷‍♂️

Регистрация service worker

Для начала нужно зарегистрировать service worker в файле javascript.

Жизненный цикл Service Worker

Жизненный цикл service worker 👀

Install

После регистрации service worker запускается событие install. Его можно прослушать в файле sw.js. Прежде чем перейти к коду, рассмотрим действия в событии install:

  • Добавляем все статические активы в кэш.
Стадия Install

Activate

После установки нового Service Worker появится событие activate. В этом событии можно удалить старый кэш. Нижеприведенный фрагмент кода взят из руководства по service worker.

Стадия Activate

Idle

После активации, service worker переходит на стадию idle, не выполняя никаких действий, до запуска следующего события.

Fetch

При каждом запросе fetch запускается событие fetch. Попробуем реализовать стратегии кэширования в этом событии. Как было сказано ранее, service worker работает в качестве посредника, пропуская через себя все запросы. С этого момента можно выбрать куда отправить запрос: в сеть или в кэш. В приведенном ниже примере, service worker перехватывает запрос, который отправляется в кэш. Если кэш не возвращает допустимый ответ, то запрос отправляется в сеть.

Стадия Fetch

Стратегии кэширования

Мы рассмотрели одну из стратегий кэширования в событии fetch под названием cache falling back to network”. Запомните: все стратегии кэширования реализуются в событии fetch. Рассмотрим некоторые из них:

Cache only

Одна из самых простых стратегий. Как можно догадаться из названия, все запросы отправляются в кэш.

Cache only

Network only

Клиент делает запрос, service worker перехватывает его и направляет в сеть. Легче легкого!!

Network only

Cache falling back to network

Эту стратегию мы рассматривали выше, в событии fetch. Service worker делает запрос в кэш, и при отсутствии ответа запрос отправляется в сеть.

Cache falling back to network

Network falling back to cache

Сначала service worker делает запрос к сети, и в случае успешного ответа он отправляется в кэш.

Network falling back to cache

Generic fallback (Резерв)

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

Generic Fallback

--

--

Образовательные статьи и переводы — всё для программиста

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store