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

Workbox — это набор библиотек, который предоставляет нам простой способ написания прогрессивных веб-приложений. Workbox разработан и поддерживается разработчиками Google. Прогрессивные веб-приложения помогают нам создавать быстрые, интегрированные, надежные и автономные веб-приложения.

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

Прогрессивные веб-приложения улучшили производительность мобильного Интернета. Он может предоставить ту же функцию, что и нативные приложения. Средний размер нативных приложений будет варьироваться от 25 до 100 МБ, в то время как PWA может достигать этого размера от 200 КБ до 1 МБ. PWA может автоматически обновляться в фоновом режиме.

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

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

Почему рабочий ящик?

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

Предварительное кэширование…. Кэширование во время выполнения…. Маршрутизация запроса… Фоновая синхронизация

Workbox в основном используется для вышеупомянутых функций. Он предоставляет действительно хорошие функции отладки.

Есть три способа использования рабочего ящика в наших приложениях. Мы не собираемся использовать какие-либо фреймворки в посте. Форкнуть мой репозиторий 👈🏻 👈🏻👈🏻 . Следуйте инструкциям в README.md, чтобы проверить ветку starter-files.

Структура проекта и демонстрация

Нам не нужно беспокоиться о файлах README.md и package.json (потому что мы не будем использовать их в сегодняшней демонстрации).

В проекте три основных файла. index.html, index.css, app.js. Если вы посмотрите на index.html, он импортирует CSS (index.css) и JS (app.js). Ниже GIF показана демонстрация нашего текущего приложения, которое не поддерживает автономный режим. Я включил автономный режим, включив параметр автономного режима на вкладке сети в инструментах разработчика Chrome (откройте его с помощью Щелкните правой кнопкой мыши ➡️ Выберите «Проверить» или с помощью Command+Option+I или >Control+Shift+I).

Сегодняшняя цель — предварительно кэшировать все наши активы, такие как html, css и js, в браузере с помощью сервисного работника с помощью workbox. Начнем с рабочего ящика

Давайте установим workbox-cli с помощью npm. Это займет несколько минут, чтобы завершить установку.

Поскольку мы установили workbox-cli, теперь мы можем выполнять некоторые команды, которые преобразуют наше обычное приложение в PWA.

Это основные команды, которые вы можете запускать с помощью workbox.

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

Нам нужно запустить workbox generateSW workbox-config.js, чтобы создать файл sw.js (служебный рабочий файл).

Наконец, мы создали все файлы, необходимые для предварительного кэширования наших ресурсов в браузере. Нам нужно добавить файл sw.js в конец файла HTML (index.html)

Все сделано сейчас. Давайте теперь посмотрим, как наше приложение работает в автономном режиме.

Он отлично работает 🙌 в автономном режиме 🎉🎉🎉. Все наши файлы HTML, CSS и JS предварительно кэшируются с помощью сервисного работника.

Когда вы впервые загружаете файл HTML. Вы бы заметили следующие строки в консоли

Как описано, он предварительно кэшировал наши активы. Теперь вы можете заметить, что еще один сетевой вызов sw.js из нашего index.html

В нашей последней демонстрации я включил автономный режим на вкладке «Сеть» и нажал кнопку «Обновить».

Все активы отвечают из локального хранилища, а не из сети. Таким образом, это сценарий хорошо выполненной работы.

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

В следующем посте серии мы увидим

  1. Кэширование динамического маршрута
  2. Управление вызовами сетевой выборки
  3. Фоновая синхронизация
  4. Включение уведомлений

Итак, следите за дальнейшими сообщениями

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

  1. https://developers.google.com/web/fundamentals/
  2. https://developers.google.com/web/ilt/pwa/introduction-to-service-worker
  3. https://www.youtube.com/watch?v=NITk4kXMQDw&t=19s
  4. Роуд-шоу PWA
  5. https://medium.com/@deepusnath/4-points-to-keep-in-mind-before-introduction-progressive-web-apps-pwa-to-your-team-8dc66bcf6011

Вы узнали что-то новое? Хотите обсудить со мной? Спроси меня о чем угодно @twitter @AvinashSivaram