по-настоящему кросс-платформенный опыт

Максим Сальников

@webmaxru

Прогрессивные веб-приложения:

Есть ли шанс у веба стать по-настоящему универсальной платформой для всех типов устройств

Спойлер: ДА!

Максим Сальников

  • Организатор Mobile / Web / PWA митапов в Осло и Лондоне

  • Организатор конференций Mobile Era и ngVikings в Скандинавии

  • Ответственный за поток о веб-разработке 404fest в Самаре

Ответственный за успех Azure-разработчиков в Microsoft

Мобильная платформа:

2,7 млрд плюсов

  • Требуется как минимум две команды разработчиков

  • Существующие решения для кросс-платформенной разработки — вынужденный компромисс

  • Бойкот магазинами приложениям, построенным с помощью шаблонов и конструкторов

Дорого и долго разрабатывать приложения

}

Разработка приложений

  • Около 2/3 приложений не были установлены ни разу

  • Более половины пользователей устанавливает 0 (ноль) приложений в месяц

  • Более 90% доходов на этом рынке делят менее 1% его участников

Магазины приложений

}

Долго и дорого привлекать новых пользователей

А если попробовать веб?

  1. The World Wide Web is the New Software Platform

  2. The Web Browser is the New Operating System

  3. JavaScript is the de facto Programming Language of the Web 

Январь, 2008

Chris Anderson, Wired, 2010

As much as we love the open, unfettered Web, we're abandoning it for simpler, sleeker services [native apps] that just work

The biggest mistake we’ve made as a company is betting on HTML5 over native.

Mark Zuckerberg

Каков веб сегодня?

Веб – отличная платформа для приложений

Браузеры

  • Почти на каждом устройстве с UI

  • Автообновляемые

  • API для доступа к аппаратным ресурсам

  • API для аутентификации и платежей

JavaScript

Браузеры

  • Разносторонний язык

  • Мощный инструментарий

  • Поступательно развивается в правильном направлении

Веб – отличная платформа для приложений

JavaScript

Движки JS

Браузеры

  • Курс на производительность

  • Возможности встраивания

Веб – отличная платформа для приложений

JavaScript

Движки JS

Интерфейсы

Браузеры

  • Удобные инструменты для создания адаптивных интерфейсов

  • Повышенное внимание доступности

  • Разнообразие высококачественных библиотек компонентов

Веб – отличная платформа для приложений

Сообщество

JavaScript

Движки JS

Интерфейсы

Браузеры

69.7%

Веб – отличная платформа для приложений

Сообщество

JavaScript

Движки JS

Интерфейсы

Браузеры

Проблемы?

  • Завязан на состояние подключения к сети

  • Зажат рамками браузера, приложения не выходят на уровень ОС

Веб – отличная платформа для приложений

Аудитория / Лояльность

Еще одно определение PWA

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

Эти приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.

Онлайн больше не обязателен

Установка без хлопот  

Получение уведомлений

Service Worker API

Web App Manifest

Новые преимущества?

Полноценное приложение

}

}

работают везде*

* но не все возможности доступны везде**

нативно

** применяем стратегию прогрессивного улучшения

Отличные JS-to-Native фреймворки

... будут не нужны

Поддержка со стороны фреймворков

  • sw-precache / sw-toolbox

  • Workbox

  • offline-plugin for Webpack

  • PWABuilder.com

  • create-react-app

  • preact-cli

  • polymer-cli

  • vue-cli

  • angular-cli

Библиотеки

  • Lighthouse

  • Webhint

Линтеры

App shell

Runtime caching

Offline GA

Replay failed requests

Broadcast updates

Build integrations

Возможность расширить ваш собственный сервис воркер вместо использования сгенерированного 

Manifest checker & generator

Service worker builder

Manifest icons generator

Создание проектов, необходимых для создания нативных приложений

npm install -g hint

hint https://airhorner.com
npm install -g lighthouse

lighthouse https://airhorner.com

PWA "Store"

Трудности?

Изменения спецификаций

Настороженность к нововведениям

PWA Feature Detector

Уровень поддержки стандартов

Отсутствие дорожной карты

Отсутствие дорожной карты

Истории успеха

  • 3% размера Android-версии

  • 70% экономия трафика 

  • 65% больше страниц за сессию

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

Twitter Lite

  • Приложение весит всего 50k (gzipped) и загружается менее чем за 3 секунды в 2G-сетях

m.uber

  • 17% увеличение конверсии

  • 8% увеличение конверсии сохраненных корзин через push-уведомления

Lancome

  • Starbucks

  • Tinder

  • Google Maps & Search

  • AliExpress

  • Instagram

  • Pinterest

  • Forbes

  • ...

Множество других примеров...

Ближайшее будущее

Gartner:

К 2020 году PWA заменят 50% неспециализированных мобильных приложений

Forrester:

К 2021 в мире будет потрачен $1 трлн на "перезапуск" мобильного веба 

Веб-приложение

Мобильное приложение

Настольное приложение

Прогрессивное приложение

Maxim:

Спасибо!

@webmaxru

Максим Сальников

Есть вопрос?

Made with Slides.com