Это вторая статья из серии PWA. В первой статье мы увидели, как вы можете добавить значок «Добавить на главный экран» в свое приложение PWA.

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

В этой статье мы изучим основу PWA - Service worker. Они помогают создавать наш PWA - быструю автономную поддержку, push-уведомления, постоянное представление обновленного контента и многое другое.

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

  1. Стоимость данных
  2. Размер приложения

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

PWA - благо не только для пользователя, но и для разработчиков и менеджеров по продуктам. Хотите знать, как? Магия в том, что сервисные работники

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

[Дополнительное примечание: объявила ли IOS о поддержке Service worker?]

Что такое обслуживающий персонал?

Service worker - это сценарий, который ваш браузер запускает в фоновом режиме, отдельно от веб-страницы, открывая доступ к функциям, которым не нужны веб-страница или взаимодействие с пользователем. Такие как push-уведомления, фоновая синхронизация, автономная поддержка и т. Д.

но APICache был раньше сервис-воркеров !!

Зачем они нам?

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

Самое замечательное в ПО - это чистый JS, работающий на стороне клиента.

Понять монстра

  • это рабочий JS, поэтому он не может вмешиваться и манипулировать DOM. Вы можете отправлять сообщения с помощью POSTMessage API
  • Service worker - это программируемый сетевой прокси, позволяющий контролировать обработку сетевых запросов с вашей страницы.
  • Он прерывается, когда не используется, и перезапускается, когда это необходимо, поэтому вы не можете полагаться на глобальное состояние в обработчиках onfetch и onmessage сервис-воркера.
  • Если есть информация, которую необходимо сохранять и повторно использовать при перезапусках, сервис-воркеры действительно имеют доступ к IndexedDB API.

[Вы знаете, что с PWA тоже можно использовать workbox?]

Жизненный цикл ПО

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

  • Поддержка браузера
  • регистр
  • Активировать
  • Принести

Код Время

Поддержка браузера №1 и регистрация

Это первый шаг. Вам нужно проверить, доступен ли сервис-воркер или нет, и как мы можем постепенно обрабатывать резервные копии. Как только поддержка станет доступна, зарегистрируйте serviceWorker.js.

Скопируйте этот код в нижнюю часть своей страницы index.html в теги скрипта.

Имя кеша №2

Создайте файл js и назовите его serviceWorker.js. Это единственный выделенный файл, в который будет помещен весь ваш код, связанный с обслуживающим персоналом.

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

Важно: вам необходимо обновлять cachename каждый раз, когда вы вносите изменения в serviceWorker.js.

В строке 2 я поместил все свои файлы, которые я хотел кэшировать. Это массив. Вы можете поместить туда свои файлы.

Совет. Начните с index.html, файла css и offline.html (он будет содержать сообщение, что вы не в сети).

# 3 Установка

Как только сервис-воркер станет доступен в браузере и файл serviceWorker.js будет зарегистрирован. Следующее, что мы сделаем, это установим. Это случается только один раз. Он также открывает кеш и добавляет все файлы, которые мы упомянули в списке файлов. На этом этапе мы создали собственный кеш.

# 4 Активировать

Как только ваш кеш будет готов, следующим событием будет его активация. Сервисный работник не будет получать такие события, как fetch и push, пока он не завершит установку и не станет «активным».

# 5 Fetch

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

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

Поддержка браузера

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

Отметьте здесь

В следующем посте мы увидим, как собрать все воедино и как внедрить ПО в приложение. Если вам понравилось, хлопайте в ладоши. Поделитесь своими мыслями.

Следуйте за мной на twitter.com/hellonehha