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

Ćwiczenia z programowania: tworzenie serwera powiadomień push

Kate Jeffreys

Kayce Basques

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak krok po kroku utworzyć serwer powiadomień push. Po zakończeniu ćwiczeń w Codelabs będziesz mieć serwer, który:

Śledzi subskrypcje powiadomień push (tzn. serwer tworzy nowy rekord bazy danych, gdy klient wyrazi zgodę na powiadomienia push, i usuwa istniejący rekord bazy danych, jeśli klient zrezygnuje)
Wysyła powiadomienie push do pojedynczego klienta
Wysyła powiadomienia push do wszystkich subskrybowanych klientów

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak uczyć się, robiąc to mniej i nie mówiąc o pojęciach. Więcej informacji o pojęciach związanych z powiadomieniami push znajdziesz w artykule Jak działają powiadomienia push?.

Kod klienta tego ćwiczenia z programowania jest już gotowy. W ramach tego ćwiczenia z programowania wdrożysz serwer tylko. Więcej informacji o implementowaniu klienta powiadomień push znajdziesz w lekcji Codelab: Tworzenie klienta powiadomień push.

Pełny kod znajdziesz na stronie push-notifications-server-codelab-complete (source).

Zgodność z przeglądarką

Ćwiczenia z programowania działają w następujących kombinacjach systemów operacyjnych i przeglądarek:

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

Wiemy, że te ćwiczenia w Codelabs nie działają w tych systemach operacyjnych (ani ich kombinacjach) i systemów operacyjnych oraz przeglądarek:

macOS: Brave, Edge, Safari
iOS

Stos aplikacji

Serwer bazuje na pliku Express.js.
Biblioteka Node.js web-push obsługuje całą logikę powiadomień push.
Dane subskrypcji są zapisywane w pliku JSON przy użyciu lowdb.

Aby wdrożyć powiadomienia push, nie musisz korzystać z żadnej z tych technologii. Wybraliśmy te technologie, ponieważ zapewniają niezawodne środowisko do ćwiczenia w Codelabs.

Konfiguracja

Pobierz kopię kodu do edycji

W trakcie tego ćwiczenia edytor kodu widoczny po prawej stronie tych instrukcji będzie nazywany interfejsem błędu.

Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

Konfigurowanie uwierzytelniania

Aby otrzymywać powiadomienia push, musisz skonfigurować klucze uwierzytelniające na serwerze i kliencie. Więcej informacji znajdziesz w artykule o podpisywaniu żądań protokołu Web push.

Otwórz terminal z zakłóceniami, klikając Narzędzia, a następnie Terminal.
W terminalu uruchom polecenie npx web-push generate-vapid-keys. Skopiuj klucz prywatny i klucz publiczny.
Otwórz .env i zaktualizuj VAPID_PUBLIC_KEY oraz VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT na mailto:test@test.test. Wszystkie te wartości musisz umieścić w cudzysłowie. Po wprowadzeniu zmian plik .env powinien wyglądać podobnie do tego:

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

Zamknij terminal z zakłóceniami.

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

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

Zarządzaj subskrypcjami

Klient zajmuje się większością procesu subskrypcji. Serwer musi przede wszystkim zapisać nowe subskrypcje powiadomień push i usunąć stare. Te subskrypcje pozwolą Ci wysyłać wiadomości do klientów w przyszłości. Więcej informacji o procesie subskrypcji znajdziesz w artykule Subskrybowanie powiadomień push klienta.

Zapisywanie nowych informacji o subskrypcji

Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .

Na karcie aplikacji kliknij Zarejestruj skrypt service worker. 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 do push. Przeglądarka lub system operacyjny prawdopodobnie zapyta Cię, czy chcesz zezwolić stronie na wysyłanie powiadomień push. Kliknij Zezwalaj (lub inne wyrażenie, którego używa Twoja przeglądarka lub system operacyjny). W polu stanu powinien pojawić się podobny komunikat:

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

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

Wróć do kodu, klikając Wyświetl źródło w interfejsie Glitch.
Otwórz dzienniki błędów, klikając Narzędzia, a następnie Logi. Powinno być widoczne /add-subscription, a następnie trochę danych. /add-subscription to adres URL, pod który klient wysyła żądanie POST, gdy chce zasubskrybować powiadomienia push. Dane poniżej to informacje o subskrypcji klienta, które musisz zapisać.
Otwórz pokój server.js.
Zaktualizuj logikę modułu 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 w regionie .data/db.json. Aby sprawdzić ten plik w Glitch, kliknij kolejno Narzędzia, Terminal i cat .data/db.json w terminalu. Plik .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 zawiera wywołanie funkcji rm .data/db.json.

Usuwanie starych informacji o subskrypcji

Wróć na kartę aplikacji.
Kliknij Anuluj subskrypcję powiadomień push.
Jeszcze raz przejrzyj dzienniki błędów. Powinien wyświetlić się tekst /remove-subscription, a po nim informacje o subskrypcji klienta.
Zaktualizuj logikę modułu 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);
});

Wyślij powiadomienia

Jak wyjaśniliśmy w sekcji Wysyłanie wiadomości push, serwer nie wysyła wiadomości push bezpośrednio do klientów. Wykorzystuje do tego usługę push. Zasadniczo serwer rozpoczyna proces przekazywania wiadomości do klientów, wysyłając żądania usług internetowych (żądania protokołu Web push) do usługi sieciowej (push) należącej do dostawcy przeglądarki, z której korzysta użytkownik.

Zaktualizuj logikę modułu 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);
});

Zaktualizuj funkcję sendNotifications() tym kodem:

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ę modułu 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óć na kartę aplikacji.
Kliknij Anuluj subskrypcję powiadomień push, a następnie jeszcze raz kliknij Subskrybuj do powiadomień push. Jest to konieczne tylko dlatego, że jak wspomnieliśmy wcześniej, Glitch uruchamia projekt ponownie za każdym razem, gdy edytujesz kod, a projekt jest skonfigurowany do usuwania bazy danych podczas uruchamiania.
Kliknij Powiadom mnie. Otrzymasz powiadomienie push. Tytuł powinien mieć postać Hello, Notifications!, a treść – ID: <ID>, gdzie <ID> jest liczbą losową.
Otwórz swoją aplikację w innych przeglądarkach lub na innych urządzeniach i spróbuj ją zasubskrybować, by otrzymywać powiadomienia push, a potem kliknij przycisk Powiadom wszystkich. Będziesz otrzymywać to samo powiadomienie na wszystkich subskrybowanych urządzeniach (tj. 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.
Z lekcji Codelab: Tworzenie klienta powiadomień push dowiesz się, jak utworzyć klienta, który prosi o zgodę na wyświetlanie powiadomień, subskrybuje urządzenie, aby otrzymywać powiadomienia push, i wykorzystuje mechanizm Service Worker do odbierania wiadomości push i wyświetlania ich jako powiadomień.