Альтернатива сайту или приложению: разбираемся, что такое SPA и PWA

Разработка классических мобильных приложений и некоторых сложных сайтов — это трудозатратно, долго, дорого. Есть более дешевые и быстрые в разработке виды приложений, например, PWA, которые могут приблизить и «привязать» потребителей к вашим товарам и услугам, а сделать пользование сайтом более удобным помогает SPA. О преимуществах и недостатках этих технологий для бизнеса рассказала маркетолог компании «Иквадарт» Татьяна Гаврилова.

— Тренд на мобильные и веб-приложения будет только расти — пользователям нужны новые функции, скорость, удобство.

Опыт нашей компании позволяет судить о том, что сейчас востребованы такие продукты как:

• Single Page Application (SPA) 
• Progressive Web Application (PWA)

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

Single page application (SPA)

Single Page Application (SPA) — это такой особый вид сайта, на котором не происходит перезагрузка страницы каждый раз, когда пользователь взаимодействует с ресурсом: переходит по разделам, отправляет формы, перетаскивает элементы и т.д. И это возможно потому, что вместе с загрузкой сайта загружается весь необходимый для дальнейшей работы код. Например, посмотрите на почтовый сервис Gmail: в следующий раз, когда будете отправлять письмо, обратите внимание: после нажатия кнопки «Отправить» сайт не перезагружается, а динамически перестраивает текущую страницу.

SPA подойдет в случае, если пользователи не просто просматривают статичный контент, а активно работают с сайтом и его элементами. Например, Single Page Application подойдет для создания страхового калькулятора — расчет взносов и выплат здесь происходит моментально. А страница не перезагружается каждый раз после того, как пользователь вводит или изменяет значения в полях калькулятора.

Также SPA подходит для сайтов с большим количеством посетителей, поскольку нагрузка на сервер у SPA-сайтов минимальная. Другие удачные примеры использованя SPA: Trello, Facebook.

Преимущества SPA перед обычными сайтами:

• Выше скорость работы и более отзывчивый интерфейс: SPA быстрее реагирует на действия пользователя
• Быстрее загружается
• Удобнее пользоваться. Благодаря Single Page Application пользователи могут взаимодействовать с сайтом как с десктоп-приложением. Например, SPA позволяет перетаскивать и вставлять элементы, автоматически сохранять частично заполненные формы и др.
• Может частично работать офлайн. SPA загружает необходимые для дальнейшей работы данные при первом посещении. Это позволяет пользователям использовать некоторые функции сайта даже при отсутствии подключения. Однако в сравнении с PWA, к примеру, отправить форму офлайн не получится
• Одинаково хорошо работает на любых устройствах (нет  особой разницы в работе на десктоп или мобайл).

Есть у SPA и недостатки. Например, не стоит выбирать Single Page Application, если: 

• Вам важно, чтобы сайт занимал высокие позиции не только в Google, но и в других поисковых системах. На данный момент правильно индексировать SPA-сайты умеет только Google. Грамотно «подружить» SPA-сайт, например, с Яндексом также возможно. Но для этого вам скорее всего понадобятся услуги SEO-специалиста.
• Ваши пользователи используют устаревшие браузеры без поддержки JavaScript. В этом случае многие функции SPA могут быть недоступны.
• Вам нужен проект с наивысшим уровнем безопасности. В сравнении с многостраничными веб-приложениями SPA менее защищены. 

По стоимости Single Page Application обойдется примерно на 30% дороже обычного сайта. Но понятно, что итоговая стоимость разработки всегда зависит от конкретного проекта.

Progressive Web Application ( PWA)

Progressive Web Application (PWA) — технология, которая позволяет установить и использовать сайт как приложение на смартфоне или десктопе. По сути, PWA — это гибрид сайта и приложения. Progressive Web Application можно создать с нуля или же добавить функциональность PWA на уже существующий сайт.

Вот как работает PWA, например, на смартфонах:

1. Пользователь открывает сайт и соглашается сохранить его на рабочий экран.

2. Сайт устанавливается на смартфон, а на рабочем столе появляется иконка сайта.

3. Теперь сайт доступен пользователю как приложение, открывается без интерфейса браузера, быстро загружается и доступен в один клик.

Хорошие примеры PWA: app.starbucks.com, smashingmagazine.com, myclean.by. Чтобы протестировать, как работает PWA, откройте любой из этих сайтов в мобильном браузере Chrome и выполните описанные выше шаги.

Вот несколько причин, почему PWA могут заинтересовать бизнес:

• Сайт всегда под рукой у клиента, а значит, заказать ваш товар или услугу проще. Чтобы открыть сайт, пользователю достаточно нажать на иконку в смартфоне. Это легче и быстрее, чем искать сайт в мобильном браузере. К тому же клиенту не нужно запоминать адрес вашего сайта. А вам не нужно конкурировать с аналогичными бизнесами в поисковых системах в случае, если клиент забыл URL.
• PWA позволяет отправлять пользователям push-уведомления. А значит, вы можете привлекать внимание пользователей к своему бренду, возвращать их на сайт, стимулировать повторные продажи.
• Сайт работает без интернета. Пользователи могут читать контент и отправлять формы на сайте офлайн. Данные из формы сохранятся и поступят к вам, как только появится интернет-соединение.
• Сайт загружается очень быстро. Данные сайта сохраняются в кэше при первом посещении. Благодаря этому в дальнейшем сайт загружается мгновенно. Кроме того, PWA можно загрузить и продвигать в Google Play, а значит, сайт получает дополнительную площадку для распространения.

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

• Lancôme удалось увеличить конверсию сайта на 17%, а также снизить время загрузки сайта на мобильных устройствах на 84%
• Forbes сократил скорость загрузки сайта с 3−12 сек до 0,8 сек и на 100% увеличил показатель вовлеченности читателей.

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

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

• Создать PWA в разы дешевле, чем мобильное приложение. Одна из причин — PWA не нужно разрабатывать для каждой операционной системы отдельно. К тому же PWA может создаваться не с нуля, а на основе существующего сайта
• PWA проще и дешевле продвигать. Такой сайт не нужно регистрировать в App Store и Google Play, чтобы его продвинуть. А значит, не нужно платить магазинам приложений за размещение
• Установить PWA гораздо проще: пользователю не нужно идти в App Store или Google Play. К тому же скорость установки PWA выше
• PWA намного меньше весит: как правило, всего несколько десятков килобайт. А значит, пользователь не будет задумываться о том, стоит ли устанавливать PWA, если в смартфоне мало места
• Разработать PWA быстрее, чем мобильное приложение
• PWA влияет на SEO. Поскольку пользоваться PWA удобнее, улучшаются поведенческие факторы сайта. Это, в свою очередь, может положительно влиять на ранжирование сайта в поисковых системах.

Как и у любой технологии, у PWA есть свои недостатки. Например, PWA имеет ограниченный доступ к некоторым функциям смартфона: Bluetooth, датчикам приближения, сканеру отпечатков пальцев. Есть для таких приложений и ограничения на iOS:

• PWA может хранить на устройстве не более 50 Мб информации. При этом, если пользователь не запускал PWA несколько недель, сохраненные файлы удалятся. Иконка на рабочем столе останется, однако при следующей загрузке приложение придется установить заново
• Нет интеграции с Siri. Даже если PWA установлено, Siri не сможет его найти
• iOS не позволяет показывать баннер с предложением установить PWA на рабочий экран. Однако пользователь может установить иконку вручную, найдя кнопку «Добавить на главный экран» в настройках смартфона.

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

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

PWA vs Сайт

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

Читайте также

• Что нужно знать о разработке сайта или приложения, чтобы зря не потратить время и деньги
• Как простые действия в CRM помогли увеличить выручку в 2,7 раза — кейс