Ćwiczenia z programowania: tworzenie klienta powiadomień push

Kate Jeffreys

Kayce Basques

Aby wykonać to ćwiczenia z programowania, otwórz tę zakłócenie w drugiej karcie.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak krok po kroku utworzyć klienta powiadomień push. Po zakończeniu ćwiczeń w Codelabs będziesz mieć klienta, który:

• Subskrybuje użytkownika, aby otrzymywać powiadomienia push.
• Odbiera wiadomości push i wyświetla je jako powiadomienia.
• Anuluje subskrypcję powiadomień push użytkownika.

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 serwera tego ćwiczenia z programowania jest już gotowy. Będziesz tylko jak wdrożyć klienta w ramach tego ćwiczenia z programowania. Aby dowiedzieć się, jak zaimplementować serwera powiadomień push, zobacz ćwiczenie z programowania: tworzenie powiadomienia push

Zapoznaj się z artykułem push-notifications-client-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

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

.

Jeśli korzystasz z przeglądarki Chrome w trybie incognito lub gościa, możesz mieć problem z ukończeniem ćwiczeń z programowania. Rozważ użycie profilu zalogowanego do logowania.

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. W interfejsie usługi Glitch kliknij Narzędzia, a następnie Terminal, aby otworzyć terminal zakłócenia.
2. W terminalu Glitch uruchom polecenie npx web-push generate-vapid-keys. Skopiuj klucz prywatny i par klucz-wartość.
3. W interfejsie błędu otwórz plik .env i zaktualizuj VAPID_PUBLIC_KEY oraz VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT do mailto:[e-mail]. 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:[e-mail]"

1. Zamknij terminal z błędami.

.

Wartości zmiennych środowiskowych (elementy w pliku .env) są unikalne w ramach pojedynczego projektu Glitch. Jeśli zremiksujesz projekt, wartości z pliku .env nie zostaną skopiowane.

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

Rejestrowanie skryptu service worker

Klient będzie potrzebować skryptu service worker, aby mógł odbierać i wyświetlać powiadomienia. Najlepiej jak najszybciej zarejestrować skrypt service worker. Zobacz Odbieraj i wyświetlaj przesyłane wiadomości jako powiadomienia z szerszym kontekstem.

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

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

.

Kluczowy termin: w trakcie tego ćwiczenia z programowania otwarta przed chwilą karta będzie nazywana kartą aplikacji.

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
2. Kliknij kartę Konsola. Powinien pojawić się komunikat Użytkownik Service worker was registered. zalogował się w konsoli.

.

Uwaga: w poprzedniej instrukcji zakładamy, że używasz Google Chrome i Narzędzi deweloperskich w Chrome.

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 pytać użytkownika, czy chce otrzymywać powiadomienia push. Gdy użytkownik wyraźnie potwierdzi tę czynność (np. przez kliknięcie przycisku), możesz rozpocząć formalny proces uzyskiwania w przeglądarce zgody na wyświetlanie powiadomień push.

1. W interfejsie błędu kliknij Wyświetl źródło, aby wrócić do kodu.
2. W public/index.js zastąp komentarz // TODO w subscribeButtonHandler() z następującym 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.');
}

1. Wróć do karty aplikacji i kliknij Subskrybuj do push. Twoja przeglądarka lub system operacyjny prawdopodobnie zapyta, czy chcesz zezwolić wysyłać Ci powiadomienia push. Kliknij Zezwalaj (lub inne równoważne wyrażenie). przeglądarki lub systemu operacyjnego). W konsoli powinien pojawić się komunikat informujący o tym, czy prośba została zaakceptowana czy odrzucona.

.

Jeśli korzystasz z okna incognito lub gościa, przeglądarka może automatycznie odrzucić żądanie. Zwróć uwagę na interfejs przeglądarki, który wskazuje, że żądanie zostało automatycznie zablokowane.

Subskrybowanie powiadomień push

Proces subskrypcji obejmuje interakcję z usługą internetową sterowaną przez dostawcę przeglądarki, który jest nazywany usługą push. Gdy już otrzymasz informacje o subskrypcji powiadomień push, które są potrzebne do wysłania ich na serwer; i pozwolić serwerowi na przechowywanie ich w bazie danych przez dłuższy czas. Zobacz Subskrybowanie powiadomień push klienta. .

1. Dodaj do 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. Któregoś dnia będzie można do wysyłania wiadomości bez wyświetlania powiadomień (ciche komunikaty push), ale przeglądarki nie zezwalają obecnie na tę funkcję z powodu kwestii dotyczących prywatności.

Wartość applicationServerKey korzysta z funkcji użytkowej, która konwertuje ciąg base64 na tablicę Uint8Track. Ta wartość jest używana do między serwerem a usługą push.

Anulowanie subskrypcji powiadomień push

Gdy użytkownik zacznie otrzymywać powiadomienia push, interfejs użytkownika musi: umożliwia anulowanie subskrypcji w przypadku, gdy użytkownik zmieni zdanie; i nie chce już otrzymywać powiadomień push.

1. Zastąp komentarz // TODO w dokumencie unsubscribeButtonHandler() następującym 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;
}

Odbieraj wiadomości push i wyświetlaj je jako powiadomienia

Jak wspomnieliśmy wcześniej, potrzebujesz skryptu service worker do obsługi odbieranie i wyświetlanie wiadomości wysłanych do klienta, z Twojego serwera. Zobacz Odbieraj i wyświetlaj przesyłane wiadomości jako powiadomienia, by dowiedzieć się więcej.

1. Otwórz plik public/service-worker.js i zastąp komentarz // TODO w module obsługi zdarzeń push skryptu service worker za pomocą tego kodu:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. Wróć na kartę aplikacji.
2. Kliknij Powiadom mnie. Otrzymasz powiadomienie push.
3. Spróbuj otworzyć adres URL karty aplikacji w innej przeglądarce (albo nawet na innych urządzeniach), przez proces subskrypcji, a potem klikając Powiadom wszystkich. Otrzymasz to samo powiadomienie push we wszystkich przeglądarkach, które subskrybujesz. Powrót do: Zgodność z przeglądarką, aby wyświetlić listę przeglądarek i systemów operacyjnych. o których wiemy, że działają lub nie działają.

Powiadomienia możesz dostosowywać na wiele sposobów. Zobacz parametry ServiceWorkerRegistration.showNotification(), aby dowiedzieć się więcej.

Ważne jest zrozumienie wywołania self.skipWaiting() w detektorze install skryptu service worker. Wyjaśnienie znajdziesz w sekcji Pomijanie fazy oczekiwania. Bez niego zmiany kodu wprowadzone w mechanizmie Service Worker nie będą widoczne od razu. Zależnie od potrzeb możesz używać tej funkcji w swojej witrynie, ale musisz poznać jej działanie.

Otwieranie adresu URL, gdy użytkownik kliknie powiadomienie

W praktyce będziesz raczej używać takich powiadomień jako aby ponownie zaangażować użytkowników i zachęcić ich do odwiedzenia Twojej witryny. Aby to zrobić, musisz nieco skonfigurować mechanizm Service Worker.

1. Zastąp komentarz // TODO w pliku notificationclick skryptu service worker moduł obsługi zdarzeń z tym kodem:

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

1. Wróć na kartę aplikacji, wyślij do siebie kolejne powiadomienie, a następnie kliknij je. W przeglądarce powinna otworzyć się nowa karta i się wczytać https://web.dev

Dalsze kroki

• Zobacz: ServiceWorkerRegistration.showNotification() , aby poznać różne sposoby dostosowywania powiadomień.
• Przeczytaj Omówienie powiadomień push aby lepiej zrozumieć, jak działają powiadomienia push.
• Zapoznaj się z ćwiczeniem z programowania: tworzenie serwera powiadomień push. aby dowiedzieć się, jak zbudować serwer, który zarządza subskrypcjami i wysyła protokół web push żądań.
• Wypróbuj Generator powiadomień , aby przetestować wszystkie możliwe sposoby dostosowywania powiadomień.