Ć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. Przeczytaj artykuł Jak działają powiadomienia push, aby dowiedzieć się więcej o koncepcjach związanych z powiadomieniami push.

Kod serwera w tym ćwiczeniu jest już gotowy. W tym ćwiczeniu 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

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:test@test.test"
  1. Otwórz pokój public/index.js.
  2. Zastąp VAPID_PUBLIC_KEY_VALUE_HERE wartością klucza publicznego.

Rejestrowanie skryptu service worker

Aby klient mógł otrzymywać i wyświetlać powiadomienia, potrzebuje komponentu service worker. Najlepiej zarejestrować service worker jak najwcześniej. Więcej informacji znajdziesz w artykule Odbieranie i wyświetlanie wiadomości push jako powiadomień.

  1. Zastąp komentarz // TODO add startup logic here tym kodem:

    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);

  2. W Chrome otwórz konsolę Narzędzi deweloperskich.

  3. W konsoli powinien pojawić się komunikat Service worker was registered. logged to the Console.

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.

  1. W public/index.js zastąp // TODO komentarz w subscribeButtonHandler() tym kodem:

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

  2. Wróć na kartę aplikacji i kliknij Subskrybuj powiadomienia push. Przeglądarka lub system operacyjny zapyta, czy chcesz zezwolić witrynie na wysyłanie powiadomień push.

  3. Kliknij Zezwól (lub odpowiednik 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 dopilnować, aby serwer zapisał je w bazie danych na stałe.

  1. 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 przeglądarki nie zezwalają na taką funkcję ze względu na ochronę 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:
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 już wspomnieliśmy, 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ń.

  1. Otwórz public/service-worker.js i zastąp // TODO komentarz w procedurze obsługi zdarzeń push w usłudze Service Worker tym kodem:

    let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title,
  options
);

  2. Wróć do karty aplikacji.

  3. Kliknij Powiadom mnie. Powinno pojawić się powiadomienie push.

  4. Otwórz adres URL karty aplikacji w innych obsługiwanych przeglądarkach. Wykonaj kolejne czynności w procesie subskrypcji i kliknij Powiadom wszystkich. W każdym z nich powinno pojawić się to samo powiadomienie push.

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

Otwieranie adresu URL, gdy użytkownik kliknie powiadomienie

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.

  1. Zastąp komentarz // TODO w notificationclickobsłudze zdarzeń// TODO w usłudze Service Worker tym kodem:

    event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

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