Это серия публикаций о рабочем ящике и его использовании, состоящая из нескольких частей. В этом посте мы сможем добавить поддержку автономного кеша для нашего текущего веб-приложения с помощью рабочей среды 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
В нашей последней демонстрации я включил автономный режим на вкладке «Сеть» и нажал кнопку «Обновить».
Все активы отвечают из локального хранилища, а не из сети. Таким образом, это сценарий хорошо выполненной работы.
Автономная поддержка нашего приложения включается двумя командами. В этом сила рабочего ящика.
В следующем посте серии мы увидим
- Кэширование динамического маршрута
- Управление вызовами сетевой выборки
- Фоновая синхронизация
- Включение уведомлений
Итак, следите за дальнейшими сообщениями
Если вас смущают такие термины, как сервисный работник и PWA, ознакомьтесь с приведенными ниже статьями, чтобы получить дополнительную информацию.
- https://developers.google.com/web/fundamentals/
- https://developers.google.com/web/ilt/pwa/introduction-to-service-worker
- https://www.youtube.com/watch?v=NITk4kXMQDw&t=19s
- Роуд-шоу PWA
- https://medium.com/@deepusnath/4-points-to-keep-in-mind-before-introduction-progressive-web-apps-pwa-to-your-team-8dc66bcf6011
Вы узнали что-то новое? Хотите обсудить со мной? Спроси меня о чем угодно @twitter @AvinashSivaram