Korzystaj z powiadomień push, aby angażować użytkowników i zachęcać ich do ponownego zaangażowania

Kate Jeffreys

Dlaczego warto korzystać z powiadomień push?

Powiadomienia zawierają niewielkie fragmenty informacji dla użytkownika. Aplikacje internetowe mogą używać powiadomień, aby informować użytkowników o ważnych, pilnych zdarzeniach lub działaniach, które muszą wykonać.

Wygląd powiadomień różni się w zależności od platformy. Na przykład:

Powiadomienie na urządzeniu z Androidem.

Tradycyjnie przeglądarki internetowe musiały inicjować wymianę informacji między serwerem a klientem, wysyłając żądanie. Technologia powiadomień push w internecie umożliwia natomiast skonfigurowanie serwera tak, aby wysyłał powiadomienia, gdy ma to sens w przypadku Twojej aplikacji. Usługa push tworzy unikalne adresy URL dla każdego zarejestrowanego procesu roboczego usługi. Wysyłanie wiadomości na adres URL service workera powoduje wywoływanie zdarzeń w tym service workerze, co sprawia, że wyświetla on powiadomienie.

Powiadomienia push mogą pomóc użytkownikom w pełnym wykorzystaniu możliwości aplikacji, zachęcając ich do ponownego otwarcia i korzystania z niej na podstawie najnowszych informacji.

Tworzenie i wysyłanie powiadomień

Twórz powiadomienia za pomocą interfejsu Notifications API. Obiekt Notification zawiera ciąg znaków title i obiekt options. Na przykład:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

Gdy powiadomienie jest aktywne, symbol title jest wyświetlany pogrubioną czcionką, a symbol body zawiera dodatkowy tekst.

Uzyskiwanie zgody na wysyłanie powiadomień

Aby wyświetlać powiadomienia, aplikacja musi uzyskać na to zgodę użytkownika:

Notification.requestPermission();

Jak działają powiadomienia push?

Prawdziwa moc powiadomień tkwi w połączeniu instancji roboczych usługi i technologii push:

Service worker może działać w tle i wyświetlać powiadomienia nawet wtedy, gdy aplikacja nie jest widoczna na ekranie.
Technologia push umożliwia skonfigurowanie serwera tak, aby wysyłał powiadomienia, gdy jest to przydatne dla aplikacji. Usługa push tworzy unikalne adresy URL dla każdego zarejestrowanego procesu roboczego usługi. Wysyłanie wiadomości na adres URL service workera powoduje wywoływanie zdarzeń w tym service workerze, co sprawia, że wyświetla on powiadomienie.

W tym przykładzie przepływu klient rejestruje service worker i subskrybuje powiadomienia push. Następnie serwer wysyła powiadomienie do punktu końcowego subskrypcji.

Klient i usługa Service Worker używają czystego JavaScriptu bez dodatkowych bibliotek. Serwer jest zbudowany przy użyciu expresspakietu npm w Node.js i wysyła powiadomienia za pomocą web-pushpakietu npm. Aby wysłać informacje do serwera, klient wywołuje adres URL POST, który serwer udostępnił.

Część 1. Zarejestruj skrypt service worker i zasubskrybuj powiadomienia push

Aplikacja kliencka rejestruje skrypt service worker w ServiceWorkerContainer.register(). Zarejestrowany skrypt service worker będzie nadal działać w tle, gdy klient będzie nieaktywny.

Kod klienta:
```
navigator.serviceWorker.register('sw.js');
```
Klient prosi użytkownika o zgodę na wysyłanie powiadomień.

Kod klienta:
```
Notification.requestPermission();
```
Aby włączyć powiadomienia push, service worker używa interfejsu PushManager.subscribe() do utworzenia subskrypcji powiadomień push. W wywołaniu funkcji PushManager.subscribe() usługa Service Worker podaje klucz interfejsu API aplikacji jako identyfikator.

Kod klienta:
```
navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});
```
Usługi push, takie jak Komunikacja w chmurze Firebase, działają w modelu subskrypcji. Gdy service worker subskrybuje usługę push, wywołując PushManager.subscribe(), usługa push tworzy unikalny adres URL dla tego service workera. Adres URL jest nazywany punktem końcowym subskrypcji.

Klient wysyła punkt końcowy subskrypcji do serwera aplikacji.

Kod klienta:

navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
    sendToServer(subscription, '/new-subscription', 'POST');
  });
});

Kod serwera:

app.post('/new-subscription', (request, response) => {
  // extract subscription from request
  // send 'OK' response
});

Część 2. Wysyłanie powiadomienia

Serwer WWW wysyła powiadomienie do punktu końcowego subskrypcji.

Kod serwera:

const webpush = require('web-push');

let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };

webpush.sendNotification(subscription, payload, options);

Powiadomienia wysyłane do punktu końcowego subskrypcji wywołują zdarzenia push, których celem jest service worker. Service worker odbiera wiadomość i wyświetla ją użytkownikowi jako powiadomienie.

Kod skryptu service worker:

self.addEventListener('push', (event) => {
  let title = { /* get notification title from event data */ }
  let options = { /* get notification options from event data */ }
  showNotification(title, options);
})

Użytkownik wchodzi w interakcję z powiadomieniem, co powoduje aktywowanie aplikacji internetowej, jeśli nie była ona jeszcze aktywna.

Dalsze kroki

Następnie wdróż powiadomienia push.

Opracowaliśmy serię ćwiczeń z programowaniem, które przeprowadzą Cię przez każdy etap tego procesu.