Post on 12-Jan-2017
В offline и обратно
Денис Ильин Songsterr
2016
О чем поговорим• Философия Progressive Web Apps
• Service Worker: за и против
• Инструменты
• Оптимизация мобильного веба
• Progressive Web Apps для бизнеса
3
4
Веб в 2016
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
Немного теории
1. Прогрессивным
7
Работать с каждым пользователем в не зависимости от окружения используя метод постепенного улучшения как основной принцип работы.
2. Адаптивным
8
Подстраиваться под любое устройство: десктоп, смартфоны, планшеты или что либо другое.
3. Независимым от соединения
9
Используя Service Worker приложение должно работать в оффлайн режиме при прерывании или отсутствии соединения.
4. Выглядеть нативно
10
Приложение должно соответствовать привычным для пользователя способам взаимодействия и навигации.
5. Самообновляемым
11
Приложение должно контролировать процесс автоматического обновления посредством Service Worker API.
6. Безопасным
12
Посредством использования HTTPS предотвращать перехват и подмену данных.
7. Определяемым
13
Посредством W3C манифеста и регистрации через Service Worker приложение идентифицируется как «приложение» поисковыми системами.
8. Удерживающим
14
Используя технические возможности мотивируем пользователя еще раз использовать приложение, например посредством push уведомлений.
9. Легким в установке
15
Позволяет «сохранить» приложение на устройстве посредством добавления PWA в список установленных приложений без использования магазина.
10. Легким в использовании
16
Для начала использования приложения достаточно открыть URL. Позволяет путем смены URL менять состояние приложения.
Я говорю — Progressive Web App, ты думаешь —
Service Worker. Почему так?
17
Service Worker ключевая технология, давшая жизнь PWA (но не единственная)
18
Перейдем к практике
Обычный цикл Service Worker
20
Оффлайн
21
Синхронизация
22
23
F. A. Q.
Что делать браузерам, которые не поддерживают
Service Worker?
25
Делаем fallback на Application Cache
26
Application Cache? Я занимаюсь веб технологиями уже n-лет и ни
разу не слышал о нем!верни мне мой 2010
27
Без трудностей не обойтись
• Проблемы синхронизации.
• POST-запросы не кэшируются.
• Игнорируются http заголовки.
• Нужно дописывать настройки в htaccess.
28
И это лишь малая часть проблем…
Почему нет?
29
Если все сайты захотят иметь свою offline версию,
что будет с кэшем?
30
Варианты ответов:• Место на телефоне заканчивается также, как память в Google Chrome.
• При переполнении браузер падает в забвении и просыпается с чистеньким кешем.
• Сайты бьются за место под солнцем, переодически выталкивая друг друга из кеша.
• Управление кешем ложится на плечи пользователя.
31
Варианты ответов:• Место на телефоне заканчивается также, как память в Google Chrome.
• При переполнении браузер падает в забвении и просыпается с чистеньким кешем.
• Сайты бьются за место под солнцем, переодически выталкивая друг друга из кеша.
• Управление кешем ложится на плечи пользователя.
32
Замеры• 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
Такая возможность есть, но๏ Quota Management Api
• Плохая поддержка
• Сложные синтаксические конструкции
๏ Storage Quota Estimate Api
• Экспериментальное, поддержка в Chrome/Firefox
• PWA ориентированное
• Простые promise-like конструкции
35
Как это всё дебажить?
36
• Service Worker библиотеки
• Developer Tools
• Что ещё я могу сделать?37
sw-toolbox
38
Абстракция над Service Worker, которая без глубокого погружения помогает обеспечить offline приложению
39
40
41
42
43
๏ sw-precache
๏ sw-helpers
• sw-appcache-behavior
• sw-offline-google-analytics
44
Chrome Dev Tools
45
Мы уже приехали?почти
46
Lighthouse
47
Auditing and performance metrics for Progressive Web Apps
Всё конечно хорошо, но iOS не поддерживает PWA. Зачем они мне?
48
Один из аргументов почему организации не вкладываются в PWA
Только потому что iOS не поддерживает все возможности
PWA, не означает, что они не будут работать на iOS.
Раскадровка загрузки веб приложения
Не забывайте про замеры и оптимизацию
• First meaningful paint (время появления основного контента)
• Speed Index (визуальная полнота страницы)
• Estimated Input Latency (готовность обрабытывать пользовательские команды)
• Time To Interactive (полная готовность к взаимодействию)
52доклад про метрики оптимизации PWA от Paul Irish
Используйте:• App Shell
• Chanking & lazy-loading
• Tree shaking & dead code elimination
• HTTP2
• Отложенная инициализация
53
Про бизнес
54
Не все клиенты или потенциальные клиенты имеют ваше нативное приложение
55
Аудитория мобильного веба в 3 раза больше и растет в 2 раза быстрее аудитории приложений
57
Большинство пользователей смартфонов скачивают ноль приложений в месяц
Чем быстрее мобильный веб, тем больше ваша
прибыль
58
Анализ рынка от DoubleClick
«53% посетителей мобильного сайта уходят, если он не загрузится за 3 секунды».
59
60
➡Каждая выигранная секунда скорости загрузки дает 2% увеличения конверсии. ➡Каждые выигранные 100ms увеличивают доход на 1%.
1 из 2 посетителей ожидает загрузки страницы в течении 2х секунд
Пользователи могут извлечь выгоду из offline режима
61
Пользователи могут извлечь выгоду из Push-notification
Немного статистики• Washington Post увеличил ретеншен в 5х раз.
• AliExpress увеличил конверсию на 82% на iOS. В то время, когда общий показатель составил 104%.
• Flipkart увеличил конверсию на 70%
• …ваш проект
63
список можно продолжать ещё долго
Время удивлений!
64
PWA на iOS (AMP Project)
AMP Project
видео
65
Главная причина по которой iOS не должен остановить вас это тот факт,
что шаги, предпринимаемые для создания PWA, принесут пользу всем.
66
Работа над PWA означает фокусировку на производительности. Вы должны убедиться, что UX оптимизирован для
мобильных устройств.
Спасибо за внимание
Вопросы?
69
/gizmoo
@followdarko
/dgizmo