Ищете простой способ отправлять PWA-уведомления?
Progressive Web Apps (PWA) — это приложения, которые работают на любом устройстве. Но всегда возникает некоторая проблема с отправкой веб-уведомлений. Обычно самая большая проблема — это процент доставки. Вы можете добавить веб-уведомления в свое PWA разными способами. Но как отправлять веб-уведомления, которые действительно доставляются из вашего PWA?
Не волнуйтесь! В этой статье мы пошагово покажем вам, как отправлять PWA-уведомления с надежным процентом доставки менее чем за 10 минут.
Давайте начнем.
Кратко — что такое PWA-уведомления? PWA-уведомления — это стандартные веб-уведомления, доставляемые через зарегистрированный сервис-воркер PWA, позволяющий приложениям, установленным из Интернета, получать push-сообщения, даже когда веб-страница закрыта.
Отправляйте PWA-уведомления сегодня!
Push-уведомления — это сверхэффективный, недорогой маркетинговый инструмент, который поможет вам автоматически увеличить повторный трафик, вовлеченность и продажи.
Как установить PWA-уведомления
Добавление push-уведомлений в Progressive Web App довольно просто. Просто следуйте шагам в этой статье. Если вы выполните каждый шаг, к концу этой статьи вы сможете отправлять push-уведомления, подобные этому:
- Зарегистрируйте сервис-воркер в корне сайта, который объединяет логику PWA и обработку уведомлений.
- Установите скрипт PushEngage и скопируйте код установки в
<head>. - Настройте модальное окно согласия и создайте кампанию на панели управления PushEngage.
Основная проблема заключается в том, что все программное обеспечение для веб-уведомлений использует файл Javascript под названием service_worker.js. Сервис-воркер помогает вам собирать подписчиков на push-уведомления через всплывающие окна. Но у всех PWA уже есть файл сервис-воркера, который выполняет другую функцию. И в одно время ваше PWA может использовать только один сервис-воркер.
Проще говоря, сервисы веб-уведомлений сбивают с толку ваше PWA. Поэтому иногда он будет собирать подписчиков на push-уведомления, а иногда — нет. Иногда вы сможете отправлять уведомления, а иногда — нет. Вы даже можете в конечном итоге отправить push-сообщения всему списку подписчиков, и они будут доставлены только нескольким подписчикам.
Мы рекомендуем использовать PushEngage для отправки PWA-уведомлений. PushEngage — это программное обеспечение для push-уведомлений № 1 в мире. Так что вы знаете, что ваши кампании в надежных руках.
Конечно, конструкторы PWA, такие как Mendix, поставляются с собственной системой push-уведомлений. Но что, если вы хотите перейти на другой сервис push-уведомлений? Что, если вы хотите большей гибкости и контроля над своими кампаниями push-уведомлений? Более того, эти сервисы обычно предоставляют API для создания push-кампаний. Но с PushEngage вы получаете простую в использовании панель управления, с помощью которой вы можете создавать, планировать, отправлять и управлять push-кампаниями.
И да, вы можете использовать Firebase Cloud Messaging (FCM) для отправки push-уведомлений в приложения для Android. Но с PushEngage вы можете отправлять push-уведомления в приложения для Android и веб-уведомления, push-уведомления в приложения и веб-уведомления для iOS и iPadOS, а также push-уведомления в браузеры.
Самое приятное? Вы можете даже отправлять мощные push-уведомления для eCommerce всего за несколько кликов.
| Факт | Значение |
|---|---|
| Основной механизм доставки | Service worker (подписка на push) |
| Типичное время настройки | ~10 минут (базовая настройка) |
| Общее требование | service_worker.js и manifest.json в корневом каталоге |
| Работает на | Большинство настольных браузеров и Android (зависит от платформы) |
Давайте начнем.
Шаг № 1: Настройте свою учетную запись PushEngage
Перейдите на главную страницу PushEngage и нажмите кнопку Начать:
Вы можете попробовать PushEngage бесплатно. Если у вас небольшой блог, которому нужен постоянный трафик и вовлеченность, этого, вероятно, будет достаточно. Но если вы серьезно настроены на продажи, вам следует приобрести пакет Enterprise и разблокировать автоматизированные кампании.
После регистрации в вашей учетной записи PushEngage перейдите в вашу панель управления PushEngage и выберите Настройки сайта » Сведения о сайте:
Здесь вы можете установить свой логотип, название сайта и URL сайта. Очень важно разобраться с этими настройками прямо сейчас, чтобы вы могли протестировать всю свою конфигурацию позже.
Шаг № 2: Получите установочный код из PushEngage
Чтобы установить push-уведомления, вам нужно получить установочный код. На экране Настройки сайта прокрутите вниз и нажмите кнопку Нажмите здесь для инструкций по настройке:
Затем нажмите вкладку Любой сайт:
Вы можете использовать Javascript-код для начала отправки push-уведомлений.
Шаг № 3: Добавьте код сервис-воркера для PWA-уведомлений
Самая сложная часть процесса наконец-то здесь. В панели управления PushEngage в разделе Инструкции по настройке вы также увидите опцию для загрузки файла service worker.
ВАЖНО: PWA может иметь только одну активную область действия service worker одновременно — объедините код push-уведомлений в ваш существующий service worker. По умолчанию PWA не требует файла service worker. Все, что вам нужно, чтобы превратить любой сайт в Progressive Web App, — это файл манифеста. Поэтому, если в вашем PWA нет файла service worker, вы можете просто добавить service worker PushEngage в корневой каталог вашего веб-сайта или веб-приложения.
Но если в вашем PWA уже есть service worker, НЕ загружайте файл service worker для push-уведомлений PushEngage напрямую как есть. Откройте service worker PushEngage в текстовом редакторе, например Блокноте, и скопируйте код из файла service worker PushEngage. Затем найдите файл service worker для вашего PWA и просто добавьте код service worker PushEngage в этот файл.
Если вы пренебрежете этим шагом, вы не сможете собирать подписчиков push-уведомлений.
Шаг №4: Настройка формы подписки PushEngage
Теперь вернитесь в свою панель управления PushEngage. Перейдите в раздел Дизайн » Модальные окна всплывающих окон и выберите форму подписки по вашему выбору:
Идея здесь состоит в том, чтобы дать вашим посетителям вескую причину подписаться. Если вам нужна помощь с этим, ознакомьтесь с нашей статьей о том, как создать пользовательский запрос на подписку на push-уведомления.
А если вам нужны шаблоны для начала, ознакомьтесь с этой статьей о высококонверсионных формах подписки на push-уведомления.
Шаг №5: Создайте свою первую кампанию
Теперь, когда ваш PWA может отправлять push-уведомления, вам следует создать реальную кампанию.
Кампания брошенной корзины помогает генерировать дополнительный доход, конвертируя брошенные корзины. Это простое напоминание, которое автоматически продает множество товаров. Таким образом, это отличная кампания для поддержки любой целевой страницы, которая приносит прямые продажи.
Просто зайдите в свою панель управления PushEngage и перейдите в раздел Кампании » Триггерные кампании » Создать новую триггерную кампанию:
А затем выберите шаблон кампании "Брошенная корзина":
Если вы новичок в создании автоматизированных маркетинговых кампаний, вы можете просто следовать нашей статье о настройке кампании push-уведомлений о брошенной корзине. Следуйте каждому шагу, и вы сможете настроить push-уведомления, подобные этому:
И на случай, если вы задаетесь вопросом, вам не нужно быть известным брендом, чтобы ваши кампании push-уведомлений были эффективными. На самом деле, PushEngage был создан, чтобы помочь малому бизнесу расти с помощью push-уведомлений.
Но прежде чем начать продвигать свой сайт, вам следует устранить любые проблемы с процессом подписки на push-уведомления. Ознакомьтесь с этой статьей о тестировании ваших push-уведомлений. Если все работает идеально, вы закончили!
Часто задаваемые вопросы
В: Требуется ли service worker для push-уведомлений PWA?
О: Да. Сообщения push-уведомлений PWA доставляются зарегистрированным service worker, который должен включать обработку событий push.
В: Могу ли я отправлять push-уведомления PWA на iOS?
О: Поддержка iOS для веб-push на основе service worker ограничена; Android и настольные браузеры широко поддерживают push-уведомления PWA. (Если у вас есть точная информация о статусе iOS, замените ее текущим кратким заявлением и укажите источник.)
В: Какова самая распространенная ошибка при интеграции?
О: Загрузка отдельного push-service worker в корень без объединения его с существующим service worker PWA, что приводит к конфликтам и пропущенным подпискам.
Что делать после добавления PWA-уведомлений?
На этом всё, друзья!
Теперь вы можете отправлять push-уведомления PWA. К этому моменту вы также создали мощную кампанию push-уведомлений для роста вашего бизнеса. Все это менее чем за 10 минут!
Узнайте, как создавать другие автоматизированные кампании push-уведомлений. Большинство push-кампаний просты и эффективны. Поэтому мы рекомендуем настроить несколько кампаний для вашего сайта. Вот несколько отличных вариантов для начала:
- Как автоматически отправлять RSS-push-уведомления
- Как настроить push-уведомления о брошенной корзине с помощью GTM
- Как легко запланировать push-уведомления [Руководство за 5 минут]
И если вы еще этого не сделали, начните с PushEngage. PushEngage — это программное обеспечение №1 в мире для push-уведомлений. Так что ваши кампании в надежных руках.
