WebCamp:Front-end Developers Day. Александр Михайленко "Обзор библиотек и каналов коммуникации пользователя и веб-приложения"
•Download as PPTX, PDF•
0 likes•361 views
Александр Михайленко (Основатель платформы Jeapie) "Обзор библиотек и каналов коммуникации пользователя и веб-приложения" В докладе будут подробно разобраны различные виды push-уведомлений от веб-приложения пользователю, в том числе свежайшие Google Chrome 42 уведомления, их способ работы, варианты реализации и кейсы применения.
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (17)
Similar to WebCamp:Front-end Developers Day. Александр Михайленко "Обзор библиотек и каналов коммуникации пользователя и веб-приложения"
Similar to WebCamp:Front-end Developers Day. Александр Михайленко "Обзор библиотек и каналов коммуникации пользователя и веб-приложения" (20)
More from GeeksLab Odessa
More from GeeksLab Odessa (20)
WebCamp:Front-end Developers Day. Александр Михайленко "Обзор библиотек и каналов коммуникации пользователя и веб-приложения"
- 1. Обзор Web Push Notifications. Пишем свое решение.
- 2. Jeapie • Занимаемся только push-уведомлениями с 2013 • Более 500 млн персонализированных сообщений • Выпустили сервис Chrome web push для сайтов в открытую бету 10.06.2015
- 3. Термин Push • Короткие • Добровольные • Технически заложена отписка • Содержат вшитую ссылку
- 4. Хронология событий 17 июня 2009 - APNS release 20 мая 2010 - GCM релиз 4 октября 2012 - Mac OS поддержка APNS 22 октября 2013 - Safari push уведомления 1 декабря 2014 - Service workers 15 апреля 2015 - Chrome 42 push
- 5. Chrome push
- 6. Ключевые особенности ● Приходят даже если вкладка с сайтом закрыта ● Приходят даже если окно браузера закрыто ● Экономичны с позиции заряда устройства ● Не требуют установки дополнительного ПО
- 15. Стандарт http://www.w3.org/TR/push-api/ (последняя редакция 27 апреля 2015)
- 16. Поддержка Технологии Service Workers Web Push Chrome Yandex Firefox Safari Opera IE
- 17. Компоненты Chrome Web Push • manifest.json - лежит в корне, указывается в <head> соддержит ProjectNumber, по нему генерирутся токены • service-worker.js - лежит в корне сайта, отвечает за прием и обработку пуш (кешируется в браузер пользователю) • js-сниппет - в layout сайта, проверяет все ли ок? и вызывает окно подписки
- 18. Требования • Google Chrome 42+ у пользователя • SSL-сертификат у домена (https://)
- 19. Токены • Уникальный идентификатор устройства • Уникален для данного домена, ProjectNumber и браузера • Может “устаревать” и меняться (к примеру при отпискеподписке)
- 20. Шаг №1. Получаем ключи https://code.google.com/apis/console
- 21. Шаг №2. Создаем manifest.json в <head> вставляем ссылку
- 22. Шаг №3. Пишем service-worker В нем находится обработка событий 1. Событие получения notification 2. Событие открытия notification Он кешируется при первом заходе, запускаетcя при получении событий, работает в фоне некоторое время (50ms)
- 23. Особенность(!!) Chrome Push В версиях Chrome 42-43 пуш не содержит ни текст уведомления ни идентификатор уведомления. Поэтому приходится на сервере держать очередь пушей для каждого токена. И делать запрос на сервер при каждом приходе пуша.
- 24. Шаг №4. js-сниппет • Поддерживает ли браузер пуш • Поддерживает ли браузер сервис воркеры (Opera fail) • Регистрируем сервис-воркер • Не запретил ли пользователь прием пуш-уведомлений • Вызываем окно подписки
- 25. Шаг №5 ● Сохраняем токен на бекенде после получения согласия ● Можем отправлять пуш используя GCM API (ключ для авторизации) при помощи обычных http запросов
- 26. Шаг №6. “Окультурить” • Инструмент alias (customer_id) • Трекинг доставки Push • utm-метки трекинга перехода по ссылкам • Поддержка http сайтов через виджет • Сегментация по тегам
- 27. Спасибо за внимание! Александр Михайленко CEO Jeapie @alexandrmikh fb.com/alexandrmikh alexandr.mikhaylenko@gmail.com