Пошаговое руководство о том, как запросить ваш кэш и перечислить офлайн-страницы с помощью сервис-воркеров и Cache API.
Это функция, с которой я редко сталкиваюсь при просмотре веб-страниц, и вы наверняка тоже. Это может быть по ряду причин, включая структуру приложения, нехватку ресурсов / времени и незнание разработчиками, что это можно сделать в Интернете.
Для реализации такой функции требуется сервисный работник и эффективное использование Cache API. Из-за этих требований у разработчиков есть много проблем при разработке такого оффлайн-интерфейса.
К счастью, как это ни странно, это не так сложно и требует много времени, как я думал изначально.
В этой статье я покажу вам, как именно реализовать это самостоятельно, однако из-за некоторых сложностей вам придется соответствующим образом адаптировать код к вашему проекту.
Это не руководство по копированию и не для начинающих веб-разработчиков. Но подожди. После этой статьи вы должны точно знать, что вам нужно делать.
В этой статье я принимаю во внимание следующее:
- Вы знакомы с JavaScript ES6, Service Workers, Workbox, Fetch API.
- Предполагается, что регистрация обслуживающего персонала уже существует.
- Вы тестируете последнюю версию Chrome.
- Хотя я рекомендую вам ознакомиться с API сервисного работника и жизненным циклом сервисного работника, гораздо удобнее и проще использовать Workbox, который представляет собой хорошо протестированную библиотеку, которая упрощает работу вашего сервисного работника. .
Офлайн-доступные страницы
Это одна из самых продвинутых функций PWA, о которых я знаю, и до сих пор считаю, что если у вас есть приличная структура приложения, вы можете реализовать ее максимум за 30 минут!
Однако самое сложное - создать структуру приложения таким образом, чтобы вы могли добавить эту функциональность поверх нее. Позже соединить точки будет намного проще.
Приятно иметь в структуре вашего приложения:
- Каждая страница имеет собственный идентификатор, соответствующий ее маршруту. (Например, ID = ‘about-me’, Route = ‘/ about-me’.)
- Возможность извлекать заголовок страницы из ее идентификатора и / или маршрута (например, «about-me» становится «Обо мне»).
- Кэш, предназначенный для хранения только этих страниц и их ресурсов (например, Cache name = ‘offline-stored-pages’).
Прохладный! Давайте приступим ...
Более простой пример
Допустим, у нас есть веб-сайт, на котором перечислено несколько продуктов, и каждый из них имеет уникальную страницу / маршрут. В идеале мы хотели бы отображать, какие страницы продуктов были посещены и, таким образом, доступны в автономном режиме, и скрывать те, которые нет.
Чтобы добавить эту функциональность, в первую очередь нам нужно убедиться, что мы зарегистрировали маршрут в файле JavaScript нашего сервис-воркера.
Затем мы приказываем Workbox кэшировать все ресурсы, соответствующие URL-адресу страницы продукта, внутри созданного нами кеша.
service-worker.js
Затем в файлы JavaScript нашего приложения мы включим функцию, которая проверяет кеш runtime-product-pages-resources, созданный выше с помощью Workbox.
Эта функция будет искать любые ресурсы для каждого из маршрутов продукта внутри этого кеша, используя URL каждого продукта (href тега привязки).
app.js
Примечание. Логика зависит от структуры вашего приложения. Возможно, вам потребуется проверить, есть ли явно HTML-файл внутри кеша (и любые другие зависимости), чтобы пометить его доступным в автономном режиме и недоступным в противном случае.
Более сложный пример
Вот еще один более надежный, но также более сложный пример. Здесь вам не нужно добавлять собственное имя кеша в Workbox (хотя вам все равно нужно зарегистрировать маршрут для кеширования любых ресурсов):
app.js
Ваш ввод должен входить в функцию hideOfflineUnavailableProducts.
Я уверен, что вы лучше умеете присваивать имена функциям!
Затем прослушайте события окна offline и load, чтобы вызвать функцию hideOfflineUnavailableProducts, объявленную выше:
app.js
Наконец, в зависимости от вашего варианта использования для обоих приведенных выше примеров (простого и более сложного) мы можем добавить некоторый стиль для недоступных ссылок на продукты:
styles.css
Заключение
Вот и все!
Или, может быть, вам не показалось, что это простая и быстрая реализация. Пожалуйста, дайте мне знать в комментариях.
Насколько сложно было бы добавить эту функцию на свой веб-сайт или на тот, за который вы несете ответственность? Неужели потребовалось больше, чем ожидалось, и почему?
Если вы попробовали это сделать, ваш отзыв будет очень ценным для моих следующих статей.
Ваше здоровье! Хорошего дня!
Дальнейшее чтение
- Cache API Docs - MDN Docs
- Использование Cache API - разработчики Google
- Обработка кеша с помощью Service Workers и Cache API - средний
- PWA Wiki
