Это вторая статья из серии PWA. В первой статье мы увидели, как вы можете добавить значок «Добавить на главный экран» в свое приложение PWA.
Спасибо Абхишар Джангир - он добавил пункт, который необходимо защитить, чтобы получать уведомление о поле Добавить на главный экран.
В этой статье мы изучим основу PWA - Service worker. Они помогают создавать наш PWA - быструю автономную поддержку, push-уведомления, постоянное представление обновленного контента и многое другое.
Чтобы пользователь мог использовать приложение, всегда нужно учитывать два основных фактора:
- Стоимость данных
- Размер приложения
Пользователи очень умны и разборчивы в том, что они хотят установить на свой мобильный телефон, а что нет. Разработчики и менеджеры по продуктам нативных приложений каждый день изо всех сил пытаются привлечь трафик к своим нативным приложениям. Они сжимают размер приложения, чтобы освободить место на мобильном телефоне пользователя, но при этом сборка очень высока.
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