Reddit PWA: как ведущие социальные сети используют веб-приложение

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

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

Обзор Reddit

Reddit был основан в 2005 году Стивом Хаффманом и Алексис Оганян из Университета Вирджинии. Его название было изменено на ответ «Я прочитал это», когда другие хотят поделиться историей.

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

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

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

Их основная целевая аудитория — студенты колледжей, интернет-специалисты и активисты социальных сетей в возрасте от 18 до 29 лет. Они заняли 10-е место среди самых популярных социальных сетей в США с почти 48 миллионами активных пользователей в месяц и более 430 миллионов активных пользователей в месяц по всему миру.

Как интеграция PWA помогает брендам добиваться успехов

Ускорение взаимодействия с пользователем

Многие бренды обращаются к PWA, чтобы повысить скорость загрузки своего приложения. Возьмем в качестве примера случай с Uber PWA. Зная, что их клиенты (большую часть времени) используют Uber в спешке, они создали крошечный, но мощный Uber PWA, который может загружаться в течение 3 секунд даже при таком медленном соединении, как 2G.

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

Walmart также подсчитал, что при увеличении времени загрузки всего на 1 секунду коэффициент конверсии уже увеличился на 2%.

Увеличьте ценность клиента

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

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

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

Размытие Онлайн – Оффлайн Дистанция

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

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

Все устройства действуют одинаково

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

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

Именно так растущие компании могут эффективно увеличивать свои доходы.

Проблемы Reddit перед интеграцией PWA

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

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

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

Результаты Reddit PWA

О дизайне

Хотя PWA сохраняет одинаковый внешний вид на разных платформах, каждый браузер поддерживает его по-разному. Меню из трех точек упрощает установку или удаление PWA из Интернета с помощью Chrome, а не Microsoft Edge.

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

О функции

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

Как создать PWA, как Reddit?

Советы с Reddit PWA

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

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

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

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

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

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

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

Упрощенное введение в разработку PWA

Настройка

Создайте каталог приложения и заполните здесь подкаталоги js, CSS и images.

Написание разметки для интерфейса приложения

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

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

Тестирование приложения

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

Нажмите F12, чтобы открыть панель разработчика Chrome на общедоступном сайте, найдите вкладку аудита и нажмите Lighthouse.

Сервисный работник

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

Манифест приложения

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

Заворачивать

Код завершен до этого этапа, но вам необходимо загрузить приложение на веб-сервер. Это позволит вашему PWA работать под защитой HTTPS.

Премиальная разработка PWA для электронной коммерции от Tigren

Наш опыт

Будучи профессиональным поставщиком услуг Magento с десятилетней историей, Tigren в настоящее время является одним из ведущих аутсорсинговых агентств в мире.

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

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

Наши услуги

Мы являемся агентством, специализирующимся на Magento, целью которого является предоставление решений для устойчивого роста для малого и среднего бизнеса. С PWA мы предоставляем 2 услуги премиум-класса, а именно:

• Разработка пользовательских прогрессивных веб-приложений
• Премиум шаблон Тигрен PWA

Ключевые выводы

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

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