Ćwiczenia z programowania: tworzenie serwera powiadomień push

Kate Jeffreys

Kayce Basques

Aby wykonać to ćwiczenie w Codelabs, otwórz tę usterkę w drugiej karcie.

To ćwiczenie w Codelab pokazuje krok po kroku, jak utworzyć serwer powiadomień push. Po zakończeniu tego ćwiczenia 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);
• 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ęć. Więcej informacji o pojęciach związanych z powiadomieniami push znajdziesz w artykule 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 bazuje na pliku 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 środowisko do ćwiczenia w Codelabs.

Konfiguracja

Pobieranie edytowalnej kopii kodu

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

1. Kliknij Remix to Edit (Zmiksuj 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ń protokołu web push.

1. Otwórz terminal Glitch, klikając kolejno Narzędzia i Terminal.
2. W terminalu uruchom npx web-push generate-vapid-keys. Skopiuj wartości klucza prywatnego i klucza publicznego.
3. Otwórz .env i zaktualizuj VAPID_PUBLIC_KEY i VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT na mailto:[e-mail]. Wszystkie te wartości powinny być ujęte w podwójne cudzysłowy. Po wprowadzeniu zmian plik .env powinien wyglądać tak:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

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

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

Zarządzaj subskrypcjami

Większość procesu subskrypcji obsługuje klient. Serwer musi przede wszystkim zapisać nowe subskrypcje powiadomień push i usunąć stare. 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

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

Kluczowe pojęcie: kartę, którą właśnie otworzysz, będziemy nazywać kartą aplikacji.

1. 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/

1. Na karcie aplikacji kliknij Subskrybuj powiadomienia push. Przeglądarka lub system operacyjny może zapytać, czy chcesz otrzymywać powiadomienia push z tej witryny. Kliknij Zezwalaj (lub inne wyrażenie, którego używa Twoja przeglądarka lub 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/….

1. Wróć do kodu, klikając Wyświetl źródło w interfejsie Glitch.
2. 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 należy zapisać.
3. Otwórz pokój server.js.
4. 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 cat .data/db.json w terminalu. .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

1. Wróć do karty aplikacji.
2. Kliknij Anuluj subskrypcję powiadomień push.
3. Ponownie przejrzyj dzienniki błędów. Powinieneś zobaczyć /remove-subscription, a zaraz potem informacje o abonamencie klienta.
4. 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);
});

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. Serwer po prostu uruchamia proces przesyłania komunikatów 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.

1. 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);
});

1. 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} `);
      });
  });
}

1. 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);
  }
});

1. Wróć do karty aplikacji.
2. Kliknij kolejno Anuluj subskrypcję powiadomień push i Zasubskrybuj powiadomienia push. Jest to konieczne, ponieważ, jak już wspomnieliśmy, Glitch uruchamia projekt od nowa za każdym razem, gdy edytujesz kod, a projekt jest skonfigurowany tak, aby usuwać bazę danych przy każdym uruchomieniu.
3. Kliknij Powiadamiaj mnie. Otrzymasz powiadomienie push. Tytuł powinien mieć postać Hello, Notifications!, a treść – ID: <ID>, gdzie <ID> jest liczbą losową.
4. Otwórz swoją aplikację w innych przeglądarkach lub na innych urządzeniach i spróbuj zasubskrybować je, 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.
• 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.