Что такое PWA и почему браузер заменит мобильные приложения
Операционные системы для смартфонов развиваются быстрее всего — они находятся на передовой в сфере взаимодействия разработчиков и обычных пользователей. Мобильные приложения тоже меняются. В 2017-2018 годах набирает обороты новая тенденция — Progressive Web Apps (PWA) или Прогрессивные веб-приложения. Что это такое и как ими пользоваться?
Если говорить грубо, то PWA — это просто хорошо оптимизированные под мобильное устройство веб-сайты с хорошей адаптивностью, как, например, у Трешбокс.ру. Пишут их в основном с помощью стэка современных веб-технологий — JS, HTML, CSS. По возможностям PWA зачастую не уступают обычным нативным программам — они взаимодействуют с железом (GPS, NFC, память), быстро работают, хорошо выглядят, отлично адаптируются под любые размеры дисплея и даже могут работать без интернета.
Помимо этого, у PWA есть несколько больших преимуществ над традиционными приложениями:
Instagram
Мобильная веб-версия Instagram представляет собой тот самый PWA. Переключившись на него, можно использовать все основные функции сервиса: публикация фотографий, видео в обычной ленте и в историях; просмотр ленты и вкладки Explore. К сожалению, недоступен обмен сообщениями в Direct.
ВКонтакте
Ещё пару лет назад мобильная версия ВК была вполне «юзабельной» — могу сказать как активный ее пользователь смартфона без официального приложения этой соцсети. Сейчас же это образцово-показательное PWA со всеми фишками нативного клиента. Пользоваться им удобно и даже приятно.
Twitter
В отличие от Instagram, разработчики Twitter решили полностью перенести свою социальную сеть на рельсы PWA. Их мобильная версия обладает практически всеми особенностями нативной программы: тёмная тема, необходимые инструменты постинга и навигации по соцсети, а также возможности настройки профиля и другие. Адаптивный сайт Twitter в стиле PWA находится по адресу mobile.twitter.com.
Карты Google
Полноценное картографическое приложение довольно сложно перенести в мобильный браузер, но у Google это хорошо получается в последнее время. Если зайти на maps.google.com с мобильного браузера, то вам предложат воспользоваться полноценным веб-приложением, которое умеет прокладывать маршруты и показывать карту с различными слоями.
Telegram
Мессенджер Павла Дурова за последние пару лет хорошо подтянул качество своей веб-версии. Теперь ей можно пользоваться даже на телефоне. Этот PWA отлично работает с уведомлениями через браузер, а также обладает всеми стандартными функциями официального клиента для Android и iOS. Из недостатков можно отметить лишь не очень плавные анимации.
Guitar Tuner
Не нужно устанавливать отдельные приложения, чтобы правильно настроить гитару без обычного тюнера. Достаточно открыть страницу с этим веб-приложением и дать ей доступ к микрофону. Один из лучших примеров минималистичных PWA, которые просто выполняют свою функцию.
Voice Memos
С помощью этого PWA можно оставлять голосовые заметки в веб-хранилище. При этом для сохранения не нужна регистрация — приложение запомнит пользователя и при следующем визите покажет ему именно его хранилище с заметками.
Paper Planes
Веб-версия известного на мобильных платформах приложения, где можно запускать виртуальные самолетики со штампом своего местонахождения и ловить чужие. Сайт использует датчики устройства для взаимодействия с самолетиками (главное не выбросите свой телефон вместе с ними).
QR Scanner
На каждой мобильной ОС есть приложение для чтения QR-кодов, либо эта функция встроена прямо в стандартную камеру. В интернете есть также и PWA с этой возможностью. Простая читалка QR довольно быстро работает и просто выдает расшифрованную ссылку, либо текст — достаточно дать сайту доступ к камере.
The Cube
Собирать кубик-рубика теперь можно и в браузере, даже без интернета. Единожды загрузив страницу, собирать можно хоть месяцами.
Dominoes
Кроме того, кому-то удалось сделать простую игру в домино в стиле прогрессивного веб-приложения. Судя по всему, изначально она работала с мультиплеером, но сейчас эта функция не работает. Зато есть возможность поиграть с ботами и без интернета.
Тем не менее, веб-технологии в последние годы развиваются невиданными темпами, а принципы нативной разработки под Android и iOS не меняются, а некоторые проблемы типа пиратства остаются нерешенными. Возможно, вы помните, что изначально первый iPhone хотели сделать платформой под прогрессивные веб-приложения на HTML5. Эта идея опередила свое время, но не сработала, так как веб-технологии тогда не были готовы к подобному применению. Сейчас же и пользователи, и технологии, и браузеры готовы к такому переходу.
Что такое PWA
Практически все мобильные приложения для Android и iOS являются нативными, то есть устанавливаются через каталоги программ и представляют собой обычный скомпилированный код, написанный на тех или иных языках. Все эти программы подгоняются под особенности той или иной системы, а также занимают место в памяти устройства. А что если перенести их на веб-страницы? Ответом на этот вопрос и являются прогрессивные веб-приложения.Если говорить грубо, то PWA — это просто хорошо оптимизированные под мобильное устройство веб-сайты с хорошей адаптивностью, как, например, у Трешбокс.ру. Пишут их в основном с помощью стэка современных веб-технологий — JS, HTML, CSS. По возможностям PWA зачастую не уступают обычным нативным программам — они взаимодействуют с железом (GPS, NFC, память), быстро работают, хорошо выглядят, отлично адаптируются под любые размеры дисплея и даже могут работать без интернета.
Помимо этого, у PWA есть несколько больших преимуществ над традиционными приложениями:
- Их не нужно обновлять из каталога приложений. Веб-страница отдается всегда в последней версии.
- Их нельзя взломать, так как весь код находится на сервере.
- Их не нужно устанавливать из каталога — достаточно зайти на нужный сайт, а потом добавить его URL на рабочий стол.
- Они не занимают место в памяти устройства.
- Одна страница работает на всех устройствах и платформах — дешевле для разработчика.
- Они могут работать без интернета, если речь не идет о соцсетях и различных зависимых от соединения сервисах. Это обеспечивает технология Service Worker.
- Полностью безопасно для пользователя благодаря протоколу HTTPS.
- Проще в использовании для обычного пользователя, так как не требуется установка из магазина приложений и все сопутствующие особенности.
Примеры PWA
Уже сейчас многие популярные сервисы и сайты предлагают своим пользователям прогрессивное веб-приложение. С их помощью можно освободить много места в памяти своего гаджета, удалив нативные программы-аналоги.ВКонтакте
Карты Google
Telegram
Guitar Tuner
Не нужно устанавливать отдельные приложения, чтобы правильно настроить гитару без обычного тюнера. Достаточно открыть страницу с этим веб-приложением и дать ей доступ к микрофону. Один из лучших примеров минималистичных PWA, которые просто выполняют свою функцию.
Voice Memos
Paper Planes
QR Scanner
На каждой мобильной ОС есть приложение для чтения QR-кодов, либо эта функция встроена прямо в стандартную камеру. В интернете есть также и PWA с этой возможностью. Простая читалка QR довольно быстро работает и просто выдает расшифрованную ссылку, либо текст — достаточно дать сайту доступ к камере.
The Cube
Dominoes
Кроме того, кому-то удалось сделать простую игру в домино в стиле прогрессивного веб-приложения. Судя по всему, изначально она работала с мультиплеером, но сейчас эта функция не работает. Зато есть возможность поиграть с ботами и без интернета.
Перспективы PWA
Если посмотреть на современные мобильные приложения, то мы увидим огромное количество веб-сервисов, каждый из которых легко бы работал в браузере. Так зачем ограничивать аудиторию своей программы, выпуская его на каких-то конкретных платформах, если можно сделать универсальное PWA? Возможно, в будущем битва операционных систем трансформируется в битву браузеров — у кого лучше поддержка PWA. Умрут ли нативные приложения — вряд ли, а если это и случится, то очень нескоро.Тем не менее, веб-технологии в последние годы развиваются невиданными темпами, а принципы нативной разработки под Android и iOS не меняются, а некоторые проблемы типа пиратства остаются нерешенными. Возможно, вы помните, что изначально первый iPhone хотели сделать платформой под прогрессивные веб-приложения на HTML5. Эта идея опередила свое время, но не сработала, так как веб-технологии тогда не были готовы к подобному применению. Сейчас же и пользователи, и технологии, и браузеры готовы к такому переходу.