chrome push notifications. Анатомия и разработка
TRANSCRIPT
![Page 1: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/1.jpg)
Обзор Web Push Notifications. Пишем свое решение.
![Page 2: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/2.jpg)
Jeapie • Занимаемся только push-уведомлениями с 2013• Более 500 млн персонализированных сообщений• Выпустили сервис Chrome web push для сайтов в открытую
бету 10.06.2015
![Page 3: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/3.jpg)
Термин Push• Короткие• Добровольные• Технически заложена отписка• Содержат вшитую ссылку
![Page 4: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/4.jpg)
Хронология событий17 июня 2009 - APNS release20 мая 2010 - GCM релиз4 октября 2012 - Mac OS поддержка APNS22 октября 2013 - Safari push уведомления1 декабря 2014 - Service workers15 апреля 2015 - Chrome 42 push
![Page 5: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/5.jpg)
Chrome push
![Page 6: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/6.jpg)
Ключевые особенности
● Приходят даже если вкладка с сайтом закрыта
● Приходят даже если окно браузера закрыто● Экономичны с позиции заряда устройства● Не требуют установки дополнительного ПО
![Page 7: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/7.jpg)
![Page 8: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/8.jpg)
![Page 9: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/9.jpg)
![Page 10: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/10.jpg)
![Page 11: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/11.jpg)
![Page 12: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/12.jpg)
![Page 13: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/13.jpg)
![Page 15: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/15.jpg)
Стандарт
http://www.w3.org/TR/push-api/ (последняя редакция 27 апреля 2015)
![Page 16: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/16.jpg)
Поддержка Технологии
Service Workers Web Push
Chrome
Yandex
Firefox
Safari
Opera
IE
![Page 17: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/17.jpg)
Компоненты Chrome Web Push
• manifest.json - лежит в корне, указывается в <head> соддержит ProjectNumber, по нему генерирутся токены
• service-worker.js - лежит в корне сайта, отвечает за прием и обработку пуш (кешируется в браузер пользователю)
• js-сниппет - в layout сайта, проверяет все ли ок? и вызывает окно подписки
![Page 18: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/18.jpg)
Требования
• Google Chrome 42+ у пользователя• SSL-сертификат у домена (https://)
![Page 19: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/19.jpg)
Токены
• Уникальный идентификатор устройства• Уникален для данного домена, ProjectNumber и браузера• Может “устаревать” и меняться (к примеру при отписке\
подписке)
![Page 20: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/20.jpg)
Шаг №1. Получаем ключи
https://code.google.com/apis/console
![Page 21: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/21.jpg)
Шаг №2. Создаем manifest.json
в <head> вставляем ссылку
![Page 22: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/22.jpg)
Шаг №3. Пишем service-worker
В нем находится обработка событий1. Событие получения notification2. Событие открытия notificationОн кешируется при первом заходе, запускаетcя при получении событий, работает в фоне некоторое время (50ms)
![Page 23: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/23.jpg)
Особенность(!!) Chrome Push
В версиях Chrome 42-43 пуш не содержит ни текст уведомления ни идентификатор уведомления.
Поэтому приходится на сервере держать очередь пушей для каждого токена. И делать запрос на сервер при каждом приходе пуша.
![Page 24: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/24.jpg)
Шаг №4. js-сниппет
• Поддерживает ли браузер пуш• Поддерживает ли браузер сервис воркеры (Opera fail)• Регистрируем сервис-воркер• Не запретил ли пользователь прием пуш-уведомлений• Вызываем окно подписки
![Page 25: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/25.jpg)
Шаг №5
● Сохраняем токен на бекенде после получения согласия● Можем отправлять пуш используя GCM API (ключ для
авторизации) при помощи обычных http запросов
![Page 26: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/26.jpg)
Шаг №6. “Окультурить”
• Инструмент alias (customer_id)• Трекинг доставки Push• utm-метки трекинга перехода по ссылкам• Поддержка http сайтов через виджет• Сегментация по тегам
![Page 27: Chrome push notifications. Анатомия и разработка](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55cab188bb61ebc0488b45a7/html5/thumbnails/27.jpg)
Спасибо за внимание!
Александр МихайленкоCEO
Jeapie
@alexandrmikhfb.com/alexandrmikh