На этой неделе я узнал, как кэшировать вызовы API с помощью Service Worker.
Большинство владельцев веб-сайтов сталкиваются с проблемой удержания пользователей при себе в течение длительного времени. Одно из решений этой проблемы - избавиться от всего, что утомляет пользователя, например от длительного времени загрузки сайта.
Например, этот сайт для чтения книг отображает изображения Unsplash на каждой странице каждой книги. Чтение книги означает ожидание запросов Unsplash каждый раз, когда читатель переходит с одной страницы на другую.
Как видите, это ожидание может оттолкнуть читателей от использования сайта.
Итак, мы собираемся сократить время, затрачиваемое на запросы Unsplash, с помощью сервис-воркера.
Сценарий
Мы собираемся сосредоточиться на одной книге и предположить, что читатель всегда читает книгу от начала до конца. Это означает, что они должны получить доступ к каждой странице книги.
В этой книге есть список предварительно определенных тегов, которые используются при загрузке изображений.
За кадром веб-сайт делает два вызова Unsplash при каждом посещении страницы книги. Один вызов API для получения URL-адреса изображения с помощью тега, а другой вызов для получения данных изображения.
Обзор сервис-воркера
Есть хорошая статья, в которой подробно рассказывается о сервисных работниках. Вы можете узнать больше о возможностях сервис-воркера там. В рамках этого поста нас интересует его использование для управления сетью.
Service worker - это программируемый сетевой прокси, позволяющий контролировать обработку сетевых запросов с вашей страницы.
Прослушивание сетевых запросов
После того, как Service worker зарегистрирован, он может прослушивать все запросы, сделанные сайтом, через событие afetch.
В нашем случае нас интересуют только запросы Unsplash.
Каждый запрос Unsplash будет иметь собственный заголовок, содержащий все теги для читаемой книги. Затем мы будем использовать этот заголовок для получения URL-адресов изображений для всех тегов без блокировки.
С помощью этого сервис-воркера мы получаем все URL-адреса изображений, позволяя читателю продолжить чтение книги.
ЗАМЕТЬТЕ, что этот подход предварительного сохранения URL изображения может быть применен к любому сетевому запросу, который имеет известную связь с другими запросами, которые пользователь уже сделал.
В нашем случае теги, используемые для получения изображений, известны, когда читатель начинает читать книгу.
Вывод
Сервисные работники могут помочь веб-разработчикам значительно улучшить пользовательский опыт веб-сайта, используя предсказуемые шаблоны в его содержании.
