Полное руководство по прогрессивным веб-приложениям в 2022 году — с 50 примерами PWA

Заинтересованы в создании прогрессивного веб-приложения? Это руководство расскажет вам все , что вам нужно знать, а также 50 примеров лучших PWA на рынке!

В течение многих лет мы безостановочно проповедовали: вам нужно нативное приложение. Для этого были веские причины, и мы до сих пор их придерживаемся.

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

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

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

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

Введите прогрессивные веб-приложения (PWA). Если у вас есть веб-сайт, и он отдаленно важен для вас или вашего бизнеса — вам нужно PWA.

В этой статье мы дадим определение прогрессивным веб-приложениям, обсудим их наиболее важные преимущества и поделимся 50 примерами лучших PWA в Интернете.

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

Начнем с фундаментального вопроса — что такое PWA?

Что такое прогрессивное веб-приложение? Давайте определим PWA

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

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

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

Возможно, вы все еще не уверены, что именно они собой представляют.

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

Исходное определение прогрессивного веб-приложения

Термин «прогрессивное веб-приложение» был придуман в 2015 году Фрэнсисом Берриманом и инженером Google Алексом Расселом. Они наблюдали за появлением нового класса веб-приложений и за обедом решили дать им определение и дать им название.

Они придумали следующие критерии:

• Отзывчивый: подходит для любого форм-фактора
• Независимая от подключения : постепенно расширяется с помощью Service Workers, что позволяет им работать в автономном режиме.
• Взаимодействия, подобные приложениям: примите модель приложения Shell + Content для создания удобных навигаций и взаимодействий.
• Свежесть : прозрачно всегда актуальна благодаря процессу обновления Service Worker.
• Безопасный : обслуживается через TLS (требование Service Worker) для предотвращения отслеживания
• Обнаруживаемые : идентифицируются как «приложения» благодаря области регистрации W3C Manifests и Service Worker, позволяющей поисковым системам находить их.
• Re-engageable : может получить доступ к пользовательскому интерфейсу повторного вовлечения ОС; например, Push-уведомления
• Возможность установки : на главный экран с помощью подсказок браузера, что позволяет пользователям «сохранять» приложения, которые они считают наиболее полезными, без хлопот магазина приложений.
• Linkable : это означает, что они не требуют установки, не требуют установки и ими легко поделиться. Социальная сила URL-адресов имеет значение.

Вы можете видеть, как эти критерии соответствуют части определения «веб-приложение».

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

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

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

Именно это наблюдали Берриман и Рассел. Они ничего не изобретали, они заметили сдвиг в сети и назвали его.

А как насчет «прогрессивной» части?

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

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

Определение Google для прогрессивного веб-приложения

Microsoft уже некоторое время с энтузиазмом относится к PWA. Apple потребовалось некоторое убеждение, и теперь (в основном) в деле. Однако среди крупных технологий именно Google с самого начала действительно отстаивал PWA.

Тем не менее, сами Google, похоже, не уверены на 100% в определении. Еще в 2015 году они опубликовали список из 10 характеристик, затем сократили его до шести, а затем добавили три новых.

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

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

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

Техническое определение прогрессивного веб-приложения

Третий способ определить PWA — указать чисто технические, а не UX-критерии.

Именно это попытался сделать веб-разработчик и автор Джереми Кейт в своем блоге 2017 года «Что такое прогрессивное веб-приложение?». .

Кит считает, что путаница в определениях PWA необоснованна и что в основном должны соблюдаться три критерия:

1. HTTPS — PWA должны работать на защищенных серверах, использующих HTTPS. Сервисные работники важны для их потенциала, и их можно использовать только в том случае, если у вас есть HTTPS.
2. Service Worker — по сути, файл JavaScript, который запускается отдельно от основного «потока» браузера и позволяет разработчику контролировать, как приложение обрабатывает сетевые запросы и кэширование. Это помогает обеспечить впечатляющую скорость и автономные возможности PWA.
3. Манифест веб-приложения — файл JSON, который предоставляет описание приложения для браузера, включая такие сведения, как имя, автор, значок, описание и ресурсы для его запуска. Это гарантирует, что приложение будет доступно для обнаружения.

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

Итак, мы видели исходное наблюдательное/желаемое определение, определение Google, ориентированное на UX, и минималистское техническое определение. Что мы можем предположить? Хотя все еще может быть небольшая двусмысленность, теперь у нас есть хорошее представление о том, что такое прогрессивное веб-приложение.

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

Как говорит Алекс Рассел:

«Эти приложения не упакованы и не развернуты через магазины, это просто веб-сайты, которые содержат все нужные витамины»

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

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

Преимущества прогрессивного веб-приложения

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

Это может показаться смелым заявлением, но это правда. Почему?

Короче говоря, не создавая PWA, вы, скорее всего, оставляете клиентов, доход и рост на столе. Как выразились Пит Лепейдж и Сэм Ричард из веб-команды Google:

«Цифры не лгут! Компании, запустившие Progressive Web Apps, добились впечатляющих результатов. Например, в Twitter наблюдалось увеличение количества страниц за сеанс на 65%, увеличение количества твитов на 75% и снижение показателя отказов на 20%, при этом размер их приложения уменьшился более чем на 97%. После перехода на PWA Nikkei получил в 2,3 раза больше органического трафика, на 58% больше подписок и на 49% больше активных пользователей в день. Hulu заменил свой настольный компьютер для конкретной платформы прогрессивным веб-приложением, и количество повторных посещений увеличилось на 27%».

Это просто царапает поверхность.

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

• Alibaba увеличила количество мобильных веб-конверсий на 76 %, количество активных пользователей на iOS увеличилось на 14 %, а на Android — на 30 %.
• Компания Debenhams продемонстрировала увеличение доходов от мобильных устройств на 40%, увеличение числа конверсий на 20% и рост онлайн-рекламы выше рынка.
• Pinterest продемонстрировал увеличение общего времени, потраченного на 40%, рост доходов от рекламы, создаваемой пользователями, на 44% и увеличение основного взаимодействия на 60%.
• Forbes получил увеличение количества сеансов на пользователя на 43%, улучшение видимости рекламы на 20% и увеличение вовлеченности на 100%.
• BMW продемонстрировал увеличение CTR на своем сайте продаж на 30%, время загрузки в 4 раза быстрее, рост числа мобильных пользователей на 50% и увеличение органического трафика на 49%.
• MakeMyTrip увеличил скорость страницы на 38%, утроил коэффициент конверсии и увеличил количество сеансов покупателя на 160%.
• AliExpress повысил коэффициент конверсии для новых пользователей на 104 % (+82 % на iOS) и увеличил время, затрачиваемое на сеанс, на 74 %, посетив в два раза больше страниц за сеанс.
• На сайте Housing.com было на 38 % больше конверсий, средняя продолжительность сеанса увеличилась на 10 %, показатель отказов снизился на 40 %, а время загрузки страницы в целом сократилось на 30 %.
• Wego утроил CTR объявлений, в целом количество посетителей увеличилось на 26%, а количество конверсий увеличилось на 95%. На iOS они получили впечатляющий прирост конверсии на 50% и увеличение продолжительности сеанса на 35%.
• Treebo зафиксировал увеличение конверсии в 4 раза по сравнению с прошлым годом. Конверсия повторных пользователей в 3 раза выше.
• Tinder сократил время загрузки более чем вдвое с 11,91 секунды до 4,69 секунды и увеличил вовлеченность по всем направлениям благодаря PWA на 90% меньше, чем их родное приложение.

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

Хотя это еще не все. Давайте более подробно рассмотрим некоторые ключевые преимущества прогрессивных веб-приложений, начиная с самого важного — скорости.

PWA работают молниеносно

Современные потребители рассчитывают на мгновенную загрузку. Если что-то не загружается в мгновение ока, многие теряют интерес, возможно, навсегда. Это говорит само за себя и подтверждается массой данных:

• Почти 50% пользователей говорят, что больше всего их разочаровывает медленная загрузка страниц на мобильных устройствах (источник)
• Страницы, которые загружаются в течение 2 секунд, имеют показатель отказов 9%, страницы, которые загружаются в течение 5 секунд, имеют показатель отказов 38% (источник)
• «Резкое снижение коэффициента конверсии» связано с увеличением среднего времени загрузки с 1 до 4 секунд (источник).
• Каждая секунда улучшения времени загрузки повышает коэффициент конверсии на 2%, а улучшение на 100 миллисекунд приносит до 1% больше дополнительного дохода (источник).

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

Повышение скорости сайта приводит к лучшим результатам по всем направлениям. Вот и все.

Так как же PWA может помочь вам в этом? Прогрессивные веб-приложения работают быстро. Действительно быстро.

Pinterest, например, удалось сократить время загрузки «время до интерактивного» с медленных 23 секунд до всего 5,6 секунд. Это было на среднем оборудовании Android при медленном соединении 3G. Это оказало положительное влияние на ключевые показатели.

Совсем неплохо. Впрочем, в результатах Pinterest нет ничего необычного.

Потоковая платформа ZEE5 утроила скорость сайта и вдвое сократила время буферизации за счет создания PWA. PWA от Uber загружается менее чем за 3 секунды в сетях 2G. Forbes сократил время загрузки мобильных устройств с 6,5 секунд на своем предыдущем мобильном сайте до всего 2,5 секунд с помощью PWA.

Повышение скорости гарантировано , когда вы создаете хорошее, хорошо продуманное прогрессивное веб-приложение.

Почему прогрессивные веб-приложения такие быстрые?

PWA работают так быстро благодаря важнейшим сервисным работникам. Как пишет Джейсон Григсби в своей превосходной книге «Прогрессивные веб-приложения»:

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

Григсби продолжает объяснять, что:

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

Одним из традиционных преимуществ нативных приложений является их молниеносная скорость. Они достигают этого аналогичным образом — все файлы, необходимые для запуска приложения, загружаются при его установке, и ему нужно только получить новые данные. Сервисные работники позволяют прогрессивным веб-приложениям обеспечивать такую ​​же впечатляющую производительность в Интернете!

PWA обеспечивают пользовательский интерфейс, похожий на приложение, в Интернете

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

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

Например, PWA могут:

• Работа в автономном режиме или в условиях плохой сети (подробнее об этом далее)
• Быть установленным на устройстве пользователя и доступным через значок на главном экране, как собственное приложение.
• Отправлять push-уведомления на экран блокировки устройства (к сожалению, только на Android)
• Быть разработанным для обеспечения полноэкранного «иммерсивного» взаимодействия со структурой навигации, имитирующей родное приложение.
• Используйте анимацию как родное приложение
• Быть разработанным для доступа к оборудованию устройства, такому как камера и GPS

Ранний мобильный Интернет был довольно грубым. Старая парадигма десктопного браузера была «привинчена» к смартфонам, где она не очень подходила. Эпоха адаптивного дизайна значительно улучшила это, но всегда чего-то не хватало.

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

Например, вы когда-нибудь использовали Instagram Lite, Google Maps Go или Twitter Lite?

Вы можете скачать их в магазине Google Play и проверить — и посмотреть, как они выглядят, как любые другие родные приложения.

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

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

Примечание. Возможно, вы заметили, что эти PWA доступны в магазине Google Play. Google открыл Play Store для PWA в начале 2019 года! Это показывает, насколько они уверены в будущем PWA как действительно кроссплатформенных приложений. Вам нужно пройти через несколько обручей, чтобы получить PWA там, но это, безусловно, возможно. На данный момент от Apple нет информации о том, будет ли это когда-либо возможно в iOS App Store.

PWA надежны

У всех нас был опыт использования веб-сайта или веб-приложения при нестабильном мобильном соединении. Это не весело.

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

Это тоже можно сделать еще дальше. Благодаря «предварительному кэшированию», когда все приложение загружается и сохраняется при первом посещении, PWA также могут работать полностью в автономном режиме!

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

PWA безопасны, эффективны и адаптируются

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

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

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

«Они относятся к своим мобильным устройствам как к фотоаппаратам, компьютерам, блокнотам, помощникам и — самое главное — как к сокровищнице воспоминаний. Если загрузка приложения означает, что им придется пожертвовать драгоценными фотографиями или сообщениями, они трижды подумают, прежде чем нажать «да».

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

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

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

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

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

PWA позволяют привлекать пользователей с помощью push-уведомлений

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

Вот несколько примеров того, как разные компании могут использовать push-уведомления:

• Издатели новостей

«Последние новости, X и Y только что произошли!»

Push-уведомления отлично подходят для цифровых издателей и позволяют им возвращать трафик в свои главные новости и предупреждать пользователей о срочных новостях.

• Магазины электронной коммерции

«Специальное предложение/вы отказались от корзины/ваши товары отправлены»

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

• Социальные платформы и сообщества

«Ваш друг только что отправил вам сообщение/запрос на добавление в друзья/ответил вам»

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

Это несколько вариантов использования. Но на самом деле push-уведомления могут стать отличным стимулом для любого бизнеса. Они были (и остаются) одной из самых веских причин для создания нативных приложений.

Еще раз спасибо нашим друзьям-сервис-работникам — вам больше не нужны нативные приложения для отправки push-уведомлений. Вы можете отправить их со своего веб-сайта (если вы превратите его в PWA).

Push-уведомления нужно использовать правильно и не злоупотреблять ими, но они могут принести много пользы и являются большим преимуществом при создании PWA.

Например, после создания PWA компания Lancome увидела, что 8% потребителей, которые нажимают на push-уведомления, совершают покупку, а с помощью push-уведомлений коэффициент конверсии восстановленных корзин увеличился на 12%.

Другой — eXtra Electronics, ведущий розничный продавец электроники в Саудовской Аравии. Компания eXtra на 100 % увеличила продажи пользователей, пришедших через веб-push, и заметила, что те, кто выбрал push-уведомления, возвращаются в 4 раза чаще и проводят на сайте в 2 раза больше времени. Директор по развитию бизнеса Муджид Хаззаа сказал, что:

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

Когда вы превращаете свой сайт в прогрессивное веб-приложение, вы также можете получить хорошие результаты для своего бизнеса. Есть одно большое предостережение — вы можете использовать их только на Android. iOS не поддерживает их, и никто не знает, будет ли когда-нибудь. Если для вас важны push-уведомления и вы хотите отправлять их всем пользователям , вам придется создавать нативные мобильные приложения.

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

Мы рассмотрели некоторые из наиболее важных преимуществ превращения вашего сайта в прогрессивное веб-приложение.

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

Каковы недостатки создания PWA?

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

Все еще нужно убедить?

Давайте свяжем все вместе с некоторыми примерами. Мы собираемся выделить 50 лучших примеров прогрессивных веб-приложений в Интернете и показать вам из первых рук то, что мы обсуждали до сих пор.

Примеры прогрессивных веб-приложений: 50 лучших PWA в Интернете в 2020 году

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

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

Давайте перейдем к нашим 50 лучшим примерам PWA.

электронная коммерция и розничная торговля

Старбакс

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

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

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

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

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

Что нам нравится в этом PWA для электронной коммерции:

• Хорошо работает даже при слабом сетевом соединении
• Полностью интегрирован с другими платформами и сервисами других брендов, таких как Spotify, Lyft и Ford.
• Бесшовные мобильные платежи и процессы оплаты
• Чрезвычайно удобный дизайн

Джумия

Что Alibaba для Китая, то Джумия для Африки. Эта успешная онлайн-площадка была впервые запущена в Нигерии в 2012 году и с тех пор быстро захватила индустрию электронной коммерции в Африке.

В 2016 году он запустил PWA как ответ на нестабильные интернет-соединения в регионе к югу от Сахары. С помощью PWA компания смогла захватить значительную часть рынка, полагаясь на сети 2G с ограничениями данных.

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

Результат? По данным Google, компания увеличила коэффициент конверсии на 33% и увеличила количество пользователей в 12 раз (по сравнению с нативными приложениями). Кроме того, он значительно снизил показатель отказов и требования к памяти на пользовательском устройстве.

Что нам нравится в этом PWA для электронной коммерции:

• Надежный автономный доступ
• Возможность быстрого поиска
• Быстрый процесс загрузки
• Простая установка

OLX.in

Когда дело доходит до PWA для онлайн-рынка, доверяйте индийской рекламной компании OLX.in. С его надежными категориями, которые охватывают от недвижимости до моды, продавцы и покупатели лучше соответствуют PWA компании.

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

OLX показал, что у него более высокий CTR в его объявлениях и огромное снижение показателя отказов на 80% с тех пор, как он перешел на PWA, как сообщает Google.

Что нам нравится в этом PWA для электронной коммерции:

• Push-уведомления даже в автономном режиме
• Простая функция интеграции камеры, созданная для продавцов
• Функция истории поиска

флипкарт

Еще одним конкурентом на индийской арене электронной коммерции является Flipkart, который продолжает пересматривать опыт онлайн-покупок с помощью своего PWA.

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

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

Что нам нравится в этом PWA для электронной коммерции:

• Push-уведомления о последних новостях и обновлениях согласованы
• Процесс онлайн-покупки упрощен
• Возможности поиска точны

Чистые формулы

Понимая, что рынок пищевых добавок стал более конкурентоспособным, чем когда-либо, американская компания Pure Formulas считается пионером в этой отрасли, когда дело доходит до запуска собственного PWA.

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

Он сообщил о более высоких конверсиях и увеличении средней стоимости заказа (AOV).

Что нам нравится в этом PWA для электронной коммерции:

• Очень удобный процесс оформления
• Минималистский дизайн
• Очень легкие требования к хранению устройства
• Высокозащищенные транзакции

AliExpress

Благодаря быстродействующему PWA Ali Express сегодня считается одним из самых востребованных приложений для транзакций B2C.

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

С момента своего запуска AliExpress объявил, что благодаря PWA у него улучшились показатели повторного вовлечения и конверсии.

Что нам нравится в этом PWA для электронной коммерции:

• Удобная навигация по продуктам
• Более быстрое время загрузки
• Удобный макет

Алибаба

The Alibaba Group Джека Ма не нуждается в дополнительном представлении, когда речь заходит об успехе Alibaba PWA. Приложение электронной коммерции B2B — идеальная модель для любого PWA: быстрое, отзывчивое, легкое и очень привлекательное.

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

По данным Google, общее количество конверсий увеличилось на 76%.

Что нам нравится в этом PWA для электронной коммерции:

• Удобная навигация по продуктам
• Интеграция с инструментами веб-сайта, такими как Feeds, Messenger и учетная запись My Alibaba.
• Более быстрое время загрузки

Цель

Чтобы не отставать от своих конкурентов, восьмая по величине розничная сеть Америки Target быстро отреагировала на свое исследование клиентской аналитики. В 2015 году компания обнаружила, что ее клиенты начинают свое путешествие со своего мобильного устройства, а затем совершают покупку, используя свой компьютер.

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

Что нам нравится в этом PWA для электронной коммерции:

• Простой вариант добавления в корзину
• Быстрая загрузка изображений независимо от размера

Волмарт

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

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

Наконец, эффективное использование push-уведомлений позволяет компании знакомить своих преданных поклонников с превосходными предложениями и новыми находками.

Что нам нравится в этом PWA для электронной коммерции:

• Раздел обратной связи
• Функция геотрекинга
• Очень отзывчивый интерфейс
• Безупречная работа в нестабильной сети

Мэйси

Бренд элитной розничной торговли Macy's преследовал цель, когда запускал PWA: обеспечить лучший опыт для миллионов посетителей в месяц.

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

Что нам нравится в этом PWA для электронной коммерции:

• Надежный инструмент для поиска магазинов
• Организованная выкладка товара

Ланком

Французский бренд косметики класса люкс Lancome столкнулся с препятствием в своих онлайн-продажах: число мобильных пользователей выросло, но конверсия снизилась.

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

Бренд перешел на PWA, чтобы сократить время загрузки и сделать приложение максимально доступным. По данным Google, push-уведомления принесли 12% конверсий, а мобильные сеансы выросли до 51%.

Что нам нравится в этом PWA для электронной коммерции:

• Быстрые результаты поиска
• Удобная навигация

Новости

Financial Times

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Удобная навигация

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Удобная навигация
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

Середина

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• Отзывчивый
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• Offline access

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• Real-time updates
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• Всплывающие напоминания

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• Обновления в реальном времени
• Функциональность поиска

Каталог

Копа

Копа, ранее известная как PadPiper, представляет собой рынок меблированных квартир и арендаторов. Он предлагает проверку как для арендаторов, так и для арендаторов, поэтому сопоставление их более безопасно.

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

Что нам нравится в этом каталоге PWA:

• Быстрые результаты поиска
• Особенности аренды хостинга
• Минималистский дизайн

Рентио

Эта площадка по аренде фотоаппаратов и бытовой техники — решение для тех, кому временно нужны такие вещи.

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

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

Что нам нравится в этом каталоге PWA:

• Возможности поиска
• Быстрый процесс транзакции
• Удобная навигация

Джоппи

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

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

PWA от Joppy явно предназначен как для рекрутера, так и для соискателя (которые в основном находятся в Барселоне), чтобы упростить процесс подачи заявки.

Что нам нравится в этом каталоге PWA:

• Быстрое время отклика
• Быстрый процесс сопоставления

OpenRent

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

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

Что нам нравится в этом каталоге PWA:

• Возможность фильтрации результатов
• Простое добавление имущества
• Быстрое время отклика

Продажа автомобилей

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

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

PWA также предлагает экспертные советы через обзоры, рекомендации и советы по уходу за вашим автомобилем.

Что нам нравится в этом каталоге PWA :

• Отличный мобильный опыт
• Отвечает любому размеру экрана
• Удобный офлайн-опыт

Каригами

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

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

Что нам нравится в этом каталоге PWA:

• Быстрое время загрузки
• Точные результаты поиска
• Поисковые фильтры

Светить

Shine — второй по величине портал вакансий в Индии, основанный в 2008 году. Он находит кандидатов в более чем 15 000 компаний в различных отраслях.

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

Оповещения о вакансиях также беспрепятственно доставляются на устройство пользователя.

Что нам нравится в этом каталоге PWA:

• Всплывающие напоминания
• Полностью доступный
• Пользовательская автономная страница

Социальное или сообщество

Трут

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

В 2017 году компания инвестировала в собственный PWA после трех месяцев разработки. Преимущества были замечены мгновенно. Во-первых, компания смогла сократить свои инвестиции в данные с 30 МБ в собственном приложении до 2,8 МБ в PWA.

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

Что нам нравится в этом социальном PWA:

• Всплывающие напоминания
• Простота использования
• Оптимизированная производительность (разделение кода на основе маршрутов)

Пинтерест

В течение трех месяцев Pinterest, популярная платформа для обмена изображениями и социальных сетей, создавала PWA, чтобы расширить свою международную базу пользователей. По данным Google, по сравнению со старым мобильным сайтом, который весил 650 КБ, размера PWA в 150 КБ было достаточно, чтобы произвести впечатление на пользователей.

Подписчики Pinterest теперь также могут ждать всего 5,6 секунды, пока пользовательский интерфейс можно будет использовать, по сравнению с предыдущими 23 секундами в предыдущем мобильном приложении.

Первые результаты перехода на PWA были многообещающими: время, затрачиваемое на приложение, увеличилось более чем на 40%, реклама, созданная пользователями, выросла на 44%, клики по объявлениям выросли на 50%, а основная вовлеченность улучшилась на 60%.

Что нам нравится в этом социальном PWA:

• Всплывающие напоминания
• Низкое использование полосы пропускания
• Впечатляющая автономная поддержка

Телеграмма

Telegram изменил службу обмена мгновенными сообщениями в 2013 году, предоставив облачный инструмент, совместимый с различными устройствами.

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

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

Что нам нравится в этом социальном PWA:

• Устанавливается на iOS и Android
• Офлайн-поддержка
• Манифест

Твиттер

Одно из первых PWA, которое было запущено, было создано Twitter с его Twitter Lite PWA еще в 2017 году. Разработчики приложений позже использовали его в качестве модели для интеграции веб-функций и собственных функций приложения в более идеальное приложение для мобильных устройств.

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

Снизив потребление данных, улучшив мгновенную загрузку (5 секунд в сети 3G) и улучшив взаимодействие с пользователями, компания сообщила об увеличении количества просмотров страниц за сеанс на 65%, увеличении количества отправленных твитов на 75% и снижении показателя отказов на 20%. .

Что нам нравится в этом социальном PWA:

• Оптимизирован для браузера (разделение кода на основе маршрута)
• Меньшее использование полосы пропускания
• Быстрые обновления

Инстаграм

Instagram следовал стратегии Twitter, предлагая PWA, как только приложение последнего было выпущено. В начале 2020 года Instagram также обновил свое приложение для Windows 10, чтобы оно стало PWA с возможностью прямого обмена сообщениями.

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

Что нам нравится в этом социальном PWA:

• Всплывающие напоминания
• Мгновенное время загрузки
• Быстрый ответ

Путешествия и бронирование

Airbnb

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

Десять лет спустя PWA был обновлен, чтобы он хорошо работал с Edge на мобильных устройствах с Windows 10. Результатом является более плавный мгновенный переход страниц для клиентов. На сегодняшний день Airbnb посещают более 80 миллионов человек в месяц, большинство из которых — в приложении.

Что нам нравится в этом PWA:

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

Трибо

Еще одним лидером в индустрии онлайн-бронирования является Treebo, платформа для бронирования отелей. Предлагая варианты размещения в более чем 165 городах Индии, пользователи могут сравнить варианты и найти лучшие предложения.

По данным Google, его PWA загружается всего за четыре секунды в сети 3G. Сайт также сообщает, что количество кликов увеличилось в пять раз, а коэффициент конверсии увеличился в три раза.

Что нам нравится в этом PWA:

• Рендеринг на стороне сервера
• Быстрое взаимодействие
• Прогрессивный рендеринг (потоковая передача HTML)

Мы идем

Названный крупнейшим сайтом о путешествиях в Азиатско-Тихоокеанском регионе и на Ближнем Востоке, Wego учитывал поведение своих потребителей при разработке PWA.

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

Чтобы пользователям было удобно бронировать гостиничные номера и авиабилеты, было создано PWA. Wego объявила, что сократила время загрузки страницы с 12 секунд до чуть менее трех секунд, по данным Google.

Что нам нравится в этом PWA:

• Чрезвычайно быстрый ответ
• Минималистский дизайн
• Точные результаты поиска
• Легкий

MakeMyTrip

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

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

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

В результате количество сеансов клиентов увеличилось на 160 %, а показатель отказов снизился на 20 %. Кроме того, покупатели, совершившие покупку в первый раз, могли совершить в три раза больше конверсий, чем те, кто раньше использовал нативное приложение.

Что нам нравится в этом PWA:

• Удобная навигация
• Устанавливается на любую ОС
• Быстрое время загрузки

Travelstart

Воспользовавшись успехом своего онлайн-рынка, Jumia решила заняться туристической индустрией с Jumia Travel. По данным Google, его PWA способствовал увеличению трафика в двенадцать раз и коэффициента конверсии на 33%.

Затем в 2019 году Jumia Travel была приобретена Travelstart для создания одной из крупнейших платформ в индустрии туризма. Мобильные пользователи Jumia Travel перенаправляются на Travelstart даже на PWA, где они могут забронировать авиабилеты, проживание в гостинице и аренду автомобилей.

Что нам нравится в этом PWA:

• Быстрое время загрузки
• Простой интерфейс

Триваго

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

Охватывая почти 200 сайтов бронирования, приложение работает быстро с точки зрения сравнения цен. Пользователи также могут удобно использовать карту Trivago, реальные отзывы об отелях и ссылаться на предыдущие поиски, чтобы сэкономить время и трафик.

Согласно отчету Google, более полумиллиона пользователей из 55 стран добавили PWA на свои домашние экраны, что привело к увеличению вовлеченности на 150 % и увеличению кликов по предложениям отелей на 97 %.

Что нам нравится в этом PWA:

• Устанавливается на Android и iOS
• Превосходная автономная поддержка
• Быстрый ответ
• Поисковые фильтры
• Многоязычная поддержка

Убер

PWA от Uber — одно из самых уникальных приложений на сегодняшний день. В 2018 году компания по вызову такси разместила свое приложение для Windows 10 за кулисами в пользу PWA, которое было впервые запущено в июле 2019 года.

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

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

Что нам нравится в этом PWA:

• Быстрое время загрузки
• Офлайн-поддержка
• Легкий
• Чрезвычайно быстрый процесс бронирования

Люфт

Конкурент Uber, компания Lyft, основанная в 2012 году, расширила базу клиентов и водителей в США и Канаде.

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

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

Что нам нравится в этом PWA:

• Быстрое время отклика
• Надежные обновления в реальном времени

Таджавал

Очень популярное приложение для бронирования авиабилетов и отелей в ОАЭ, Tajawal предлагает комплексные решения для доступа к более чем 450 авиакомпаниям и тысячам отелей для путешественников.

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

Что нам нравится в этом PWA:

• Очень быстрая загрузка страницы
• Защищенные транзакции

FlyWeekend

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

Пользователи FlyWeeked просто вводят свое текущее местоположение и выбирают выходные, когда они хотели бы сделать перерыв. Затем система предоставляет список интерактивных городов, которые пользователь может «смахнуть», если он не заинтересован, или вместо этого забронировать поездку.

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

Что нам нравится в этом PWA:

• Быстрое время отклика
• Быстрая загрузка страницы

Крутой кузен

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

Так называемые «двоюродные братья» варьируются от хирургов до музыкантов, но все они разделяют одну и ту же страсть принимать туристов в своем родном городе.

Его PWA был запущен в 2018 году, чтобы обеспечить более быстрый и удобный доступ для своих пользователей. В своем официальном обновлении компания объявила, что приложение сократило время загрузки на 25% и уменьшило доступ пользователей к другим онлайн-источникам.

Что нам нравится в этом PWA:

• Быстрое время отклика
• Удобная навигация

Развлечение

Саундслайс

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

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

Образцы «фрагментов» позволяют пользователям воспроизводить звук в сопровождении движущейся вертикальной направляющей на нотном листе.

Что нам нравится в этом PWA:

• Интерактивный дизайн
• Быстрое время загрузки

Спотифай

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

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

Что нам нравится в этом PWA:

• Адаптивный интерфейс
• Офлайн-поддержка
• Интерактивный дизайн

1тюнер

Вопреки распространенному мнению, радио не умерло. С 1Tuner любой пользователь может слушать радиостанции (в любом месте слова) и подкасты.

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

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

Что нам нравится в этом PWA:

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

9ГАГ

Интернет-юмор никогда не был прежним с момента запуска 9GAG. Благодаря интернет-мемам, видео и изображениям, которыми делятся пользователи со всего мира, сайт стал источником развлечений.

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

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

Что нам нравится в этом PWA:

• Устанавливается на Android и iOS
• Офлайн-поддержка
• Быстрое время загрузки

Lotto.de

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

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

Что нам нравится в этом PWA:

• Плавный пользовательский интерфейс
• Доступность на немецком и английском языках

Подведение итогов 50 лучших примеров PWA

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

Эти бренды инвестировали в свой мобильный UX и пожинали плоды. Вы можете и должны пойти по их стопам и сделать «сначала мобильным» впечатляющее прогрессивное веб-приложение для своего бизнеса. Мы расскажем вам, как, но сначала ответим на ключевой вопрос — «а как насчет нативных приложений?»

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

В любом случае — мы собираемся кратко рассказать о дебатах «нативное приложение против PWA» и объяснить, почему мы считаем, что PWA — это минимум, а PWA + нативное приложение — оптимально.

Какое приложение вы должны создать? Прогрессивные веб-приложения против нативных приложений

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

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

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

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

С другой стороны, нативные приложения имеют меньший охват и видимость по сравнению с PWA. Они находятся за «огороженными стенами» магазинов приложений и требуют от пользователя более высокого уровня приверженности для их установки и загрузки. С другой стороны, они больше соответствуют существующим привычкам пользователей, позволяют отправлять push-уведомления пользователям iOS и могут повысить узнаваемость/присутствие вашего бренда в магазинах приложений.

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

Нативные приложения — отличный «дом» для ваших самых преданных поклонников.

Google формулирует это следующим образом:

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

Наша рекомендация – стройте оба!

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

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

Как создать прогрессивное веб-приложение

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

В сети гуляет много контента о том, как создать PWA за «10 минут». С обещаниями перенести ощущение нативного приложения в традиционное веб-приложение с нуля менее чем за час, этими руководствами легко соблазниться.

Хотя это законно?

И да и нет. Эти «хаки» PWA также предназначены для выполнения абсолютных минимальных критериев — HTTPS, веб-манифеста и работника службы. Если вы заинтересованы в создании очень простого функционального прогрессивного веб-приложения, вы можете попробовать PWABuilder от Microsoft. Приложив немного усилий и технических ноу-хау, вы можете получить что-то приличное и работающее.

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

1. Приобретите SSL-сертификат для настройки через службу хостинга.
2. Разработать оболочку приложения
3. Проверьте, поддерживает ли браузер сервис-воркеров.
4. Зарегистрируйте рабочий файл службы
5. Добавьте push-уведомления и манифест веб-приложения
6. Настройте приглашение установки
7. Протестируйте функциональность приложения
8. Проверьте контрольный список Lighthouse на основе приложения
9. Исправить ошибки
10. Запустить приложение

Звучит легко, правда?

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

Жизненно важная работа по настройке сервисного работника и кэширования для оптимальной производительности сложна и требует настоящего мастерства. Затем, в зависимости от ваших требований, вам также могут понадобиться дизайнеры, которые понимают пользовательский интерфейс нативного приложения и знают, как эффективно применять его в Интернете.

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

Стоимость и сроки создания прогрессивного веб-приложения

Так сколько это будет стоить? Ну, это немного похоже на классическое «Какой длины кусок веревки?»

Это полностью зависит от сложности приложения, которое вы хотите создать. По словам авторов The PWA Book:

Создание PWA с нуля потребует от 3400 втч (для небольшого приложения) до 9000 втч (специальный проект, который мы сделали). Это означает стоимость от 400 тысяч долларов до 1 миллиона долларов. Использование облачной платформы будет как минимум на 75% дешевле, а время выхода на рынок также будет на 75% короче (2-3 месяца вместо 8-12 месяцев).

- Глава 10, Книга PWA

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

Конечно, если вы конвертируете сайт в PWA, а не создаете его с нуля, в большинстве случаев это будет дешевле и проще. По грубой оценке, вы рассчитываете инвестировать не менее 3 месяцев и от 20 000 до 50 000 долларов, чтобы получить отличный результат.

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

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

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

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

Если вы используете WordPress, есть несколько более простых способов превратить ваш сайт WordPress в PWA, а также некоторые плагины WordPress PWA, которые вы можете попробовать.

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

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

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

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

Чтобы узнать больше, ознакомьтесь с этими ресурсами:

• Книга PWA
• Ресурсы Google на web.dev и Google Developers
• Статистика PWA (интересные метрики и тематические исследования)
• Google PWA Roadshow (отличная серия видео)
• Отличные рекомендации Mozilla по PWA
• Книга Джейсона Григсби «Прогрессивные веб-приложения»
• Что Интернет может сделать сегодня? (демонстрирует, как развивались веб-технологии)
• Да, этот веб-проект должен быть PWA (отличное руководство/статья)
• Наше руководство о разнице между нативными, веб- и гибридными приложениями

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

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

Как мы уже упоминали, PWA не заменяет нативные приложения. PWA — это, прежде всего, гораздо лучший веб-сайт. Может быть трудно заставить пользователей установить их на свои устройства, поскольку они еще не привыкли к этому, и вы упускаете возможность отправки push-уведомлений пользователям iOS и присутствия бренда в магазинах приложений.

Должны ли вы также создавать нативные приложения?

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

Если вы разделяете эти опасения, но заинтересованы в создании приложений для iOS и Android для своего бренда, вам следует ознакомиться с нашими платформами News, Canvas для электронной коммерции или Canvas. Какой бы из них вам не подходил, вы можете преобразовать свой сайт или веб-приложение в высококачественные нативные приложения всего за несколько недель всего за 100 долларов США за м.

Наши платформы можно использовать для преобразования любого веб-сайта в мобильное приложение. Неважно, на чем построен ваш сайт. MobiLoud отлично подходит для создания:

• WordPress-приложения
• Пузырьковые приложения
• Приложения Squarespace
• Приложения Wix
• WooCommerce приложения
• Приложения веб-потока

И все, что между ними! Вы будете получать неограниченное количество push-уведомлений на Android и iOS, и у вас будут все функции, необходимые для создания выигрышного кроссплатформенного присутствия в Интернете и в магазинах приложений.

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