Прогрессивные веб-приложения: что нужно знать для вашего бизнеса

Опубликовано: 2020-03-08

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

Если вы слышали об этом, а затем замочили это в себе, то вы просто доставили своим соперникам огромное облегчение! У них на одного конкурента меньше, о чем нужно беспокоиться!

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

Прежде чем мы начнем рассказывать вам историю PWA, позвольте нам кое-что вам показать:

(Источник изображения)

В приведенных выше данных мы наблюдали кое-что очень интересное. Наблюдение:

Люди тратят примерно в 7 раз больше времени на мобильные приложения, чем на мобильный веб-браузер.

Данные также выявили кое-что, что оставило нас довольно озадаченными!

Несмотря на то, что мобильные веб-браузеры получают меньшее время использования, объем трафика уникальных посетителей, которые они получают, более чем в два раза больше, чем для мобильных приложений!

Теперь вы, должно быть, задаетесь вопросом, сможете ли вы получить лучшее из обоих миров: более длительную продолжительность сеанса мобильных приложений и ошеломляющий объем трафика мобильных веб-браузеров.

Здесь на помощь приходят PWA. Технология, которая может повысить конверсию вашего сайта и, в конечном итоге, увеличить ваш банковский счет!

Мы собираемся охватить:

  • Что такое PWA.
  • Зачем вашему бизнесу нужен сайт на основе PWA.
  • Каковы лучшие практики при разработке вашего сайта PWA?
  • Проблемы, которые вам нужно будет преодолеть при разработке сайта PWA.
  • Как вы можете предоставить отличный UX через сайт PWA.
  • Как вы призываете людей установить ваш сайт PWA.
  • Недостатки PWA и способы их преодоления.
  • Дополнительные вопросы, связанные с PWA, на которые вам нужно знать ответы.

Любопытный? Что ж, тогда приступим к экскурсии!

Что такое PWA?

PWA - это аббревиатура. Это означает прогрессивное веб-приложение.

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

Что в нем такого крутого, так это то, что вы можете добавить PWA на домашний экран и использовать его так же, как вы используете Facebook, Messenger, Instagram или любое другое приложение на своем смартфоне.

Посмотри:

(Источник изображения)

(Источник изображения)

Давайте теперь перейдем к техническим вопросам.

PWA - это веб-технология на основе JavaScript.

Для этого необходимо разработать следующие компоненты:

  • Сервисный работник
  • Manifest.json
  • HTTPS

1. Service worker - это элемент кода JavaScript, который позволяет PWA быть доступным, даже когда вы не в сети. Кроме того, он управляет функцией «push-уведомлений», которой славятся сайты PWA.

2. Manifest.json - это файл JSON (формат файла такой же, как pdf или jpg), который содержит информацию, которая может понадобиться вашему сайту PWA, когда вы добавите его на домашний экран и будете использовать как собственное приложение.

(Источник изображения)

Как вы можете видеть на демонстрационном изображении выше, значок и короткое имя приложения React PWA автоматически появляются при нажатии синей кнопки «Добавить на главный экран». Это происходит потому, что файл manifest.json React PWA содержит всю информацию, включая значок приложения, короткое имя, цвет фона, тему и другую информацию об интерфейсе.

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

Зачем вашему бизнесу нужен сайт PWA

Три упомянутых выше компонента вместе дают вам следующие преимущества:

  • Ваш сайт работает даже в автономном режиме
  • Он создает впечатление приложения
  • Способен к самообновлению
  • Его легко обнаруживают поисковые системы.

Как эти функции приносят пользу вашему бизнесу? Ну приготовьтесь!

Ваш сайт работает даже в автономном режиме

Во-первых, сайты PWA доступны, даже когда человек не в сети.

Это означает, что ваши потенциальные клиенты (и существующие) смогут просматривать ваш сайт и выполнять такие действия, как заказ продукта или услуги.

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

Он обеспечивает беспроблемный опыт работы с приложением

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

Это звучит слишком много? Уверяем вас, что это не так!

Сайты PWA имеют единый и идентичный дисплей на всех устройствах, будь то смартфон, планшет или компьютер, но при этом занимают меньше места, чем собственное приложение! Twitter в полной мере воспользовался своим PWA, что привело к колоссальному увеличению количества твитов на 75%! Это также благословило их на 20% -ное снижение показателя отказов!

Хотя достижение таких впечатляющих результатов, как у Twitter, может быть не так просто, можно обеспечить гораздо лучший пользовательский опыт благодаря взаимодействию и удобству навигации, которые обеспечивает PWA!

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

Способен к самообновлению

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

Благодаря функции предварительного кеширования он может автоматически обновляться. И это еще не все!

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

Его легко обнаруживают поисковые системы.

Приложение PWA, в отличие от своего собственного аналога, может индексироваться поисковыми системами. Это позволяет вам получать органический трафик на ваш сайт PWA (при условии, что вы занимаетесь поисковой выдачей), что в основном бесплатно!

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

(Источник изображения)

Как вы можете ясно видеть на приведенном выше графике, чем больше людей находят ваш сайт, тем выше шансы, что они нажмут на него и, в конечном итоге, конвертируются! В сочетании с плавным пользовательским интерфейсом, единственной возможностью развертывания обновлений (если вы обновляете свой сайт PWA, версия приложения также обновляется) и функцией самообновления, было бы намного проще стимулировать рост вашего бизнеса!

Каковы лучшие практики при разработке вашего сайта PWA?

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

Отличное решение! Вы окажете своему бизнесу огромную услугу!

Но прежде чем вы обратитесь в агентство по разработке (или сделаете это самостоятельно), вы должны помнить о некоторых факторах, чтобы создать исключительный сайт PWA.

Использование системных шрифтов

Каждая операционная система (Android, iOS, Windows) имеет собственный шрифт текста. Если ваш PWA отображает свой контент с использованием собственного шрифта системы, клиенты сочтут его более привлекательным и, следовательно, будут уделять больше внимания вашему контенту.

Разрешите легко делиться контентом

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

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

Держите его лаконичным и легким

Лаконичный и легкий сайт PWA обеспечит гораздо лучший опыт работы с приложениями. Фактически, одна из ключевых особенностей PWA заключается в том, что он привносит в Интернет интерфейс, похожий на приложение.

Один из лучших способов передать такой опыт - использовать здоровое количество белого пространства. Эта практика поможет вашему сайту PWA принять гладкий, минималистичный интерфейс, который ваши клиенты сочтут более согласованным с тем, к чему они привыкли.

Сохранить прокрутку на предыдущей странице списка

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

Темная тема

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

Этим достигаются две вещи.

Во-первых, люди будут ассоциировать ваш сайт с другими популярными платформами, такими как Twitter, мессенджер FB.

Во-вторых, ваш сайт будет удобен для глаз, что поможет повысить удобство работы пользователей!

Проблемы, с которыми вы (вероятно) столкнетесь при разработке своего сайта PWA

Высокий расход батареи

Поскольку PWA обычно разрабатываются с использованием JavaScript (который не является родным языком для iOS или Android), для большей работы им требуется аккумулятор смартфона. Таким образом, батарея устройства разряжается быстрее при запуске приложения PWA.

Как с этим справиться: разрабатываете ли вы свой собственный PWA самостоятельно или выбрали ферму разработки, которая сделает это за вас, убедитесь, что основа кода JavaScript оптимизирована до отказа!

Ограничение доступа к функциям устройства

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

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

Интеграция со старыми устройствами Apple или версиями iOS

Несмотря на то, что PWA разрешено запускать с iOS 11.3, они не могут работать на большинстве старых устройств Apple. Поскольку устройства Apple относительно дороги, не все пользователи всегда приобретают новейшее устройство или обновляют свою ОС.

Как бы вы продвигали свой сайт PWA

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

Говоря о продвижении вашего PWA, есть два аспекта.

Это:

  • Вы хотите продвигать установку версии приложения вашего PWA
  • Вы хотите продвигать свой сайт PWA, чтобы увеличить объем трафика, который он получает

Давайте обсудим их по порядку.

Содействие установке приложения PWA

Есть несколько способов ускорить установку PWA. Здесь мы расскажем о продвижении на вашем сайте PWA.

Сначала мы поговорим о лучших практиках продвижения вашего приложения, установленного на вашем сайте.

Они здесь:

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

Например, на странице входа на сайт PWA поместите CTA для установки приложения под формой входа и кнопкой «Отправить» . Таким образом люди будут меньше отвлекаться от завершения действия входа в систему.

Сохраните возможность отклонить или отклонить продвижение интуитивно понятным

Некоторые рекламные акции требуют нажатия кнопки с крестиком. Пользователи Windows привыкли к тому, что кнопка «крестик» находится справа, в то время как для пользователей Apple MacBook она остается слева. Таким образом, где бы вы ни разместили его, убедитесь, что он большой и хорошо заметный.

Используйте продвижение приложения в умеренных количествах

Слишком много этого негативно повлияет на пользовательский опыт вашего сайта PWA.

Рекламная акция должна отображаться только при обнаружении запроса до установки.

Этот BeforeInstallPrompt представляет собой фрагмент кода JavaScript, который необходимо встроить в структуру кода вашего сайта PWA. Он обнаруживает определенное взаимодействие пользователя (переход в определенную часть вашего сайта, нажатие определенной кнопки), которое запускает продвижение приложения.

Рассмотрев передовой опыт, давайте перейдем к размещению рекламы приложения на вашем сайте PWA.

На вашем сайте PWA есть несколько мест, где вы можете разместить продвижение приложения. Эти:

1. Навигационное меню

(Источник изображения)

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

Что нужно помнить:

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

2. Целевая страница

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

Что нужно помнить:

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

3. Фиксированный верхний колонтитул страницы.

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

Что нужно помнить:

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

4. Прилепленный баннер с запрещенной установкой вверху / внизу страницы.

Большинство людей сталкивались с установленными баннерами или баннерами в целом на том или ином веб-сайте. Это означает, что они знакомы с рекламными акциями, которые отображаются таким образом.

Что нужно помнить:

  • Такие баннеры могут быть очень разрушительными. Поэтому убедитесь, что он отображается после того, как пользователь инициирует тщательно выбранное событие конверсии, которое указывает на более глубокое взаимодействие с вашим контентом.
  • Включите в баннер краткий текст, информирующий пользователей о ценности вашего приложения, например: «Читайте наш контент даже в автономном режиме». Выбирая этот текст, убедитесь, что он имеет прямое отношение к той части вашего сайта PWA, на которой находится ваш пользователь, контенту и общей теме вашего сайта, обнаруженному уровню активности пользователя, местоположению пользователя (если имеет отношение к контенту сайта), поведению пользователя. и т.п.

5. Между инфо-листом или статьями

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

Что нужно помнить:

  • Не злоупотребляйте им. Это просто рассердит ваших пользователей.
  • Следите за тем, чтобы средства отклонения промо-акции оставались доступными, и убедитесь, что выбор пользователя о ее отклонении запомнился.
  • Как показано на изображении выше, текст в промо-ролике должен быть актуальным и одновременно продвигать выгоду от получения приложения.

Продвижение вашего сайта PWA

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

1. Использование социальных сетей в качестве трамплина

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

Давайте кратко упомянем несколько советов, которые помогли многим нашим клиентам:

  • Разместите ссылки на различные разделы вашего сайта PWA, соответствующие вашему недавнему сообщению, в своем профиле Instagram. Это не только обеспечивает удобство и удобство использования, но и помогает повысить конверсию.
  • Попросите существующую базу подписчиков поделиться URL-адресом вашего сайта PWA для получения баллов за лояльность. Это дает им стимул для продвижения вашего сайта, увеличивает ваше взаимодействие с аудиторией и увеличивает посещаемость сайта.
  • Создавайте конкурсы и розыгрыши, соответствующие вашей нише, в которых люди могут участвовать, поделившись вашим URL-адресом PWA.

2. Получение рефералов

Это один из самых верных и эффективных способов привлечь трафик на ваш сайт. Это можно сделать различными способами, такими как обмен ссылками, ссылка в биографии автора гостевых сообщений и т. Д.

Какой бы метод вы ни выбрали, постарайтесь получить максимальное количество ссылок Dofollow, поскольку они помогают передавать ссылочный вес. Награда? Значительное повышение вашего рейтинга в поисковой выдаче и, в свою очередь, органического трафика!

3. Регистрация в каталогах

Когда речь идет о бизнес-решениях, клиенты доверяют каталогам. К ним относятся, помимо прочего, Yelp, Google My Business и FourSquare. Большинство из них бесплатны и предоставляют ваш сайт PWA для локального и глобального трафика в качестве надежного решения.

4. Использование вездесущего дисплея

Эти выставочные объекты недвижимости обычно не приходят вам в голову во время мозгового штурма по поводу рекламного пространства, но могут быть значительно эффективны в создании более сильного цифрового присутствия и прямого трафика на ваш сайт. Некоторые фантастические примеры - подпись по электронной почте, визитные карточки, физические баннеры, которые вы показываете на мероприятиях и т. Д.

Программное обеспечение для построения PWA Vs. нанять агентство

Существует множество инструментов, которые позволяют создать сайт PWA на основе существующего веб-сайта. Как вы понимаете, все это платные инструменты. Тем не менее, они предлагают ряд привлекательных преимуществ. Это:

  • Не нужно встречаться с командами разработчиков
  • Фиксированный ежемесячный / годовой биллинг
  • Быстрая доставка сайта PWA

Давайте теперь поговорим о некоторых преимуществах найма агентства для разработки вашего пользовательского PWA.

  • У вас могут быть специальные функции, которые помогут вам выделиться среди конкурентов.
  • Получайте предложения от профессионалов PWA в режиме реального времени.
  • У вас есть возможность выбрать из большого количества успешных шаблонов PWA.
  • Избавьтесь от головной боли по обслуживанию и обновлению.
  • Мгновенное (почти всегда) обслуживание клиентов.

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

Тестирование вашего сайта PWA

Если у вас есть сайт PWA, пожалуйста, не открывайте бутылку шампанского… пока! Есть еще над чем поработать!

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

Вот аспекты вашего сайта PWA, которые вам нужно протестировать:

1. Запрос "ДОБАВИТЬ НА ДОМ"

Поскольку ваш PWA не является родным приложением, он не будет доступен в магазине приложений Apple или Google Play. Единственный способ, которым посетители вашего сайта могут установить ваше приложение PWA на свой смартфон, - это запрос «ДОБАВИТЬ В ДОМОЙ». Таким образом, мы рекомендуем вам сначала проверить, прежде чем что-либо еще.

2. Автономная загрузка

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

3. Отзывчивость

Отзывчивость больше не рассматривается как захватывающая особенность веб-сайта или приложения. Это было принято как должное в массовом масштабе, и он не собирается возвращаться. Таким образом, любой, кто посещает ваш сайт со смартфона, планшета или компьютера, будет ожидать, что ваш сайт подстроится под размер экрана. Это означает, что на Земле нет этого фактора, который может оказаться в вашем списке «Проверить позже».

Кончик

Компетентным и бесплатным инструментом, который вы можете использовать для этой цели, является браузер Mozilla Firefox.

  • Просто откройте Mozilla на своем рабочем столе.
  • Введите URL-адрес вашего сайта PWA в адресную строку.
  • Нажмите Ctrl + Shift + M, и ваш сайт откроется в среде тестирования отзывчивости.

На изображении выше представлен снимок экрана с веб-сайтом Sydney Morning Herald, открытым в окне iPad в тестовой среде Mozilla.

Если вы посмотрите внимательно, вы увидите несколько вкладок прямо под адресной строкой.

Крайний левый позволяет вам выбрать устройство, на котором вы хотите увидеть предварительный просмотр вашего сайта. Вы также можете проверить время скорости загрузки при различных типах подключений, таких как 2G, 3G и т. Д.

4. Кроссбраузерное тестирование.

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

5. Сетевое тестирование

Не все посетители будут приходить на ваш сайт через 5G или широкополосное соединение. Некоторые могут даже использовать 3G! Чтобы обеспечить бесперебойную работу пользователей независимо от сети клиентов, настоятельно рекомендуется протестировать свой сайт при различных подключениях.

Для этой цели вы можете использовать функцию тестирования браузера Mozilla Firefox. Наряду с сетевым тестированием вы также можете проверить скорость отклика вашего сайта PWA с помощью этой функции.

6. Тестирование времени загрузки

Поскольку внимание людей падает, очень важно, чтобы ваш сайт загружался в течение 2 секунд (быстрее, тем лучше)! Несмотря на то, что сайты PWA известны своим низким временем загрузки, лучше оставаться в безопасности и проверять время загрузки сайта.

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

Позвольте PWA вести ваш бизнес в будущее

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

Итак, если вы получаете конкурентное преимущество над конкурентами и предоставляете свои ценные услуги / продукт постоянно расширяющейся клиентской базе, разработайте свой сайт PWA! Пусть он проложит путь к вашему цифровому присутствию!