Блог / Статьи03 мая 2018

Что такое PWA и как они могут помочь онлайн-бизнесу

PWA (Progressive Web Applications; Прогрессивные веб-приложения) – это веб-ресурсы, которые соединяют в себе свойства сайта и мобильного приложения. Сохраняя удобство использования традиционных веб-сайтов, они приобретают также автономность классических приложений: с PWA можно работать как в онлайн‑, так и в офлайн-режиме.

Как работает и что умеет PWA?

Когда вы попадаете на PWA-сайт, он показывает вам следующее сообщение: «Хотите добавить этот сайт на главный экран?»

Пример установки pwa на главный экран мобильного устройства

Если вы нажмете «Да», то:

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

Что это даст? Во-первых, у вас теперь есть возможность открывать сайт в один клик с главного экрана устройства. Казалось бы, ничего необычного, ведь средствами браузера на главный экран для быстрого доступа можно добавить любой сайт. Но это не все: в отличие от обычных сайтов, после установки PWA вы сможете взаимодействовать с ним даже в офлайн-режиме, т.е. при полном отсутствии соединения с интернетом. Как? Мы же установили его к себе на устройство, помните? Кроме этого, когда вы онлайн, PWA может синхронизировать данные и обновлять их в кэше устройства. Подобным образом работает лента новостей в приложении Facebook: когда соединение отсутствует, информация извлекается из кэша, и вы видите контент, актуальный на последний момент выхода в интернет. Но как только появится соединение, приложение загрузит с сервера самую новую информацию, и вы сможете увидеть свежие заметки и фото; данные в кэше также обновятся.

Кроме этого, после установки PWA будет работать независимо от браузера (т.е. открываться не в окне Chrome, Opera или Safari, a в своем собственном).

Удаление (деинсталляция) PWA с устройства осуществляется таким же образом, как и обычных приложений.

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

При всем вышеуказанном, PWA-ресурс – это все еще сайт: на любую из его страниц можно получить ссылку, переслать ее с помощью мессенджера или разместить в соцсети; он также индексируется поисковыми системами.

Для того чтобы вы смогли лучше понять, как работают PWA и что они умеют, мы подготовили для вас пример с основными функциями технологии. С ним можно ознакомиться, нажав на кнопку ниже (пример не работает в «режиме инкогнито»; когда зайдете на страницу примера, наш сайт запросит у вас разрешение на получение push-уведомлений - пожалуйста, согласитесь. Это нужно только для демонстрации работы PWA - мы не будем рассылать вам уведомления в дальнейшем).

Плюсы Progressive Web App

  • Возможность безбраузерной работы. Эта функция дает пользователю доступ к информации в один клик, а значит, увеличивается вовлеченность: клиент может быстро посетить ресурс в любой удобный момент.
  • Кроссплатформенность. Стандартное мобильное приложение работает только на тех платформах, для которых его разрабатывали (Android, IOS, Windows). В то же время, PWA способны работать почти на всех аппаратных платформах, что снижает стоимость разработки: не нужно создавать отдельный продукт для каждой операционной системы, достаточно разработать одно универсальное PWA-приложение.
  • Офлайн-режим. Без Интернет-соединения пользователь может просматривать информацию и даже отправлять HTML-формы. При этом, данные, которые ввел посетитель сайта в форму, временно сохраняются на устройстве, а как только появится связь с интернетом, они отправятся на сервер. Представьте, например, что вы начали заполнять форму заказа, а затем зашли в метро и соединение прервалось. На обычном сайте, если вы после этого нажмете кнопку отправки, ваши данные исчезнут; PWA при этом сохранит всю информацию и отправит ее при первой возможности уже без вашего участия (пример работы офлайн-формы - смотрите в самом начале страницы).
  • Push-уведомления. Пользователи смогут получать удобные уведомления об акциях, новых статьях и прочих событиях вашего ресурса. Отметим, что принимать эти сообщения можно даже без установки PWA (пример работы push-уведомлений - смотрите в самом низу страницы).
  • Улучшение конверсии. Это скорее следствие из вышеперечисленных пунктов: при работе с PWA увеличивается вероятность повторного захода клиента на сайт, время, которое он проводит на ресурсе, улучшается пользовательский опыт, что в перспективе помогает повысить конверсию, если речь идет о коммерческом сайте.
  • Косвенное влияние на SEO. Прогрессивные мобильные приложения демонстрируют хорошие поведенческие факторы (пользователи активно переходят по страницам, меньше показатель отказов), что может положительно сказаться на ранжировании в поиске. PWA работает только с защищенным протоколом (HTTPS), а это тоже положительно влияет на позиции сайта.

Недостатки технологии PWA

  • Первая загрузка PWA-страницы может быть немного медленной, что бывает критично при очень слабом Интернет-соединении. Связано это с тем, что на момент первого входа информация в кэше о ресурсе отсутствует.
  • Суммарный размер PWA ограничен определенными требованиями, зависящими от браузера пользователя: не более 6% свободного места на устройстве для Chrome, 10% – для Firefox, 50 МБ – для мобильной версии Safari или 250 МБ – для Internet Explorer. Просчитать точный лимит довольно трудно, так как у каждого пользователя степень загруженности памяти устройства может быть различной. Поэтому, создавая PWA, приходится максимально уменьшать размер всех ресурсов, чтобы минимизировать риск того, что какие-то из них не поместятся в кэш.
  • Технологию PWA сложнее внедрить на уже готовый сайт, так как требуется максимальная оптимизация контента.
  • Если вы работаете с PWA-сайтом через браузер, то очистка кэша браузера приведет к бесповоротной потере данных, связанных с сайтом, и отсутствию возможности посещать ресурс в офлайн-режиме до тех пор, пока не появится интернет и данные в кэше не перезапишутся.
  • Многие функции PWA-сайтов не могут нормально работать при включенном режиме «инкогнито» в браузере.

Кому подойдут PWA?

И наконец, один из важнейших вопросов – для какого формата онлайн-бизнеса технология PWA будет целесообразной?

Интернет-магазины

Для больших интернет-магазинов PWA-технология может быть применена, однако работать с таким ресурсом в офлайн-режиме будет затруднительно. Связано это с тем, что крупный магазин требует множества запросов на сервер при фильтрации или сортировке большого количества товаров по разным признакам. Кроме того, множество фотографий товаров, которые нежелательно слишком сильно сжимать, могут просто не поместиться в локальном кэш-хранилище. С магазинами, имеющими небольшой каталог товаров, дело обстоит лучше: их ассортимент можно выводить на одной странице и фильтровать с помощью JavaScript на стороне браузера/приложения.

Инфо-ресурсы

Для таких типов сайтов, как блог, информационный, корпоративный ресурс или сайт услуг, настроить работу PWA будет проще. Это связано не только с тем, что на этих ресурсах обычно меньше изображений (по сравнению с интернет-магазинами), но и с тем, что для них не нужно фильтровать или сортировать контент, а новые страницы появляются сравнительно редко. Принцип работы такого приложения будет похож на работу ленты Facebook, описанную выше: механизм фоновой синхронизации при появлении Интернет-соединения будет находить и загружать новый контент.

Landing Pages

Наконец, для landing page или сайта-визитки внедрить PWA наиболее просто: в связи с тем, что содержимое этих ресурсов практически неизменно, для них даже не нужно настраивать фоновую синхронизацию. Весь сайт будет кэшироваться на устройстве, и пользователь сможет обратиться к нему в любой момент.

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

Внедрение технологии PWA на существующий сайт

Для быстрого внедрения PWA на уже готовый сайт он должен отвечать следующим требованиям:

  • оптимизированный вес всех картинок и фото на страницах;
  • минимизированный код скриптов, CSS-стилей и HTML-файлов. Очень желательно использовать скрипты только на чистом JavaScript, без применения сторонних библиотек;
  • наличие иконок разного размера для главного экрана различных платформ (Android, iOS, Windows), по которым будет осуществляться запуск приложения;
  • максимально оптимизированный размер всего сайта (в связи с ограничениями занимаемой памяти на устройстве, описанными выше).

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

Стоит отметить, что для сайтов на некоторых популярных готовых движках (например, на Wordpress) существуют плагины переноса уже имеющегося ресурса на PWA. Однако, важно уточнить, что даже при использовании плагинов требуется проверка и тестирование специалистами: чем больше и сложнее сайт, тем больше ошибок и проблем может возникнуть при его автоматизированном переносе. То же самое можно сказать и о ресурсе EscalatingWeb, который предлагает полностью автоматическое «превращение» сайта в PWA. Судя по отзывам пользователей, он подходит далеко не всем и корректно работает только с небольшими сайтами с малым количеством динамического контента.

 

"Для 95% компаний и организаций, которые хотят преуспеть в интернете, мобильные приложения являются неправильным решением. Мало того, большинство сейчас это понимают и соглашаются с этим. В такой ситуации задачу приложений способны взять на себя PWA, а также несложные мобильные сайты." – Рэнд Фишкин.

 

Технология Progressive Web App является одной из современных тенденций, которые способны определить будущее интернета и онлайн-бизнеса. Это отметил, например, основатель компании Moz Рэнд Фишкин в своем прогнозе на 2018 год. Важнейшими показателями для современных веб-ресурсов являются удобство в использовании (UX) и кроссплатформенность, а прогрессивные веб-приложения отменно справляются с этими задачами. Да, не все еще идеально – ведь технология довольно новая, но она постоянно развивается и расширяет функционал, открывая новые возможности перед пользователями.

И напоследок отметим: если вы нуждаетесь в разработке PWA, или хотели бы получить более подробную консультацию по данному вопросу - пожалуйста, обращайтесь! Веб-агентство ARTO с радостью поможет вам в этом!

Денис Улянченко
Front-end developer
КОММЕНТАРИИ
КОММЕНТИРОВАТЬ
ВОЙТИ
  • Facebook
  • Twitter
ЭТОТ САЙТ ИСПОЛЬЗУЕТ COOKIES
Мы используем cookies для анализа трафика, обеспечения функций социальных сетей и работы системы комментирования на сайте. Список устанавливаемых cookies находится на этой странице. Согласны ли вы на установку cookie?