Ćwiczenia z programowania: tworzenie klienta powiadomień push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

  • Subskrybuje użytkownika w celu otrzymywania powiadomień push.
  • Otrzymuje wiadomości push i wyświetla je jako powiadomienia.
  • Anuluje subskrypcję powiadomień push użytkownika.

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 serwera w tym ćwiczeniu jest już gotowy. W tym ćwiczeniu z programowania zaimplementujesz tylko klienta. Aby dowiedzieć się, jak wdrożyć serwer powiadomień push, zapoznaj się z kursem: Tworzenie serwera 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

Konfiguracja

Pobieranie kopii kodu, którą można edytować

  • Kliknij Remiks do edycji, aby umożliwić edytowanie projektu.

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. Zwykle obiekty tajne są przechowywane w pliku .env, podobnie jak w tym przykładzie.

VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  • Otwórz pokój public/index.js.
  • Zastąp VAPID_PUBLIC_KEY_VALUE_HERE wartością klucza publicznego.

Rejestrowanie skryptu service worker

Aby otrzymywać i wyświetlać powiadomienia, klient będzie potrzebować usługi Service Worker. Najlepiej zarejestrować service workera jak najwcześniej. Więcej informacji znajdziesz w artykule Odbieranie i wyświetlanie wiadomości push jako powiadomień.

  • Zastąp komentarz // TODO add startup logic here tym kodem:
// TODO add startup logic here if ('serviceWorker' in navigator && 'PushManager' in window) {   navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {     console.info('Service worker was registered.');     console.info({serviceWorkerRegistration});   }).catch(error => {     console.error('An error occurred while registering the service worker.');     console.error(error);   });   subscribeButton.disabled = false; } else {   console.error('Browser does not support service workers or push messages.'); }  subscribeButton.addEventListener('click', subscribeButtonHandler); unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  • Aby otworzyć Narzędzia dla programistów, naciśnij Ctrl+Shift+J (lub Command+Option+J na Macu).
  • Kliknij kartę Konsola. W konsoli powinien pojawić się komunikat Service worker was registered..

Prośba o zgodę na wyświetlanie powiadomień push

Nigdy nie proś o zgodę na wysyłanie powiadomień push podczas wczytywania strony. Zamiast tego interfejs powinien zapytać użytkownika, czy chce otrzymywać powiadomienia push. Gdy użytkownik wyraźnie potwierdzi zgodę (np. klikając przycisk), możesz rozpocząć formalny proces uzyskiwania od przeglądarki uprawnień do wysyłania powiadomień push.

  • W public/index.js zastąp // TODO komentarz w  subscribeButtonHandler() tym kodem:
// TODO // Prevent the user from clicking the subscribe button multiple times. subscribeButton.disabled = true; const result = await Notification.requestPermission(); if (result === 'denied') {   console.error('The user explicitly denied the permission request.');   return; } if (result === 'granted') {   console.info('The user accepted the permission request.'); }
  • Wróć na kartę aplikacji i 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 tego wyrażenia w przeglądarce lub systemie operacyjnym). W konsoli powinien pojawić się komunikat informujący, czy prośba została zaakceptowana czy odrzucona.

Subskrybowanie powiadomień push

Proces subskrypcji obejmuje interakcję z usługą internetową kontrolowaną przez dostawcę przeglądarki, która jest nazywana usługą push. Po uzyskaniu informacji o subskrypcji powiadomień push musisz wysłać je na serwer i sprawić, aby serwer przechowywał je w bazie danych przez dłuższy czas. Więcej informacji o procesie subskrypcji znajdziesz w sekcji Subskrybowanie klienta w celu otrzymywania powiadomień push.

  • Dodaj do pliku subscribeButtonHandler() ten wyróżniony kod:
subscribeButton.disabled = true; const result = await Notification.requestPermission(); if (result === 'denied') {   console.error('The user explicitly denied the permission request.');   return; } if (result === 'granted') {   console.info('The user accepted the permission request.'); } const registration = await navigator.serviceWorker.getRegistration(); const subscribed = await registration.pushManager.getSubscription(); if (subscribed) {   console.info('User is already subscribed.');   notifyMeButton.disabled = false;   unsubscribeButton.disabled = false;   return; } const subscription = await registration.pushManager.subscribe({   userVisibleOnly: true,   applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY) }); notifyMeButton.disabled = false; fetch('/add-subscription', {   method: 'POST',   headers: {     'Content-Type': 'application/json'   },   body: JSON.stringify(subscription) });

Opcja userVisibleOnly musi mieć wartość true. W przyszłości może być możliwe wysyłanie wiadomości bez wyświetlania powiadomień widocznych dla użytkownika (ciche wysyłanie), ale obecnie przeglądarki nie zezwalają na taką funkcję ze względu na obawy dotyczące prywatności.

Wartość applicationServerKey zależy od funkcji narzędziowej, która przekształca ciąg Base64 w tablicę Uint8Array. Ta wartość służy do uwierzytelniania między serwerem a usługą push.

Anulowanie subskrypcji powiadomień push

Gdy użytkownik zasubskrybuje powiadomienia push, interfejs musi umożliwiać rezygnację z subskrypcji, jeśli użytkownik zmieni zdanie i nie będzie już chciał otrzymywać powiadomień push.

  • Zastąp komentarz // TODO w pliku unsubscribeButtonHandler() tym kodem:
// TODO const registration = await navigator.serviceWorker.getRegistration(); const subscription = await registration.pushManager.getSubscription(); fetch('/remove-subscription', {   method: 'POST',   headers: {     'Content-Type': 'application/json'   },   body: JSON.stringify({endpoint: subscription.endpoint}) }); const unsubscribed = await subscription.unsubscribe(); if (unsubscribed) {   console.info('Successfully unsubscribed from push notifications.');   unsubscribeButton.disabled = true;   subscribeButton.disabled = false;   notifyMeButton.disabled = true; }

Otrzymywanie wiadomości push i wyświetlanie jej jako powiadomienia

Jak wspomnieliśmy wcześniej, do obsługi odbierania i wyświetlania wiadomości wysłanych do klienta z serwera potrzebny jest service worker. Więcej informacji znajdziesz w artykule Odbieranie i wyświetlanie wiadomości push jako powiadomień.

  • Otwórz plik public/service-worker.js i zastąp komentarz // TODO w procedurze obsługi zdarzeń push w service workerze tym kodem:
// TODO let data = event.data.json(); const image = 'logo.png'; const options = {   body: data.options.body,   icon: image } self.registration.showNotification(   data.title,    options );
  • Wróć do karty aplikacji.
  • Kliknij Powiadom mnie. Powinno pojawić się powiadomienie push.
  • Spróbuj otworzyć adres URL karty aplikacji w innych przeglądarkach (lub nawet na innych urządzeniach), przejść proces subskrypcji, a następnie kliknąć Powiadom wszystkich. Powinno się pojawić to samo powiadomienie push we wszystkich przeglądarkach, w których masz subskrypcję. Wróć do sekcji Zgodność przeglądarki, aby zobaczyć listę kombinacji przeglądarki i systemu operacyjnego, które działają lub nie działają.

Powiadomienie możesz dostosować na wiele sposobów. Więcej informacji znajdziesz w parametrach ServiceWorkerRegistration.showNotification().

Otwieranie adresu URL po kliknięciu powiadomienia przez użytkownika

W rzeczywistości prawdopodobnie użyjesz powiadomienia, aby ponownie zaangażować użytkownika i zachęcić go do odwiedzenia Twojej witryny. Aby to zrobić, musisz nieco bardziej skonfigurować instancję roboczą usługi.

  • Zastąp komentarz // TODO w notificationclickobsłudze zdarzeń// TODO w usłudze Service Worker tym kodem:
// TODO event.notification.close(); event.waitUntil(self.clients.openWindow('https://web.dev'));
  • Wróć na kartę aplikacji, wyślij do siebie kolejne powiadomienie, a następnie kliknij je. W przeglądarce powinna otworzyć się nowa karta i załadować tekst https://web.dev.

Dalsze kroki