Ta strona została przetłumaczona przez Cloud Translation API.

Ćwiczenia z programowania: tworzenie serwera powiadomień push

Kate Jeffreys

Kayce Basques

To ćwiczenie w Codelab pokazuje krok po kroku, jak utworzyć serwer powiadomień push. Po zakończeniu ćwiczeń będziesz mieć serwer, który:

śledzi subskrypcje powiadomień push (czyli gdy klient zdecyduje się na otrzymywanie powiadomień push, serwer tworzy nowy rekord w bazie danych, a gdy zrezygnuje z ich otrzymywania, usuwa istniejący rekord w bazie danych);
Wysyła powiadomienie push do jednego klienta.
Wysyła powiadomienie push do wszystkich subskrybowanych klientów.

Ten warsztat programistyczny ma na celu pomóc Ci w nauce poprzez działanie i nie skupia się na omawianiu pojęć. Aby dowiedzieć się więcej o pojęciach związanych z powiadomieniami push, przeczytaj artykuł Jak działają powiadomienia push?.

Kod klienta w tym ćwiczeniu jest już gotowy. W tym ćwiczeniu będziesz wdrażać tylko serwer. Aby dowiedzieć się, jak zaimplementować klienta powiadomień push, skorzystaj z Codelab: tworzenie klienta powiadomień push (dostępnego w języku angielskim).

Aby zobaczyć pełny kod, otwórz projekt push-notifications-server-codelab-complete (kod źródłowy).

Zgodność z przeglądarką

To Codelab działa w tych kombinacjach systemów operacyjnych i przeglądarek:

Windows: Chrome, Edge
macOS: Chrome, Firefox
Android: Chrome, Firefox

Ten warsztat z kodem nie działa w tych systemach operacyjnych (lub kombinacjach systemu operacyjnego i przeglądarki):

macOS: Brave, Edge, Safari.
iOS

Stos aplikacji

Serwer jest zbudowany na podstawie Express.js.
Biblioteka Node.js web-push obsługuje całą logikę powiadomień push.
Dane subskrypcji są zapisywane w pliku JSON za pomocą lowdb.

Aby wdrożyć powiadomienia push, nie musisz używać żadnej z tych technologii. Wybraliśmy te technologie, ponieważ zapewniają niezawodne działanie Codelab.

Konfiguracja

Pobieranie edytowalnej kopii kodu

W tym samouczku edytor kodu widoczny po prawej stronie tych instrukcji będzie nazywany interfejsem Glitch.

Kliknij Remixuj do edycji, aby umożliwić edycję projektu.

Konfigurowanie uwierzytelniania

Zanim zaczniesz korzystać z powiadomień push, musisz skonfigurować serwer i klienta za pomocą kluczy uwierzytelniających. Aby dowiedzieć się, dlaczego tak się dzieje, przeczytaj artykuł Podpisywanie żądań wysyłanych za pomocą protokołu web push.

Otwórz terminal Glitch, klikając kolejno Narzędzia i Terminal.
W terminalu uruchom npx web-push generate-vapid-keys. Skopiuj wartości klucza prywatnego i klucza publicznego.
Otwórz .env i zaktualizuj VAPID_PUBLIC_KEY i VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT na mailto:test@test.test. Wszystkie te wartości powinny być zapisane w podwójnych cudzysłowach. Po wprowadzeniu zmian plik .env powinien wyglądać tak:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Zamknij terminal Glitch.

Wartości zmiennych środowiskowych (elementy w .env) są unikalne dla pojedynczego projektu Glitch. Jeśli zremiksujesz projekt, wartości w sekcji .env nie zostaną skopiowane.

Otwórz pokój public/index.js.
Zastąp VAPID_PUBLIC_KEY_VALUE_HERE wartością klucza publicznego.

Zarządzaj subskrypcjami

Twój klient obsługuje większość procesu subskrypcji. Główne zadania serwera to zapisywanie nowych subskrypcji powiadomień push i usuwanie starych subskrypcji. Dzięki tym subskrypcjom możesz w przyszłości wysyłać wiadomości do klientów. Aby dowiedzieć się więcej o procesie subskrypcji, przeczytaj artykuł Subskrypcja powiadomień push przez klienta.

Zapisywanie informacji o nowej subskrypcji

Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .

Na karcie aplikacji kliknij Zarejestruj pracownika usługi. W polu stanu powinien pojawić się komunikat podobny do tego:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

Na karcie aplikacji kliknij Subskrybuj powiadomienia push. Przeglądarka lub system operacyjny może zapytać, czy chcesz otrzymywać powiadomienia push z tej witryny. Kliknij Zezwól (lub inną równoważną frazę używaną przez przeglądarkę/system operacyjny). W polu stanu powinien pojawić się komunikat podobny do tego:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

Uwaga: adres URL punktu końcowego zmienia się w zależności od używanej przeglądarki. Na przykład w Firefoksie adres URL zaczyna się od https://updates.push.services.mozilla.com/….

Wróć do kodu, klikając Wyświetl źródło w interfejsie Glitch.
Aby otworzyć dzienniki błędów, kliknij kolejno Narzędzia i Dzienniki. Powinieneś zobaczyć /add-subscription, a za nim dane. /add-subscription to adres URL, do którego klient wysyła żądanie POST, gdy chce zasubskrybować powiadomienia push. Dane, które podajemy poniżej, to informacje o subskrypcji klienta, które musisz zapisać.
Otwórz pokój server.js.
Zaktualizuj logikę obsługi trasy /add-subscription za pomocą tego kodu:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Uwaga: baza danych zapisuje dane w tabeli .data/db.json. Aby sprawdzić ten plik w Glitch, kliknij kolejno Narzędzia, Terminal i uruchom w terminalu cat .data/db.json. .data/db.json jest usuwany za każdym razem, gdy edytujesz aplikację. Dzieje się tak, ponieważ Glitch uruchamia skrypt start w package.json za każdym razem, gdy edytujesz aplikację, a skrypt ten zawiera wywołanie rm .data/db.json.

Usuwanie starych informacji o subskrypcji

Wróć do karty aplikacji.
Kliknij Anuluj subskrypcję powiadomień push.
Ponownie przejrzyj dzienniki błędów. Powinieneś zobaczyć /remove-subscription, a zaraz potem informacje o abonamencie klienta.
Zaktualizuj logikę obsługi trasy /remove-subscription za pomocą tego kodu:

app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Wysyłanie powiadomień

Jak wyjaśniono w artykule Wysyłanie powiadomień push, Twój serwer nie wysyła powiadomień push bezpośrednio do klientów. Zamiast tego korzysta z usługi push. Twój serwer po prostu uruchamia proces przesyłania wiadomości do klientów, wysyłając żądania usługi sieciowej (żądania protokołu przesyłania po stronie klienta) do usługi sieciowej (usługi przesyłania po stronie klienta) należącej do dostawcy przeglądarki, której używa użytkownik.

Zaktualizuj logikę obsługi trasy /notify-me za pomocą tego kodu:

app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

Zmodyfikuj funkcję sendNotifications(), dodając do niej ten kod:

function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

Zaktualizuj logikę obsługi trasy /notify-all za pomocą tego kodu:

app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

Wróć do karty aplikacji.
Kliknij kolejno Anuluj subskrypcję powiadomień push i Zasubskrybuj powiadomienia push. Jest to konieczne, ponieważ Glitch restartuje projekt za każdym razem, gdy edytujesz kod, a projekt jest skonfigurowany tak, aby usuwać bazę danych przy starcie.
Kliknij Powiadamiaj mnie. Otrzymasz powiadomienie push. Tytuł powinien brzmieć Hello, Notifications!, a treść ID: <ID>, gdzie <ID> to dowolna liczba.
Otwórz aplikację w innych przeglądarkach lub na innych urządzeniach i spróbuj subskrybować powiadomienia push, klikając przycisk Prześlij do wszystkich. Powinieneś otrzymać to samo powiadomienie na wszystkich urządzeniach, na których subskrybujesz kanał (tzn. identyfikator w treści powiadomienia push powinien być taki sam).

Dalsze kroki

Aby lepiej zrozumieć, jak działają powiadomienia push, przeczytaj omówienie powiadomień push.
Zapoznaj się z Codelab: tworzenie klienta powiadomień push, aby dowiedzieć się, jak utworzyć klienta, który prosi o pozwolenie na wysyłanie powiadomień, subskrybuje urządzenie do odbioru powiadomień push i korzysta z usług workera, aby odbierać powiadomienia push i wyświetlać je jako powiadomienia.