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

1. В offline и обратно
Денис Ильин
Songsterr
2016

3. О чем поговорим
• Философия Progressive Web Apps
• Service Worker: за и против
• Инструменты
• Оптимизация мобильного веба
• Progressive Web Apps для бизнеса
3

4. 4
Веб в 2016

5. Progressive
Web App
1. Progressive
2. Responsive
3. Connectivity independent
4. App-like
5. Fresh
6. Safe
7. Discoverable
8. Re-engageable
9. Installable
10. Linkable
5

6. Немного теории

7. 1. Прогрессивным
7
Работать с каждым пользователем в не зависимости от
окружения используя метод постепенного улучшения как
основной принцип работы.

8. 2. Адаптивным
8
Подстраиваться под любое устройство: десктоп,
смартфоны, планшеты или что либо другое.

9. 3. Независимым от
соединения
9
Используя Service Worker приложение должно работать в
оффлайн режиме при прерывании или отсутствии
соединения.

10. 4. Выглядеть нативно
10
Приложение должно соответствовать привычным для
пользователя способам взаимодействия и навигации.

11. 5. Самообновляемым
11
Приложение должно контролировать процесс
автоматического обновления посредством Service Worker
API.

12. 6. Безопасным
12
Посредством использования HTTPS предотвращать
перехват и подмену данных.

13. 7. Определяемым
13
Посредством W3C манифеста и регистрации через Service
Worker приложение идентифицируется как «приложение»
поисковыми системами.

14. 8. Удерживающим
14
Используя технические возможности мотивируем
пользователя еще раз использовать приложение, например
посредством push уведомлений.

15. 9. Легким в установке
15
Позволяет «сохранить» приложение на устройстве
посредством добавления PWA в список установленных
приложений без использования магазина.

16. 10. Легким в использовании
16
Для начала использования приложения достаточно открыть
URL. Позволяет путем смены URL менять состояние
приложения.

17. Я говорю — Progressive
Web App, ты думаешь —
Service Worker. Почему так?
17

18. Service Worker ключевая
технология, давшая жизнь
PWA (но не единственная)
18

19. Перейдем к практике

20. Обычный цикл Service
Worker
20

21. Оффлайн
21

22. Синхронизация
22

23. 23

24. F. A. Q.

25. Что делать браузерам,
которые не поддерживают
Service Worker?
25

26. Делаем fallback на
Application Cache
26

27. Application Cache? Я занимаюсь
веб технологиями уже n-лет и ни
разу не слышал о нем!
верни мне мой 2010
27

28. Без трудностей не обойтись
• Проблемы синхронизации.
• POST-запросы не кэшируются.
• Игнорируются http заголовки.
• Нужно дописывать настройки в htaccess.
28
И это лишь малая часть проблем…

29. Почему нет?
29

30. Если все сайты захотят
иметь свою offline версию,
что будет с кэшем?
30

31. Варианты ответов:
• Место на телефоне заканчивается также, как
память в Google Chrome.
• При переполнении браузер падает в забвении и
просыпается с чистеньким кешем.
• Сайты бьются за место под солнцем,
переодически выталкивая друг друга из кеша.
• Управление кешем ложится на плечи
пользователя.
31

32. Варианты ответов:
• Место на телефоне заканчивается также, как
память в Google Chrome.
• При переполнении браузер падает в забвении и
просыпается с чистеньким кешем.
• Сайты бьются за место под солнцем,
переодически выталкивая друг друга из кеша.
• Управление кешем ложится на плечи
пользователя.
32

33. Замеры
• Chrome/Opera: без ограничений
• Firefox: без ограничений, но уведомляет при 50Mb
• Mobile Safari: 50Mb
• Desktop Safari: без ограничений, но уведомляет
при 5Mb
• Edge/IE10+: максимум 250Мb, уведомляет при
10Мb
33
https://www.html5rocks.com/en/tutorials/offline/quota-research/

34. Могу ли я узнать
сколько места занимает
мое приложение?
34

35. Такая возможность есть, но
๏ Quota Management Api
• Плохая поддержка
• Сложные синтаксические конструкции
๏ Storage Quota Estimate Api
• Экспериментальное, поддержка в Chrome/Firefox
• PWA ориентированное
• Простые promise-like конструкции
35

36. Как это всё дебажить?
36

37. • Service Worker библиотеки
• Developer Tools
• Что ещё я могу сделать?
37

38. sw-toolbox
38
Абстракция над Service Worker, которая без глубокого
погружения помогает обеспечить offline приложению

39. 39

40. 40

41. 41

42. 42

43. 43

44. ๏ sw-precache
๏ sw-helpers
• sw-appcache-behavior
• sw-offline-google-analytics
44

45. Chrome Dev Tools
45

46. Мы уже приехали?
почти
46

47. Lighthouse
47
Auditing and performance metrics for Progressive Web Apps

48. Всё конечно хорошо, но
iOS не поддерживает
PWA. Зачем они мне?
48
Один из аргументов почему организации не вкладываются в PWA

49. Только потому что iOS не
поддерживает все возможности
PWA, не означает, что они не
будут работать на iOS.

50. PWA на iOS
50
10.667 3.208видео

51. Раскадровка загрузки веб приложения

52. Не забывайте про замеры и
оптимизацию
• First meaningful paint (время появления основного
контента)
• Speed Index (визуальная полнота страницы)
• Estimated Input Latency (готовность
обрабытывать пользовательские команды)
• Time To Interactive (полная готовность к
взаимодействию)
52
доклад про метрики оптимизации PWA от Paul Irish

53. Используйте:
• App Shell
• Chanking & lazy-loading
• Tree shaking & dead code elimination
• HTTP2
• Отложенная инициализация
53

54. Про бизнес
54

55. Не все клиенты или
потенциальные клиенты имеют
ваше нативное приложение
55

56. Аудитория мобильного веба в 3 раза больше и
растет в 2 раза быстрее аудитории приложений

57. 57
Большинство пользователей смартфонов
скачивают ноль приложений в месяц

58. Чем быстрее мобильный
веб, тем больше ваша
прибыль
58

59. Анализ рынка от DoubleClick
«53% посетителей мобильного сайта уходят,
если он не загрузится за 3 секунды».
59

60. 60
➡Каждая выигранная секунда скорости загрузки дает 2%
увеличения конверсии.
➡Каждые выигранные 100ms увеличивают доход на 1%.
1 из 2 посетителей
ожидает загрузки
страницы в течении 2х
секунд

61. Пользователи могут извлечь
выгоду из offline режима
61

62. Пользователи могут извлечь выгоду из Push-
notification

63. Немного статистики
• Washington Post увеличил ретеншен в 5х раз.
• AliExpress увеличил конверсию на 82% на iOS. В
то время, когда общий показатель составил
104%.
• Flipkart увеличил конверсию на 70%
• …ваш проект
63
список можно продолжать ещё долго

64. Время удивлений!
64

65. PWA на iOS (AMP Project)
AMP Project
видео
65

66. Главная причина по которой iOS не
должен остановить вас это тот факт,
что шаги, предпринимаемые для
создания PWA, принесут пользу всем.
66

67. Работа над PWA означает фокусировку
на производительности. Вы должны
убедиться, что UX оптимизирован для
мобильных устройств.

68. Спасибо за внимание

69. Вопросы?
69
/gizmoo
@followdarko
/dgizmo