Ćwiczenia z programowania: tworzenie serwera powiadomień push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Z tego ćwiczenia w Codelabs dowiesz się krok po kroku, jak utworzyć serwer powiadomień push. Po ukończeniu tego ćwiczenia będziesz mieć serwer, który:

  • Śledzi subskrypcje powiadomień push (tzn.serwer tworzy nowy rekord w bazie danych, gdy klient wyrazi zgodę na otrzymywanie powiadomień push, i usuwa istniejący rekord w bazie danych, gdy klient zrezygnuje z otrzymywania powiadomień).
  • Wysyła powiadomienie push do jednego klienta.
  • Wysyła powiadomienie push do wszystkich klientów, którzy subskrybują powiadomienia.

Ten przewodnik skupia się na nauce przez działanie i nie omawia zbyt wielu koncepcji. Więcej informacji o powiadomieniach push znajdziesz w artykule Jak działają powiadomienia push?.

Kod klienta w tym ćwiczeniu jest już gotowy. W tym ćwiczeniu zaimplementujesz tylko serwer. Aby dowiedzieć się, jak wdrożyć klienta powiadomień push, zapoznaj się z kursem: Tworzenie klienta powiadomień push.

Zgodność z przeglądarką

Ten przewodnik działa w tych kombinacjach systemów operacyjnych i przeglądarek:

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

Wiadomo, że te systemy operacyjne (lub kombinacje systemu operacyjnego i przeglądarki) nie działają z tym kursem:

  • macOS: Brave, Edge, Safari
  • iOS

Stos aplikacji

  • Serwer jest oparty na 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 korzystać z żadnej z tych technologii. Wybraliśmy te technologie, ponieważ zapewniają one niezawodne środowisko do nauki programowania.

Konfiguracja

Konfigurowanie uwierzytelniania

Aby powiadomienia push działały, musisz skonfigurować serwer i klienta za pomocą kluczy uwierzytelniania. Więcej informacji znajdziesz w artykule Podpisywanie żądań protokołu powiadomień push w internecie.

  1. Otwórz terminal.
  2. W terminalu uruchom polecenie npx web-push generate-vapid-keys. Skopiuj wartości klucza prywatnego i klucza publicznego.
  3. Otwórz .env i zaktualizuj VAPID_PUBLIC_KEY oraz VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT na mailto:test@test.test. Wszystkie te wartości powinny być ujęte w cudzysłów. 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"
  1. Otwórz pokój public/index.js.
  2. Zastąp VAPID_PUBLIC_KEY_VALUE_HERE wartością klucza publicznego.

Zarządzaj subskrypcjami

Klient obsługuje większość procesu subskrypcji. Główne zadania serwera to zapisywanie nowych subskrypcji powiadomień push i usuwanie starych subskrypcji. Te subskrypcje umożliwiają wysyłanie wiadomości do klientów w przyszłości. Więcej informacji o procesie subskrypcji znajdziesz w sekcji Subskrybowanie klienta w celu otrzymywania powiadomień push.

Zapisywanie nowych informacji o subskrypcji

  1. Na karcie aplikacji kliknij Register service worker (Zarejestruj service worker). W polu stanu powinien się pojawić komunikat podobny do tego:
Service worker registered. Scope: https://example.com
  1. Na karcie aplikacji kliknij Subskrybuj powiadomienia push. Przeglądarka lub system operacyjny prawdopodobnie zapyta, czy chcesz zezwolić witrynie na wysyłanie powiadomień push. Kliknij Zezwól (lub odpowiednik tej frazy w przeglądarce lub systemie operacyjnym). W polu stanu powinien pojawić się komunikat podobny do tego:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Otwórz terminal, aby wyświetlić logi. Powinien pojawić się znak /add-subscription, a za nim dane. /add-subscription to adres URL, na który klient wysyła żądanie POST, gdy chce zasubskrybować powiadomienia push. Dane, które pojawią się później, to informacje o subskrypcji klienta, które musisz zapisać.
  2. Otwórz pokój server.js.
  3. Zaktualizuj logikę modułu obsługi trasy /add-subscription tym kodem:
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);
});

Usuwanie starych informacji o subskrypcji

  1. Wróć do karty aplikacji.
  2. Kliknij Anuluj subskrypcję powiadomień push.
  3. Ponownie przejrzyj logi. Powinien pojawić się symbol /remove-subscription, a za nim informacje o subskrypcji klienta.
  4. Zaktualizuj logikę modułu obsługi trasy /remove-subscription tym kodem:
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 wiadomości push, serwer nie wysyła wiadomości push bezpośrednio do klientów. Zamiast tego korzysta z usługi push. Serwer po prostu rozpoczyna proces wysyłania wiadomości do klientów, wysyłając żądania usługi internetowej (żądania protokołu powiadomień push) do usługi internetowej (usługi powiadomień push) należącej do dostawcy przeglądarki, z której korzysta użytkownik.

  1. Zaktualizuj logikę obsługi trasy /notify-me tym kodem:
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);
});
  1. Zaktualizuj funkcję sendNotifications() za pomocą tego kodu:
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} `);
      });
  });
}
  1. Zaktualizuj logikę obsługi trasy /notify-all tym kodem:
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);
  }
});
  1. Wróć do karty aplikacji.
  2. Kliknij Powiadom mnie. Powinno pojawić się powiadomienie push. Tytuł powinien mieć postać Hello, Notifications!, a treść ID: <ID>, gdzie <ID> to liczba losowa.
  3. Otwórz aplikację w innych przeglądarkach lub na innych urządzeniach i spróbuj zasubskrybować powiadomienia push, a następnie kliknij przycisk Powiadom wszystkich. To samo powiadomienie powinno być wysyłane na wszystkie urządzenia, na których subskrybujesz powiadomienia (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 samouczkiem: Tworzenie klienta powiadomień push, aby dowiedzieć się, jak utworzyć klienta, który prosi o uprawnienia do wysyłania powiadomień, subskrybuje urządzenie w celu otrzymywania powiadomień push i używa skryptu service worker do odbierania wiadomości push i wyświetlania ich jako powiadomień.