Вы находитесь на странице: 1из 45

SPEED, CONSISTENCY

AND USABILITY
20 ИЮЛЬ ‘19
КИРИЛЛ
ХОЛОПКИН
Experience Designer
AGENDA
01 PWA - это вообще что?

02 Зачем кому-то это использовать?

03 Как заставить PWA работать?

04 Что для разработчиков и дизайнеров?

05 А пользователю это зачем?

06 Нотка футуризма

!3
01
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

… - методология разработки, в которой сочетаются приемы веб-


разработки и нативных приложений.

2007 2010 2013 2015 2016 2017

!4
01
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

- методология разработки, в которой сочетаются приемы веб-


разработки и нативных приложений.

2007 2010 2013 2015 2016 2017

!5
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

2007 2010 2013 2015 2016 2017 2019

!6
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

2007 2010 2013 2015 2016 2017 2019

!7
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

2007 2010 2013 2015 2016 2017 2019

!8
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

2007 2010 2013 2015 2016 2017 2019

!9
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

2007 2010 2013 2015 2016 2017 2019

!10
ЧТО ЭТО ВООБЩЕ ТАКОЕ?

2007 2010 2013 2015 2016 2017 2019

!11
02
ЗАЧЕМ КОМУ-ТО ЭТО
ИСПОЛЬЗОВАТЬ?
"Создание высококачественного Progressive Web
App имеет невероятные преимущества, позволяя
легко радовать пользователей, расширять
взаимодействие и повышать конверсию." ©
Google

2007 2010 2013 2015 2016 2017 2019

!12
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

КОНСИСТЕНТНОСТЬ
Использование одинакового функционала
для всех устройств.

!13
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

БЕЗОПАСНОСТЬ
Только защищенное подключение HTTPS.

!14
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

СКОРОСТЬ
Клюнь к скорости - асинхронное
выполнение задач приложения.

!15
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

OFFLINE-ДОСТУП
PWA позволяет использовать сохраненные
данные вашего приложения для запуска без
подключения к сети.

!16
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

G̶ O̶ O̶ G̶ L ̶E ̶ P ̶L ̶A̶ Y̶ A̶ P ̶P ̶ S ̶ T̶O̶ R̶E ̶


Использование PWA позволяет обойти
публикацию приложения в магазин.

!17
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

СКОРОСТЬ ОБНОВЛЕНИЙ
Пользователь вообще не участвует в
процессе обновления приложения.

!18
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

PUSH-NOTIFICATIONS
Через PWA легче склонить пользователя
подписаться на пуши.

!19
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

SEARCHABILITY
PWA будет находится в поисковой выдаче
Google выше других сайтов.

!20
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

TWITTER
• На 65% больше просмотров страниц

• На 75% больше отправленных твитов

• На 20% меньше показатель отказов

• Вес приложения 3% от веса приложения на


Android

!21
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

TINDER
• Вес приложения уменьшился с 30Мб до
2.8Мб

• Количество свайпов больше в веб версии,


чем в приложении

• Переписок в веб версии больше, чем в


приложении

• Время проведенное в приложении больше

• Покупки совершаются аналогично


нативному приложению
!22
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

OLX
• На 23% ускорили скорость загрузки

• На 80% меньше показатель отказов

• На 250% увеличили повторное вовлечение


пользователей


90% трафика на сайт идет через мобильные
устройства - соотношение приложения к
сайту 50/50

!23
ЗАЧЕМ КОМУ-ТО ЭТО ИСПОЛЬЗОВАТЬ?

ALIEXPRESS
• На 104% увеличили конверсию новых
пользователей (на всех браузерах)

• На 82% увеличили конверсию


пользователей на iOS

• В 2 раза больше посещенных страниц за


сеанс

• На 74% увеличили время сессии для всех


браузеров

!24
03
КАК ЗАСТАВИТЬ PWA РАБОТАТЬ?

MANIFEST
SERVICE WORKERS

WEBASSEMBLY
WEB STORAGE

APPCACHE

!25
04
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И
ДИЗАЙНЕРОВ?

!26
Gal Shir | on dribbble.com

ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ЧТО ПОЛУЧИТ
РАЗРАБОТЧИК

ВРЕМЯ
За счет использования одной технологии
для разных устройств, сокращается время
разработки.

!27
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ЧТО ПОЛУЧИТ
РАЗРАБОТЧИК

ПОДХОД
PWA использует одну базу кода, что
позволяет вести разработку и поддержку
эффективнее.

!28
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ЧТО ПОЛУЧИТ
ДИЗАЙНЕР

ВРЕМЯ
Дизайн PWA опирается на возможности
отображения стандартных элементов для
системы или полностью кастомных.

!29
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ЧТО ПОЛУЧИТ
ДИЗАЙНЕР

ТЕСТИРОВАНИЕ
Проектирование и запуск тестов работаю
аналогично веб сайту, что упрощает
процедуру их проведения.

!30
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ЧТО ПОЛУЧИТ
ДИЗАЙНЕР

ВОЗМОЖНОСТИ
PWA может стать отличной площадкой
валидация идей.

!31
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ВАЖНО ПОМНИТЬ

ВИЗУАЛЬНЫЙ ОТКЛИК
Не стоит забывать об ответе на действия
пользователей, например нажатую кнопку.

!32
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ВАЖНО ПОМНИТЬ

СКРОЛЛИНГ С ПРЕПЯТСТВИЯМИ
Частая боль пользователя - случайные
нажатия при скролле.

!33
ЧТО ДЛЯ РАЗРАБОТЧИКОВ И ДИЗАЙНЕРОВ?

ВАЖНО ПОМНИТЬ

СТАРШИЙ БРАТ
Нельзя забывать про десктоп.

!34
05
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

!35
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

ЭКОНОМИЯ МЕСТА
PWA приложения могут занимать более чем
в 10 раз меньше места на устройстве в
сравнении с нативными приложениями.

!36
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

СКОРОСТЬ ЗАПУСКА
Статистика сервиса Neumob за 2017
говорит, что доля приложений на Android и
iOS, которые запускаются менее чем за 2
секунды - 53% и 46% соответсвенно.

!37
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

БЫСТРАЯ УСТАНОВКА
Пользователю не нужно искать ваше
приложение в магазине, он может просто
установить на рабочий стол значок сайта.

!38
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

КОНТРОЛЬ
В отличии от нативных приложений, PWA
имеет уровень доступа к личной
информации установленный браузером.

!39
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

БЫСТРОЕ ОБНОВЛЕНИЕ
Пользователь вообще не заметит процесс
обновления вашего приложения.

!40
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

НЕ ВСЕ ТАК ГЛАДКО

ОГРАНИЧЕННАЯ ДОСТУПНОСТЬ
PWA можно устанавливать только через
Google Chrome на Android и десктопе, и
только через Safari для iOS устройств.

!41
А ПОЛЬЗОВАТЕЛЮ ЭТО ЗАЧЕМ?

ПОДДЕРЖИВАЕТСЯ НЕ ПОДДЕРЖИВАЕТСЯ

ГЕОЛОКАЦИЯ
 КОНТАКТЫ

КАМЕРА
 КАЛЕНДАРЬ

АУДИО ВЫХОД/ВХОД SMS

ПЛАТЕЖНЫЕ СИСТЕМЫ NFC

PUSH-NOTIFICATION ВСПЫШКА

СЛОЖНЫЕ ДАТЧИКИ

ПРИЛОЖЕНИЕ ПО УМОЛЧАНИЮ
!42
06
НОТКА ФУТУРИЗМА

“… - портативный инструмент для создания красивых,


скомпилированных в естественном виде приложений для
мобильных устройств, веб-приложений и настольных ПК из единой
кодовой базы.” © Google

!43
ЗДЕСЬ И СЕЙЧАС

!44 https://go.glideapps.com/
DRITEL_

KHOLOPKIN

ВОПРОСЫ
И ОТВЕТЫ