Как создать Push-уведомления для веб-приложений

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

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

Протокол веб-уведомлений

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

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

Web Push против веб-сокетов

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

Вот различия:

• Веб-сокеты могут использоваться только тогда, когда веб-страница загружена и активна. Но обратное верно в отношении веб-push-уведомлений, которые можно использовать в любое время, в том числе когда приложение активно, неактивно или не загружено, а также когда браузер не активен или даже закрыт.
• Данные, отправляемые с помощью Web Push, должны быть зашифрованы, и для каждого сообщения существует ограничение размера (оно не должно превышать 4 КБ). Существует также ограничение на количество сообщений, которые вам разрешено отправлять (точное значение ограничения зависит от браузера). Некоторые браузеры (например, Chrome) также могут требовать, чтобы уведомление отображалось пользователю каждый раз при получении сообщения. У вас нет этих ограничений при использовании веб-сокетов: вы можете отправлять любое количество незашифрованных сообщений любого размера и обрабатывать их по своему усмотрению; и вы можете отобразить уведомление или молча обновить данные в вашем приложении или даже вообще ничего не делать.
• Общее правило заключается в использовании веб-сокетов для отправки обычных обновлений данных в веб-приложение, когда пользователь взаимодействует с приложением. Используйте Web Push-уведомления для отправки срочных и важных сообщений пользователю, которые должны быть получены немедленно, независимо от того, работает ли пользователь с вашим приложением в данный момент.

Технические концепции

Давайте перейдем к техническим деталям технологии. Я хотел бы объяснить детали, используя игру со специальными правилами, игроками и раундами. Начну с описания игроков игры. В этой игре участвуют 5 игроков под названием Web Push Notifications:

• Веб приложение
• Сервисный работник
• браузер
• Сервер приложений
• Push-сервер

Push Server — это сервис, который реализуется поставщиком браузера; это коммуникационный мост между вашим сервером приложений и браузером. Он отвечает за доставку сообщений с вашего сервера приложений в браузер.

Использование игры для демонстрации веб-push-уведомлений

Используя игру, я продемонстрирую, как вы можете добавлять веб-push-уведомления в свои приложения. Правила этой игры определяются несколькими спецификациями, предоставленными Консорциумом World Wide Web и Целевой группой по интернет-разработкам:

• Связь между браузером и веб-приложением или сервисным работником, связанным с этим приложением, описана в спецификации API Push.

• Отображение различных типов уведомлений, а также обработка уведомлений описаны в спецификации API уведомлений.

• Связь между сервером приложений и сервером Push определяется в спецификации протокола Web Push.

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

Раунды игры

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

Раунд 1: Регистрация работника сервиса

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

Веб-приложение отправляет запрос в браузер для регистрации Service Service Worker, и браузер отвечает с объектом ServiceWorkerRegistration, если Service Service Worker был успешно зарегистрирован.

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

if ('serviceWorker' in navigator) {

  if ('PushManager' in window) {

    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {

      //state initializing

    })

    .catch(function() {

      //error handling

    });

  } else {

    //error handling

  }

} else {

  //error handling

}

Во-первых, нам нужно проверить, поддерживает ли браузер Service Workers. Затем нам нужно проверить, поддерживает ли браузер веб-push-уведомления. Поскольку поддержка браузеров растет, всегда полезно добавить обе проверки.

Если оба поддерживаются, мы регистрируем нашего сервисного работника. Для этого шага мы вызываем метод navigator.serviceWorker.register () и передаем путь к нашему файлу Service Worker в качестве параметра. После этого шага браузер загрузит этот файл и запустит его в рабочей среде. Файл Service Worker является стандартным файлом JavaScript, но браузер «предоставит ему доступ» к API-интерфейсам Service Worker, включая push.

Если все прошло правильно и ошибок не было, обещание, возвращаемое register (), разрешится. Если есть какие-либо ошибки, обещание отклоняется, и мы должны обработать этот случай, а также случай, когда браузер не поддерживает Service Workers. Когда register () разрешает, он возвращает объект ServiceWorkerRegistration, который будет использоваться в следующем раунде.

Раунд 2: подписка

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

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

Что происходит в этом раунде? Ваше веб-приложение просит браузер подписать пользователя на получение веб-push-уведомлений. Если пользователь соглашается, браузер отправляет запрос на Push-сервер для создания push-подписки. Сервер Push отвечает браузеру объектом принудительной подписки, который браузер перенаправляет в ваше веб-приложение. В качестве последнего шага ваше веб-приложение отправляет этот объект принудительной подписки на сервер приложений, например, с помощью Ajax-вызова. И ваш сервер приложений сохраняет его для использования в следующем раунде.

 navigator.serviceWorker.ready.then(function(registration) {

  registration.pushManager.subscribe({

    userVisibleOnly: true,

    applicationServerKey: urlBase64ToUint8Array('...')

  })

  .then(function(subscription) {

    // The subscription was successful

    savePushSubscription(subscription);

  })

  .catch(function(e) {

    //error handling

  });

});

 Notification.requestPermission(function(result) {

  if (result!== 'granted') {

    //handle permissions deny

  }

});

 reg.pushManagerpushManager.subscribe({

  userVisibleOnly: true,

  applicationServerKey: new Uint8Array([...])

});

 interface PushSubscription {

  readonly attribute endpoint;

  // "https://{push\_server\_url}/{user\_identifier}",

  function getKey();

  //auth - authentication secret

  //p256dh - key for encrypting messages

};

 POST /{user\_identifier} HTTP/1.1

Host: {push\_server\_url}

TTL: 15

Content-Type: text/plain;charset=utf8

Content-Length: 36

{encrypted\_message}

 POST /{user\_identifier} HTTP/1.1

Host: {push\_server\_url}

TTL: 15

Content-Length: 136

Authorization: Bearer

eyJ0eXAi...

Crypto-Key: p256ecdsa=BA1Hxzy...

{encrypted\_message}

 self.addEventListener('push', function(event) {

  var data = event.data.json();

  event.waitUntil(self.registration.showNotification(data.title, {

    body: data.body,

    icon: data.icon,

    tag: data.tag

  }));

});

 self.addEventListener('notificationclick', function(event) {

  event.notification.close();

  event.waitUntil(clients.openWindow('http://mywebsite.com'));

});

 self.registration.showNotification(data.title, {

  body: data.body,

  actions: [

    { action: 'ok', title: 'Yes' },

    { action: 'decline', title: 'No' }

  ]

});

 self.addEventListener('notificationclick', function(event) {

  if (event.action == 'ok') {

    // do something

  }

});

 self.addEventListener('notificationclose', function(event) {

  //do something

});

 if (focused) {

  clients.forEach(function(client){

    client.postMessage({

      message: data.message

    });

  });

} else {

  return self.registration.showNotification(data.title, {

    body: data.message

  });

}

 registration.pushManager.getSubscription().then(function(subscription) {

  if (subscription) {

    return subscription.unsubscribe().then(function(successful) {

      removePushSubscription(subscription);

    }).catch(function(e) {

      //error handling

    });

  }

})

.catch(function(error) {

  //error handling

})

 self.addEventListener('pushsubscriptionchange',

  function(registration, newSubscription, oldSubscription) {

    removePushSubscription(oldSubscription);

    savePushSubscription(newSubscription);

});