Ćwiczenia z programowania: tworzenie serwera powiadomień push

Kate Jeffreys
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 plik nowego rekordu bazy danych, gdy klient włączy powiadomienia push. usuwa istniejący rekord bazy danych, gdy klient zrezygnuje)
  • Wysyła powiadomienie push do pojedynczego klienta
  • Wysyła powiadomienia push do wszystkich subskrybowanych klientów

Dzięki tym ćwiczeniom w Codelabs dowiesz się, jak uczyć się poprzez wykonywanie, często omawiają koncepcje. Wymelduj się Jak działają powiadomienia push? , aby poznać pojęcia związane z powiadomieniami push.

Kod klienta tego ćwiczenia z programowania jest już gotowy. Będziesz tylko jak zaimplementować serwer w ramach tego ćwiczenia. Aby dowiedzieć się, jak zaimplementować klienta powiadomień push, zapoznaj się z ćwiczeniem z programowania: tworzenie powiadomienia push .

Zapoznaj się z materiałem push-notifications-server-codelab-complete (źródło). aby zobaczyć pełny kod.

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 (lub kombinacji 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 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

Edytor kodu widoczny po prawej stronie instrukcji będzie mieć nazwę interfejs Glitch.

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

Konfigurowanie uwierzytelniania

Aby otrzymywać powiadomienia push, musisz skonfigurować: serwera i klienta za pomocą kluczy uwierzytelniania. Przeczytaj artykuł o podpisywaniu żądań protokołu Web push. aby dowiedzieć się, dlaczego.

  1. Otwórz terminal z zakłóceniami, klikając Narzędzia, a następnie Terminal.
  2. W terminalu uruchom polecenie npx web-push generate-vapid-keys. Skopiuj klucz prywatny i par klucz-wartość.
  3. Otwórz .env i zaktualizuj VAPID_PUBLIC_KEY oraz VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT do mailto:test@test.test. Wszystkie te wartości powinny być spakowane w cudzysłowie. Po wprowadzeniu zmian plik .env powinien wyglądać podobne do tego:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Zamknij terminal z zakłóceniami.
.
  1. Otwórz pokój public/index.js.
  2. Zastąp VAPID_PUBLIC_KEY_VALUE_HERE wartością swojego klucza publicznego.

Zarządzaj subskrypcjami

Klient zajmuje się większością procesu subskrypcji. Główny Twój serwer musi zapisać nowe subskrypcje powiadomień push i usuń stare subskrypcje. Subskrypcje umożliwiają wysyłać wiadomości do klientów w przyszłości. Zobacz Subskrybowanie powiadomień push klienta. .

Zapisywanie nowych informacji o subskrypcji

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran
.
  1. Na karcie aplikacji kliknij Zarejestruj skrypt service worker. W polu stanu powinien zobaczyć komunikat podobny do tego:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. Na karcie aplikacji kliknij Subskrybuj do push. Twoja przeglądarka lub system operacyjny prawdopodobnie pyta, czy chcesz zezwolić stronie na wysyłanie powiadomień push. Kliknij Zezwalaj (lub cokolwiek innego). wyrażenia używane przez przeglądarkę lub system operacyjny). W polu stanu powinien pojawić się podobny komunikat na:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Wróć do kodu, klikając Wyświetl źródło w interfejsie Glitch.
  2. Otwórz dzienniki błędów, klikając Narzędzia, a następnie Logi. Ty powinien zobaczyć /add-subscription, a następnie jakieś dane. /add-subscription to adres URL, który klient wysyła POST kiedy chce zasubskrybować powiadomienia push. Dane, które poniżej znajdziesz informacje o subskrypcji klienta, które musisz zapisać.
  3. Otwórz pokój server.js.
  4. 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);
});

Usuwanie starych informacji o subskrypcji

  1. Wróć na kartę aplikacji.
  2. Kliknij Anuluj subskrypcję powiadomień push.
  3. Jeszcze raz przejrzyj dzienniki błędów. Zobaczysz obserwowane miejsce: /remove-subscription dzięki informacjom o subskrypcji 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);
});

Wyślij powiadomienia

Jak wyjaśniliśmy w sekcji Wysyłanie wiadomości push, Twój serwer nie wysyła komunikatów push bezpośrednio do klientów. Wykorzystuje do tego usługę push. Serwer rozpoczyna proces wysyłania wiadomości do klientów przez żądań usługi (żądania protokołu Web push) do usługi sieciowej (usługi push) należący do dostawcy przeglądarki, z której korzysta użytkownik.

  1. 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);
});
  1. 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} `);
      });
  });
}
  1. 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);
  }
});
  1. Wróć na kartę aplikacji.
  2. Kliknij Anuluj subskrypcję powiadomień push, a następnie jeszcze raz kliknij Subskrybuj do powiadomień push. Jest to konieczne tylko dlatego, że, jak już wspomnieliśmy, Glitch ponownie uruchamia projekt. za każdym razem, gdy edytujesz kod, a projekt jest skonfigurowany pod kątem usuwania bazy danych po uruchomieniu.
  3. Kliknij Powiadom mnie. Otrzymasz powiadomienie push. Tytuł powinien to Hello, Notifications!, a treść powinna mieć postać ID: <ID>, gdzie <ID> to liczba losowa.
  4. Otwórz swoją aplikację w innych przeglądarkach lub na innych urządzeniach i zasubskrybuj ją, aby otrzymywać powiadomienia push i kliknij przycisk Powiadom wszystkich. To samo powiadomienie powinno dotrzeć do Ciebie wszystkich subskrybowanych urządzeń (tj. identyfikator w treści powiadomienia push powinien takie same).

Dalsze kroki