+7 (983) 315-86-66 support@sharkdevelop.com
English EN Français FR Русский RU

Progressive Web Apps – это просто

| 9 Янв 2019 | Клиентам, Разработчикам

Интерес к разработке приложений для мобильных операционных систем стабильно растёт, количество инструментов и подходов, позволяющих создавать приложения, становится всё больше. Сегодня мы расскажем вам об одном из новых подходов, а именно о Progressive Web Apps.

Progressive Web Apps

Когда изменения происходят постепенно, шаг за шагом, порой бывает трудно заметить насколько они драматичны и всеобъемлющи. Казалось бы всего несколько лет назад web платформа проигрывала нативным приложением практически по всем фронтам, и пропасть между тем, что можно было сделать в браузере, и тем, что было доступно приложениям, загружаемым из магазинов, таких как Apple App Store или Google Play Store, была ужасающе огромной.

Многое изменилось с тех пор, и web технологии на месте не стояли. Они шли по пути снятия ограничений, и то, что раньше было принципиально невозможно — работа оффлайн, фоновая синхронизация данных, push-нотификации, поддержка входа в один клик и оплата с помощью кредитных карт, Apple Pay, Google Pay и других методов, встроенная в браузер — теперь реальность. Эти функции органично дополняют основную часть платформы — HTML/CSS и JavaScript, которая в последние годы развивалась более чем активными темпами.

Понятие Progressive Web Applications (далее PWA) на слуху давно. С весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA, несмотря на очевидные их «плюсы», пока очень низка.

Специалисты Google очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.

Философия PWA

Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться как «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника, так и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому, что где-то внутри него бьется горячее сердце работника сферы услуг (service worker’a).

Относительность PWA заложена в самом названии — «прогрессивное». Прогрессивный сравнительно с чем и в какой мере? Но эта относительность, на самом деле, очень хороша, потому что изучать технологии PWA и применять их в своих текущих проектах можно постепенно, без глобального ремоделинга и рефакторинга.

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

Архитектура PWA

PWA — это веб приложение, созданное с использованием определенных технологий для достижения заданных целевых показателей.

Progressive Web Apps. Технологии и Целевые показатели.

Целевые показатели расшифровываются следующим образом:

  • Надежность (Reliable) — приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
  • Быстрота (Fast) — взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
  • Привлекательность (Engaging) — делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…

С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.

Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», при необходимости работать оффлайн). Насколько далеко продвинется по этому пути разработчик зависит только от него.

PWA и нативные приложения

То, что PWA внешне похожи на нативные приложения, является, скорей, косметическим решением (хотя и важным для пользователя с психологической точки зрения). А вот то, что они похожи внутренне (все основные ресурсы приложения можно хранить на клиенте, по сети будет передаваться только меняющийся контент) — это огромное достижение.

Можно даже назвать это скрытой революцией. По сути, браузер используется как некая виртуальная машина, хранящая и запускающая в себе PWA приложение. Как Андроид является виртуальной машиной для андроид-приложений, так и браузер становится виртуальной машиной для PWA. Как нативное приложение обращается через файловую систему к своим ресурсам, так же и PWA обращается к своим ресурсам — пусть по HTTP, но хранящимся локально. И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.

Google атакует iOS

Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:

  • Не нужно писать различные версии для Android и iOS (и Windows).
  • Не нужно регистрировать в Google Play и App Store и платить за это.
  • Открыт прямой выход на десктоп.

До нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской. Сейчас эти барьеры сломлены. И сломала их Google. Учитывая то, что именно она является флагманом интернет-технологий, подобный заход на территорию iOS, скорей всего, вполне продуман и просчитан. Остается ждать бума PWA.

Различия PWA с нативными приложениями конечно же есть — в основном, в правах доступа к ресурсам системы, но работа в этом направлении идет даже в поле чистого HTML5, а для PWA дополнительные привилегии проблемой не будут.

Технологии

Service Worker

Кратко рассмотрим основные движители PWA.

Сердце PWA — Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него. Данное разделение на два независимых слоя позволило сделать переход обычного веб сайта в PWA максимально простым.

Из хранилищ у Service Worker’a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Но, самое главное, полная свобода для реализации бизнес логики.

Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер, который будет думать, что ответ ему пришел от сервера. Или не будет — как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.

В то же время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker’a, чтобы превратиться в PWA.

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

С программистской точки зрения Service Worker представляет собой javascript файл, подключаемый в html коде страницы. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.

HTTPS

PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. SSL сертификат можно получить бесплатно, некоторые хостеры это делают за вас. Но критично, чтобы на сайте не было ссылок на незащищенные ресурсы — некоторые браузеры просто не будут отображать сайт в этом случае.

Основная встречаемая в таких случаях проблема — картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.

Application Shell

App shell — это просто скелет графического интерфейса, шаблон. Для примера, возьмем средний сайт c хидером, двумя колонками и прочим. Грубо говоря, вырежем из него контент текущей страницы и всю динамическую информацию, оставшаяся статика — app shell.

Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)

Данную архитектуру сайта — загрузку контента и иной динамичной информации через ajax вызовы — можно продумать и реализовать на сайте заранее, тогда переход в PWA будет совсем несложным.

App shell — это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу и многое станет проще.

Web App manifest

JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.

Push Notifications

Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов используют PWA технологии. А 90% тех, что используют, делают это только ради Push Notifications.

Пока что это самая популярная и самая злоупотребляемая технология PWA — за последние несколько месяцев число сайтов, заходя на которые первым делом ищешь мышкой кнопку «Блокировать» на предложение получать самые свежие новости, выросло, такое ощущение, многократно. А само желание навязать свой Push становится похоже на Spam.

А ведь можно же предлагать подписку на второй или третий заход пользователя на сайт, когда уже понятно, что он тут не случайно.

Рекомендации Google

Push-уведомления должны быть:

  • Своевременными. Своевременное уведомление – это уведомление, которое появляется тогда, когда пользователи этого хотят, и когда оно им важно.
  • Точными. Точное уведомление – это уведомление, содержащее конкретную информацию, к которой можно незамедлительно обратиться.
  • Релевантными. Релевантное сообщение – это сообщение о людях или предметах, которые интересуют конкретного пользователя.

Заключение

За последнее десятилетие web технологии прошли путь от стадии надежд и ожидания всеобщего доминирования Web 2.0 и HTML5, до стадии разочарования 2010-2013 годов.

Но самая темная ночь бывает перед рассветом, и для web технологий в деле конкуренции с нативными приложениями таким рассветом стало движение, связанное с Progressive Web Apps. Сейчас, в 2018 году, уже все браузеры поддерживают основные PWA возможности — работу оффлайн и установку на стартовый экран на мобильных устройствах. PWA работают везде, не зависят от магазинов приложений и обеспечивают близкий к нативному user experience. По некоторым прогнозам PWA заменят 50% пользовательских приложений общего назначения. Но не надо завышенных ожиданий, можно сказать почти наверняка, что сто процентов рынка PWA не займут.

Сейчас наличие PWA является конкурентным преимуществом. Например PWA Twitter’а на 65% увеличило количество просматриваемых за сессию страниц. Lancome благодаря PWA на 17% увеличили конверсию. OLX показали еще более впечатляющие результаты, и увеличили повторные визиты на 250%. И таких примеров множество. Скоро наличие PWA будет просто необходимо для любого серьезного бизнеса и его отсутствие будет восприниматься как существенный недостаток.

Источник: habr.com

Недавние посты

Мобильная версия cайта или мобильное приложение – что нужно вашей компании?

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

Tренды дизайна мобильных приложений 2019

  Одни идеи пролетают мимо, другие — становятся канонами для мобильной разработки. В этой статье мы расскажем какие тренды дизайна мобильных приложений будут на пике популярности в 2019 году.   1. Минимализм: простота во...

С чего начать разработку приложения?

  Итак, у вас есть готовый бизнес и вы хотите сделать для него мобильное или web-приложение. С чего же стоит начать разработку?   Начните с проектирования Главная задача на старте разработки — придумать, как...

Приложение сделать — как поле вспахать. Как понять, сколько стоит мобильная разработка

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

9 трендов, которые изменят digital-маркетинг в 2019 году

  Голосовой ассистент сможет заказать пиццу, почитать последние новости и поддержать беседу, дополненная реальность придет во все сферы бизнеса, а ценность пользовательского контента многократно возрастет.   Дополненную...

Хотите заказать приложение?

 

Напишите нам