Workbox - это набор библиотек JavaScript, которые помогут вам с функциями, связанными с сервис-воркером, когда вы создаете Progressive Web Apps.

В этой статье я собираюсь сосредоточиться только на использовании workbox для создания файла сервис-воркера для вашего приложения.

W̵o̵r̵k̵b̵o̵x̵ ̵J̵S̵ ̵i̵s̵ ̵c̵u̵r̵r̵e̵n̵t̵l̵y̵ ̵i̵n̵ ̵A̵l̵p̵h̵a̵.̵ ̵I̵ ̵w̵i̵l̵l̵ ̵k̵e̵e̵p̵ ̵t̵h̵i̵s̵ ̵a̵r̵t̵i̵c̵l̵e̵ ̵u̵p̵ ̵t̵o̵ ̵d̵a̵t̵e̵ ̵a̵s̵ ̵W̵o̵r̵k̵b̵o̵x̵ ̵3̵ ̵r̵e̵a̵c̵h̵e̵s̵ ̵a̵ ̵s̵t̵a̵b̵l̵e̵ ̵r̵e̵l̵e̵a̵s̵e̵.̵

Workbox 3.0.0 был выпущен 14 марта 🎉

🤔 Почему Workbox?

Раньше я использовал sw-precache и sw-toolbox при работе с Progressive Web Apps. Однако, услышав об этом на последнем саммите разработчиков Chrome и теперь, когда я увидел Workbox 3, я так взволнован, чтобы переключиться, поскольку Workbox 3 фокусируется на обеспечении лучшей модульности, мощной поддержки отладки при сохранении библиотеки размер маленький 😍.

💻 Следуйте за

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

Это тот же подход, который мы с Николь Саиди применяем, когда представляем PWAworkshop.com на конференциях и в частных компаниях. Вот почему в подготовленном мной репозитории есть папка build, которая имитирует результат работы инструмента сборки.

Мы опускаем здесь этап сборки, чтобы убедиться, что вы понимаете, как работает рабочая панель.

Итак, чтобы следовать этому руководству, начните с клонирования этого репозитория и установки его зависимостей:

Единственная устанавливаемая нами зависимость - это http-server, который позволит вам обслуживать ваше приложение в браузере.

Вот структура папок, которая у нас есть на данный момент:

.
├── build
│   ├── css
│   │   └── app.css
│   ├── index.html
│   └── js
│       └── app.js
└── package.json

🔗 Установить рабочий ящик

Начнем с установки последней предварительной версии Workbox-cli.

npm install workbox-cli --save-dev

Я предпочитаю устанавливать библиотеки локально, а не глобально, чтобы избежать неожиданных проблем при работе над несколькими проектами.

Итак, поскольку мы установили рабочий ящик локально, теперь вы можете вызвать его с помощью npx

npx workbox (а не простоworkbox).

🎩 Мастер Workbox

Первая команда Workbox, которую мы собираемся выполнить, - это wizard.

workbox wizard сканирует ваш каталог и задает вам ряд вопросов, чтобы создать workbox-config.js, который будет использоваться позже при каждом вызове workbox.

npx workbox wizard

и теперь workbox задаст вам ряд вопросов.

Ответьте да на все вопросы, поскольку все значения по умолчанию имеют смысл, и вы можете просто отредактировать файл позже, если вам нужно.

Теперь у вас будет workbox-config.js в корне, содержащий следующую конфигурацию:

🏋️‍ Workbox generateSW

Эта команда workbox прочитает ваш workbox-config.js и сгенерирует файл service-worker, который предварительно кэширует файлы на основе globPatterns, который мы получили от мастера workbox: **/*.{css,html,js}.

npx workbox generateSW workbox-config.js

Зарегистрируйте сервис-воркер

Теперь, когда файл сервис-воркера был сгенерирован, мы должны его зарегистрировать.

Итак, перейдем к index.html и добавим следующий фрагмент кода перед закрывающим тегом основного текста:

Подавать

Теперь обслуживайте свое приложение, запустив npm run serve и перейдите по адресу http: // localhost: 8080 / в своем браузере.

Вуаля! На вкладке Сеть в Инструменты разработчика Chrome вы можете увидеть запросы, сделанные сервис-воркером, помеченные значком ⚙️ в начале. Workbox будет загружать помощники .dev.js только при локальной разработке.

Workbox также запросит index.html, app.css и app.js с определенным параметром workbox-cache-buest, чтобы убедиться, что вы используете последнюю версию. ваших активов.

Вы также можете проверить эти предварительно кэшированные ресурсы, перейдя в Приложение ›Cache Storage (вам может потребоваться щелкнуть правой кнопкой мыши и обновить) › workbox-preache.

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

Перейти в автономный режим!

Вернитесь на вкладку Сеть и отключитесь от сети.

Перезагрузите страницу, и вы увидите, что по-прежнему получаете ответ для index.html, app.js и app.css. Это потому, что они предварительно кэшированы и обслуживаются даже в автономном режиме.

💉 Workbox injectManifest

Как видите, весь файл сервис-воркера теперь создается Workbox. Но что, если вы хотите что-то изменить? Что делать, если вы хотите добавить одну строчку? Добавить офлайн-аналитику?

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

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

Итак, нам нужен source service worker файл, который будет использоваться для генерации окончательного сервис-воркера.

Давайте создадим файл src-sw. js в корне вашего проекта и напишем рядом с ним следующий код:

Итак, мы импортируем рабочий ящик из CDN, добавляем некоторый собственный код (пока это просто журнал консоли), а затем добавляем заполнитель: workbox.precaching.precacheAndRoute([]);.

Workbox сгенерирует массив предварительного кэширования и вставит его в эту строку кода: workbox.precaching.precacheAndRoute([]);, сохраняя при этом остальную часть кода нетронутой.

Теперь в workbox-config.js добавьте следующую строку:

"swSrc": "src-sw.js"

У вас должна получиться такая конфигурация в своем workbox-config.js:

Теперь просто запустите: npx workbox injectManifest

А вот сгенерированный сервис-воркер, который вы получите:

🛣 Маршрутизация рабочих ящиков

До сих пор мы выполнили предварительное кэширование, когда даем команду workbox добавить некоторые ресурсы в кеш, потому что мы будем использовать их позже.

Но как насчет динамических ресурсов? Что делать, если вы вызываете конкретный API и хотите кэшировать его ответ?

А вот и задача маршрутизации Workbox, которая позволяет вам определять регулярное выражение, которое соответствует конкретному запросу с стратегией.

Вы можете определить свою собственную стратегию, но в большинстве случаев вы будете использовать одну из трех уже существующих:

Вы можете найти более подробное объяснение того, как они работают, в документации по стратегиям рабочего окна.

Если вы посмотрите на build/js/app.js, у нас есть fetch запрос к https://jsonplaceholder.typicode.com/users, поэтому для кеширования результатов этой ссылки я собираюсь использовать cacheFirst и зарегистрируйте маршрут, используя регулярное выражение, соответствующее URL-адресу, а именно:

new RegExp('https://jsonplaceholder.typicode.com/users').

Теперь просто зарегистрируйте маршрут, как показано ниже, в файле src-sw.js, поместив его под console.log('this is my custom service worker');.

И давайте повторно сгенерируем файл сервис-воркера, запустив npx workbox injectManifest.

Я рекомендую вам взглянуть на недавно созданного сервис-воркера в build/sw.js, просто чтобы убедиться, что вы укрепляете эти концепции в своей голове.

Подавать

Если вы прекратили обслуживание своего приложения, вы можете сделать это снова, запустив npm run serve.

Затем перезагрузите страницу один раз, чтобы получить нового работника службы, затем перезагрузите ее еще раз, чтобы кэшировать ответ /users в кеше (используя новый код работника службы), а затем перейти в автономный режим.

Узнайте, как fetch запрос к /users обслуживается из кеша.

🚀 Готово!

Теперь вы готовы глубже погрузиться в рабочую среду и создать отличные PWA.

Большое спасибо основной команде Workbox за создание потрясающей библиотеки.

Джеффри Посник, Мэтт Гонт, Эдди Османи, Филип Уолтон, ПРАТИК БХАТНАГАР и Кейси Басков

Ознакомьтесь с моими интерактивными курсами:

Вы ищете введение в Progressive Web Apps, прежде чем приступить к работе с Workbox? Тогда посмотрите серию видео ниже!