Перейти к содержанию

Лучшие практики взаимодействия с PWA

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

Только баннер Placeholder. Заменим, когда будут готовы финальные ресурсы

Краткое примечание

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

План на сегодня

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

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

Сравнение вовлеченности PWA

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

  • Starbucks удвоил количество ежедневных активных пользователей благодаря своему PWA.
  • В PWA-версии Tinder наблюдается повсеместный рост вовлеченности
  • Forbes увеличил продолжительность сеанса в 2 раза, а количество показов с помощью PWA увеличилось на 20%.

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

Повышение вовлеченности с помощью действенных Push-уведомлений

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

Контент превыше всего

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

Что означает термин "Actionable"?

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

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

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

Давайте посмотрим код!

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

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

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

1
2
3
4
5
6
7
8
{
    title: "Our Notification Title",
    body: "Our Notifcation Message",
    icon: "path/to/icon.png",
    data: {
        path: "<relative path for our notification>"
    }
}

Теперь мы можем настроить слушатель push в нашем сервисе-воркере так, чтобы отображаемое уведомление фиксировало наше новое свойство data:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
self.addEventListener('push', (event) => {
    const notificationData = JSON.parse(event.data.text());

    event.waitUntil(
        self.registration.showNotification(notificationData.title, {
            body: notificationData.message,
            icon: notificationData.icon,
            data: notificationData.data // This is the only change from week 2
        });
    );
});

Теперь наше свойство data связано с нашим уведомлением, и мы можем использовать это свойство в слушателе события notificationclick в нашем сервис-воркере:

1
2
3
4
5
6
7
8
9
self.addEventListener('notificationclick', (event) => {
    // close the notification
    event.notification.close();
    // append our relative path to our origin
    var fullPath =
        self.location.origin + event.notification.data.path;
    // open our PWA at that location
    clients.openWindow(fullPath);
});

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

Примечание: Это очень базовая реализация нашего слушателя, в которой для простоты пропущены некоторые случаи обработки. Более подробную реализацию можно посмотреть в Push Notifications Demo project или в MDN-спецификации для openWindow().

Дальнейшее поведение уведомлений с помощью действий

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

Вы можете добавить действия в полезную нагрузку уведомления следующим образом:

1
2
3
4
5
6
7
8
9
{
    title: "Our Notification Title",
    body: "Our Notifcation Message",
    icon: "path/to/icon.png",
    actions: [
        {action: "firstAction", title: "First Action", icon: "action1/icon.png"},
        {action: "secondAction", title: "Second Action", icon: "action2/icon.png"}
    ]
}

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

1
2
3
4
5
6
7
event.waitUntil(
    self.registration.showNotification(notificationData.title, {
        body: notificationData.message,
        icon: notificationData.icon,
        actions: notificationData.actions
    });
);

А затем в нашем слушателе мы можем обрабатывать различные действия:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
self.addEventListener('notificationclick', (event) => {
    // close the notification
    event.notification.close();
    // get the action
    var action = event.notification.action;

    if (action === 'firstAction') {
        // do something specific to first action
    } else if (action === 'secondAction') {
        // do something specific to second action
    } else {
        // default if actions aren't supported or an action wasn't clicked
    }
});

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

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

Подведение итогов

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

Ресурсы

Комментарии