W tym ćwiczeniu w Codelabs wykorzystasz mechanizm Service Worker aby zarządzać powiadomieniami. W tych instrukcjach zakładamy, że znasz już oraz podstawy wysyłania próśb o zgodę na wyświetlanie powiadomień i wysyłania powiadomień. Jeśli chcesz odświeżyć sobie informacje o powiadomieniach, przeczytaj Pierwsze kroki z interfejsem Notification API ćwiczenie w Codelabs. Aby dowiedzieć się więcej o skryptach service worker, zapoznaj się z artykułem Wprowadzenie do mechanizmów Service Worker Matta Gaunta.
Zremiksuj przykładową aplikację i wyświetl ją w nowej karcie
Powiadomienia z umieszczonej aplikacji Glitch są automatycznie blokowane, więc nie możesz wyświetlić podglądu aplikacji na tej stronie. Oto co musisz zrobić:
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
Usterka powinna się otworzyć w nowej karcie Chrome.
Podczas wykonywania tych ćwiczeń w programie wprowadź zmiany w kodzie w umieszczonym na tej stronie glitchu. Aby zobaczyć zmiany, odśwież nową kartę w aplikacji, która jest aktywna w sieci.
Zapoznanie się z przykładową aplikacją i uruchamianiem kodu
Zacznij od zapoznania się z aktywną aplikacją w nowej karcie Chrome:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
Kliknij kartę Konsola.
Upewnij się, że w menu Poziomy wybrana jest opcja Informacje. obok pola Filtr.
W konsoli Narzędzi deweloperskich w przypadku opublikowanej aplikacji powinien pojawić się taki komunikat:
TODO: Implement getRegistration()
.To jest komunikat z kropku funkcji, który wdrożysz w ramach tego ćwiczenia z programowania.
Przyjrzyjmy się teraz kodowi przykładowej aplikacji w umieszczonej na tej stronie stronie Glitch.
W umieszczonej wersji błędu zobacz
public/index.js
:Dostępne są 4 kropki dla funkcji, które implementujesz:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
isendNotification
.Funkcja
requestPermission
prosi użytkownika o zgodę na wysyłanie powiadomień. Jeśli udało Ci się już wykonać ćwiczenie z programowania dotyczące interfejsu Notification API, zauważysz, że w tym miejscu jest używana jego funkcjarequestPermission
. Jedyną różnicą jest to, że po rozpatrzeniu prośby o uprawnienia aktualizuje się też interfejs użytkownika.Funkcja
updateUI
odświeża wszystkie przyciski i komunikaty w aplikacji.Funkcja
initializePage
wykrywa funkcje skryptu service work w przeglądarce i aktualizuje interfejs użytkownika aplikacji.Skrypt czeka na wczytanie strony, a następnie go inicjuje.
W umieszczonej usterce otwórz
public/service-worker.js
.Jak sama nazwa wskazuje, należy dodać do aplikacji kod, aby zarejestrować ten plik jako skryptor service worker.
Chociaż plik nie jest jeszcze używany przez aplikację, zawiera on kod początkowy, który wyświetla komunikat w konsoli, gdy skrypt service worker jest aktywny.
Do
public/service-worker.js
dodasz kod służący do obsługi powiadomień, gdy skrypt service worker je otrzyma.
Rejestrowanie skryptu service worker
W tym kroku napiszesz kod uruchamiany
gdy użytkownik kliknie Zarejestruj skrypt service worker w interfejsie aplikacji.
Ten kod spowoduje zarejestrowanie public/service-worker.js
jako skryptu service worker.
W osadzonym edytorze błędów otwórz
public/index.js
. Zastąp funkcjęregisterServiceWorker
tym kodem:// Use the Service Worker API to register a service worker. async function registerServiceWorker() { await navigator.serviceWorker.register('./service-worker.js') updateUI(); }
Pamiętaj, że
registerServiceWorker
używa deklaracjiasync function
, aby ułatwić obsługę obietnic. W ten sposób możeszawait
uzyskać wartość zPromise
. Na przykład powyższa funkcja czeka na wynik zarejestrowania skryptu service worker przed zaktualizowaniem interfejsu użytkownika. Więcej informacji znajdziesz na stronieawait
w MDN.Teraz gdy użytkownik może zarejestrować skrypt service worker, możesz uzyskać odwołanie do obiektu rejestracji skryptu service worker. W
public/index.js
zastąp funkcjęgetRegistration
tym kodem:// Get the current service worker registration. function getRegistration() { return navigator.serviceWorker.getRegistration(); }
Powyższa funkcja korzysta z funkcji Interfejs Service Worker API , aby pobrać bieżącą rejestrację skryptu service worker, jeśli istnieje. Dzięki temu odniesienie do rejestracji skryptu service worker jest nieco wygodniejsze.
Aby zakończyć rejestrację skryptu service worker, dodaj kod umożliwiający wyrejestrowanie tego skryptu. Zastąp funkcję
unRegisterServiceWorker
tym kodem:// Unregister a service worker, then update the UI. async function unRegisterServiceWorker() { // Get a reference to the service worker registration. let registration = await getRegistration(); // Await the outcome of the unregistration attempt // so that the UI update is not superceded by a // returning Promise. await registration.unregister(); updateUI(); }
Na karcie, na której przeglądasz aktywną aplikację, załaduj ponownie stronę. Przyciski Zarejestruj skrypt service worker i Wyrejestruj skrypt service worker powinny już działać.
Wysyłaj powiadomienia do skryptu service worker
W tym kroku napiszesz kod, który będzie uruchamiany, gdy użytkownik kliknie Wyślij powiadomienie w interfejsie aplikacji. Ten kod spowoduje utworzenie powiadomienia, sprawdzenie, czy skrypt service worker jest zarejestrowany, a następnie wysłanie powiadomienia do skryptu service worker za pomocą jego metody postMessage
.
W umieszczonym na stronie edytora Glitch otwórz plik public/index.js
i
zastąp funkcję sendNotification
tym kodem:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
Działanie tego kodu:
sendNotification
jest funkcją asynchroniczną, więc możesz użyćawait
, aby uzyskać odniesienie do rejestracji skryptu service worker.Metoda
postMessage
skryptu service worker wysyła dane z aplikacji do skryptu service worker. Więcej informacji znajdziesz w dokumentacji MDN dotyczącej postMessage.Przed próbą uzyskania dostępu do funkcji
postMessage
kod sprawdza obecność właściwościnavigator.serviceWorker.controller
.navigator.serviceWorker.controller
będzie mieć wartośćnull
, jeśli nie będzie żadnego aktywnego skryptu service worker lub jeśli strona została wymuszona na odświeżeniu (Shift+
Załaduj ponownie). Więcej informacji znajdziesz w dokumentacji kontrolera ServiceWorker w MDN.
Obsługa powiadomień w skrypcie service worker
W tym kroku napiszesz w skrypcie service worker, który będzie obsługiwać publikowane w nim wiadomości i wyświetlać użytkownikowi powiadomienia.
W osadzonym edytorze błędów otwórz public/service-worker.js
. Dodaj ten kod na końcu pliku:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
Oto krótkie wyjaśnienie:
self
jest odwołaniem do skryptu service worker.Chociaż skrypt service worker obsługuje teraz wyświetlanie powiadomień, główny interfejs aplikacji nadal odpowiada za uzyskanie od użytkownika zgody na wyświetlanie powiadomień. Jeśli nie przyznasz uprawnień, obietnica zwrócona przez aplikację
showNotification
zostanie odrzucona. Powyższy kod używa blokucatch
, aby uniknąć nieobsłużonego błędu odrzuceniaPromise
i lepiej rozwiązać ten problem.
Jeśli nie udało się rozwiązać problemu, otwórz stronę glitch.com/edit/#!/codelab-notifications-service-worker-completed, aby znaleźć kompletny kod.
Przejdź do następnego ćwiczenia z programowania w tej serii: Tworzenie serwera powiadomień push.