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 wyświetlają użytkownikom niewielkie fragmenty informacji. Aplikacje internetowe mogą używać powiadomień, aby informować użytkowników o ważnych, pilnych wydarzeniach lub o czynnościach, które musi wykonać użytkownik.

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

Tradycyjnie przeglądarki internetowe musiały zainicjować wymianę informacji między serwerem a klientem poprzez wysłanie żądania. Technologia Web push umożliwia natomiast skonfigurowanie serwera tak, aby wysyłał powiadomienia, gdy ma to znaczenie w przypadku danej aplikacji. Usługa push tworzy unikalne adresy URL dla każdego subskrybowanego skryptu service worker. Wysyłanie wiadomości do adresu URL skryptu service worker powoduje wywoływanie zdarzeń w tym mechanizmie Service Worker i wyświetlenie powiadomienia.

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

tworzenie i wysyłanie powiadomień,

Powiadomienia możesz tworzyć za pomocą interfejsu Notifications API. Obiekt Notification ma ciąg tekstowy 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);

Ikona title jest pogrubiona, gdy powiadomienie jest aktywne, a body zawiera dodatkowy tekst.

Uzyskiwanie uprawnień do wysyłania powiadomień

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

Notification.requestPermission();

Jak działają powiadomienia push?

Prawdziwa moc powiadomień wynika z połączenia mechanizmów Service Worker i technologii push:

• Skrypty service worker mogą 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 ma to znaczenie dla danej aplikacji. Usługa push tworzy unikalne adresy URL dla każdego subskrybowanego skryptu service worker. Wysyłanie wiadomości do adresu URL skryptu service worker powoduje wywoływanie zdarzeń w tym mechanizmie Service Worker i wyświetlenie powiadomienia.

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

Skrypty klienckie i service worker używają języka vanilla JavaScript bez dodatkowych bibliotek. Serwer został utworzony z użyciem pakietu npm express w Node.js i do wysyłania powiadomień używa pakietu npm web-push. Aby wysłać informacje do serwera, klient wykonuje wywołanie adresu URL POST, który został ujawniony przez serwer.

Część 1. Zarejestruj skrypt service worker i zasubskrybuj aplikację Push

1. Aplikacja kliencka rejestruje skrypt service worker w systemie 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');
   

2. Klient prosi użytkownika o zgodę na wysyłanie powiadomień.

   Kod klienta:

   Notification.requestPermission();
   

3. Aby włączyć powiadomienia push, skrypt service worker używa elementu PushManager.subscribe() do utworzenia subskrypcji push. W wywołaniu PushManager.subscribe() skrypt service worker dostarcza 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 (FCM), działają na modelu subskrypcji. Gdy skrypt service worker subskrybuje usługę push, wywołując metodę PushManager.subscribe(), tworzy unikalny adres URL dla tego skryptu. Jest to tzw. 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. Wyślij powiadomienie

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 uruchamiają zdarzenia push z skryptem service worker jako elementem docelowym. Skrypt service worker otrzymuje 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, co powoduje aktywowanie aplikacji internetowej, jeśli jeszcze nie była aktywna.

Dalsze kroki

Następnym krokiem jest wdrożenie powiadomień push.

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