Сервисные работники похожи на волшебные палочки для оптимизации загрузки страниц. Кэширование на внешнем интерфейсе еще никогда не было таким легким. Чтобы упростить задачу, существует Workbox. Согласно веб-сайту: -

Workbox — это набор библиотек и модулей Node, которые упрощают кэширование ресурсов и в полной мере используют функции, используемые для создания прогрессивных веб-приложений.

Итак, Workbox имеет множество функций… сегодня мы только начнем.

Немного о сервис-воркерах

Хотя эта статья больше посвящена использованию Workbox, давайте немного обсудим, что такое Service Workers.

Сервисный работник — это скрипт, который ваш браузер запускает в фоновом режиме отдельно от веб-страницы, открывая доступ к функциям, которым не требуется веб-страница или взаимодействие с пользователем.

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

Это обязательно делает наш сайт готовым к работе в автономном режиме, потому что даже если сетевое подключение отсутствует, наши ресурсы предварительно загружены. Даже при наличии сетевого подключения ресурсы могут обслуживаться из кеша Service Worker, что делает скорость загрузки нашего сайта невероятной.

Service Workers также предоставляет такие функции, как push-сообщения, которые можно использовать для отображения уведомлений в Интернете в режиме реального времени.

Итак, Рабочий ящик

Прежде чем мы сможем использовать Workbox, нам нужно создать рабочий файл службы и зарегистрировать его в нашем веб-приложении.

Создайте файл сервис-воркера с именем sw.js в корневом каталоге проекта.

Добавьте также некоторые другие ресурсы. То, что они содержат, на самом деле не имеет значения, они просто тестируют нашего сервис-воркера.

Итак, у нас есть:

-project
-- index.html
-- sw.js
-- script.js
-- style.css

В этом примере мы собираемся использовать CDN, просто для начала. Итак, просто добавьте это в файл sw.js.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');

Хорошо, давайте зарегистрируем маршрут для кэширования.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
workbox.routing.registerRoute(
  new RegExp('.*\.js'),
  workbox.strategies.networkFirst()
);

Давайте посмотрим, что мы только что написали. Мы хотим, чтобы все маршруты, заканчивающиеся на .js, были зарегистрированы в workbox. Они будут кэшироваться с использованием первой сетевой стратегии. Теперь у рабочего ящика есть стратегии кэширования ресурсов. Стратегия «сначала сеть» означает, что сначала будет выполняться сетевой запрос, а в случае неудачи ресурс будет загружен из кеша. Есть и другие стратегии… например, кэш сначала сначала проверяет кеш, а затем сеть.

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

workbox.precaching.precacheAndRoute([
    '/style.0c2b6a1.css',
    '/script.0m5kp0.js',
]);

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

Предварительное кэширование с помощью Workbox CLI

Workbox также предоставляет интерфейс командной строки для автоматической генерации кода проповеди. Для этого вам нужно просто написать одну строку в вашем sw.js

workbox.precaching.precacheAndRoute([]);

Затем установите workbox-cli как пакет узла глобально.

npm install workbox-cli --global

Затем продолжайте и запустите команду.

workbox wizard --injectManifest

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

Завершение…

Это было довольно простое руководство по workbox. Пожалуйста, проверьте их веб-сайт и просмотрите все ссылки и руководства. Workbox также предоставляет подключаемый модуль веб-пакета, так что проверьте его, он сделает вашу жизнь намного проще. Помните, сервисные работники могут творить чудеса с вашим сайтом, но также помните, что мы не можем просто кэшировать все подряд. Также важно быть осторожным с предоставлением пользователю самого последнего ресурса, поэтому меняйте имена файлов в соответствии с изменяющимся содержимым (вы легко получите инструменты для этого).