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

Kate Jeffreys
Kate Jeffreys

Powiadomienia zawierają niewielkie porcje informacji. Aplikacje internetowe mogą używać powiadomień, aby informować użytkowników o ważnych wydarzeniach 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.
Powiadomienie na MacBooku.

Tradycyjnie przeglądarki internetowe musiały inicjować wymianę informacji między serwerem a klientem, wysyłając żądanie. Technologia web push 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 subskrybowanego serwisu workera. Wysyłanie wiadomości do adresu URL usługi wywołuje zdarzenia w tej usłudze, co powoduje wyświetlenie powiadomienia.

Powiadomienia push mogą pomóc użytkownikom w całkowitym wykorzystaniu możliwości aplikacji, ponieważ zachęcają do jej ponownego otwarcia i korzystania z najnowszych informacji.

Tworzenie i wysyłanie powiadomień

Utwó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);

Element title jest wyświetlany pogrubioną czcionką, gdy powiadomienie jest aktywne, a element body zawiera dodatkowy tekst.

Uzyskiwanie uprawnień do wysyłania powiadomień

Aby wyświetlić powiadomienie, aplikacja musi uzyskać od użytkownika odpowiednie uprawnienie:

Notification.requestPermission();

Jak działają powiadomienia push?

Prawdziwa moc powiadomień wynika z połączenia usług robotów i technologii push:

  • Pracownicy usług mogą działać w tle i wyświetlać powiadomienia nawet wtedy, gdy aplikacja nie jest widoczna na ekranie.

  • Technologia push umożliwia skonfigurowanie serwera w taki sposób, aby wysyłał powiadomienia wtedy, gdy ma to sens w przypadku Twojej aplikacji. Usługa push tworzy niepowtarzalne adresy URL dla każdego subskrybowanego serwisu workera. Wysyłanie wiadomości do adresu URL usługi wywołuje zdarzenia w tej usłudze, co powoduje wyświetlenie powiadomienia.

W tym przykładowym procesie klient rejestruje service workera i subskrybuje powiadomienia push. Następnie serwer wysyła powiadomienie do punktu końcowego subskrypcji.

Klient i serwis worker korzystają z tradycyjnego JavaScriptu bez dodatkowych bibliotek. Serwer jest zbudowany z użyciem pakietu npm expressNode.js i wysyła powiadomienia za pomocą pakietu npm web-push. Aby wysłać informacje do serwera, klient wywołuje adres URL POST udostępniony przez serwer.

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

  1. Aplikacja klienta rejestruje skrypt service worker w usłudze ServiceWorkerContainer.register(). Gdy klient jest nieaktywny, zarejestrowany skrypt service worker nadal działa w tle.

    Kod klienta:

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

    Kod klienta:

    Notification.requestPermission();
  3. Aby włączyć powiadomienia push, usługa workera używa funkcji PushManager.subscribe() do utworzenia subskrypcji push. W wywołaniu PushManager.subscribe() usługa robocza przekazuje jako identyfikator klucz interfejsu API aplikacji.

    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 usługa robocza subskrybuje usługę push, wywołując funkcję PushManager.subscribe(), usługa push tworzy adres URL, który jest unikalny dla tej usługi. Ten adres URL to punkt końcowy subskrypcji.

  4. 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

  1. 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);
  2. Powiadomienia wysyłane do punktu końcowego subskrypcji wywołują zdarzenia push z usługą w roli celu. Pracownik usługi 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);
    })
  3. Użytkownik wchodzi w interakcję z powiadomieniem, aktywując aplikację internetową, jeśli wcześniej nie była aktywna.

Dalsze kroki

W następnym kroku wprowadź powiadomienia push.

Opracowaliśmy serię laboratoriów kodu, które przeprowadzą Cię przez każdy etap tego procesu.