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

Кузнецов Андрей,
фронтендр разработчик,
BPC Group

Бум мобильных приложений закончился

Каждый год скачивания падают на 20%

Нужно искать и устанавливать

Средний размер приложения 23 Мб

И часто требуют еще что-то докачать после установки

Их нужно удалять и обновлять

Разные платформы

Progressive Web Application (PWA)

Это сайт
Устанавливается
Выглядит как нативное приложение
Способен работать в оффлайн
Способен присылать пуш-уведомления

Какие плюшки от PWA?

Простота в разработке
Нет костылей. Либо работает, либо не работает :)
Решен вопрос с SEO
Windows Store

Для бизнеса

Кроссплатформенность
Маленький вес
Установку предлагает браузер
Моментальная установка
Пользователю не нужно обновлять

Про технологии

Прогрессивное приложение подразумевает

Отзывчивый / адаптивный дизайн
Веб манифест
Автономный режим
Только HTTPS
Веб API, такие как пуш-уведомления

Веб манифест

			{
				"lang": "ru",
				"name": "Progressive Web Application",
				"short_name": "PWA Demo",
				"description": "Это тестовое Progressive Web Application",
				"icons": [{
					"src": "./img/icon/app-icon.png",
					"sizes": "64x64",
					"type": "image/png"
					}, ..., {
					"src": "./img/icon/app-icon-256.png",
					"sizes": "256x256",
					"type": "image/png"
				}],
				"start_url": "/docsite/",
				"display": "standalone", /* fullscreen, minimal-ui, browser */
				"orientation": "portrait-primary"
			}

Подключение

			<link rel="manifest" href="manifest.json">

Что с поддержкой?

Firefox на подходе

Установка

Не требуется. При этом, браузеры мобильных устройств сами предложат добавить иконку на рабочий стол.

Сохранить иконку сайта можно и в Safari: Поделиться -> На экран “Домой”

Автономный режим

Service worker

AppCache

Сервис-воркеры

Независимый процесс
Проксирование запросов
Кэширование ресурсов
Кэширование ответов
Отложенные запросы
Автообновление
В общем крутая штука!

serviceworke.rs

Что с поддержкой?

Пуш-уведомления

Уведомления от сервера пользователю
Используют сервис-воркеры
Даже когда приложение закрыто
Нужно разрешение
Как нативные

WEB API

WebStorage
Video & Audio
Canvas
WebGL
Geolocation
Web sockets
Full Screen

Device Orientation
Screen Orientation
Battery Status
Ambient Light Sensor
Vibration API
Web bluetooth
Payments

Network Information
Web Push
Camera
...

Web API

Недостатки PWA

Свежий подход
Нет поддержки сервис-воркеров у webkit

Cистема для проверки качества PWA

Lighthouse

Демо

Фитнес трекер Iwown I5 plus

			07-26-01-00-17-01-00-10-00-00 // => 294
			07-36-01-00-29-01-00-11-00-00 // => 310
			07-70-01-00-5С-01-00-14-00-00 // => 368
			07-08-05-00-2С-04-00-49-00-00 // => 1288

			07-26-01-00-17-01-00-10-00-00 // => 294
			07-36-01-00-29-01-00-11-00-00 // => 310
			07-70-01-00-5С-01-00-14-00-00 // => 368
			07-08-05-00-2С-04-00-49-00-00 // => 1288

			
				0126 => 294
				0136 => 310
				0170 => 368
				0508 => 1288

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

	@AndreyKuznecov
	https://github.com/chakveselchak/Progressive-Web-Application-Demo