В 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.

PWA на iOS

5010.667 3.208видео

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

Не забывайте про замеры и оптимизацию

• 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