W tym ćwiczeniu z programowania będziesz zarządzać powiadomieniami za pomocą service workera. Te instrukcje zakładają, że znasz już podstawy dotyczące pracowników obsługi klienta i wysyłania powiadomień oraz że wiesz, jak prosić o uprawnienia do wysyłania powiadomień. Jeśli chcesz przypomnieć sobie informacje o powiadomieniach, zapoznaj się z tym samouczkiem Codelab dotyczącym interfejsu Notifications API. Więcej informacji o skryptach service worker znajdziesz w artykule Wprowadzenie do skryptów service worker Matta Gaunta.
Zmodyfikuj przykładową aplikację i wyświetl ją w nowej karcie
Powiadomienia są automatycznie blokowane w wbudowanej aplikacji Glitch, więc nie będziesz mieć możliwości wyświetlenia podglądu aplikacji na tej stronie. Zamiast tego:
- Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .
Glitch powinien otworzyć się w nowej karcie Chrome.
W trakcie pracy z tym ćwiczeniem wprowadzaj zmiany w kodzie w osadzonym Glitchu na tej stronie. Odśwież nową kartę z aplikacją na żywo, aby zobaczyć zmiany.
Zapoznaj się ze przykładową aplikacją i początkowym kodem
Na początek sprawdź aplikację na nowej karcie Chrome:
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
Kliknij kartę Konsola.
Upewnij się, że w menu Poziomy obok pola Filtr jest wybrana opcja Informacje.
W konsoli Narzędzi deweloperskich dla aplikacji na żywo powinien pojawić się komunikat:
TODO: Implement getRegistration()
.To wiadomość z elementu zastępczego funkcji, który zaimplementujesz w tym CodeLab.
Teraz przyjrzyjmy się kodom przykładowej aplikacji w osadzonym na tej stronie Glitchu.
W umieszczonej w Glitch stronie
public/index.js
:Dostępnych jest 4 puste funkcje:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
isendNotification
.Funkcja
requestPermission
prosi użytkownika o zezwolenie na wysyłanie powiadomień. Jeśli wykonałeś/wykonałaś ćwiczenie z poziomu Codelab dotyczącego interfejsu Notifications API, zauważysz, że w tym ćwiczeniu jest używana funkcjarequestPermission
. Jedyną różnicą jest to, że po rozpatrzeniu prośby o przyznanie uprawnień aktualizuje ona też interfejs użytkownika.Funkcja
updateUI
odświeża wszystkie przyciski i wiadomości w aplikacji.Funkcja
initializePage
wykrywa funkcje obsługiwane przez usługę w przeglądarce i aktualizuje interfejs użytkownika aplikacji.Skrypt czeka, aż strona się załaduje, a potem ją inicjuje.
W osadzonym Glitchu otwórz
public/service-worker.js
.Jak wskazuje nazwa, dodasz do aplikacji kod, aby zarejestrować ten plik jako element usługi.
Chociaż plik nie jest jeszcze używany przez aplikację, zawiera kod początkowy, który wydrukuje wiadomość w konsoli po aktywacji pracownika usługi.
Do pliku
public/service-worker.js
dodasz kod, który będzie obsługiwać powiadomienia, gdy usługa je otrzyma.
Rejestrowanie skryptu service worker
W tym kroku napiszesz kod, który będzie wykonywany, gdy użytkownik kliknie Zarejestruj moduł service worker w interfejsie aplikacji.
Ten kod zarejestruje public/service-worker.js
jako service workera.
W osadzonym edytorze Glitch otwórz plik
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. Dzięki temu możeszawait
rozwiązaną wartośćPromise
. Na przykład funkcja powyżej czeka na zarejestrowanie skryptu service worker przed zaktualizowaniem interfejsu. Więcej informacji znajdziesz w artykuleawait
na stronie MDN.Użytkownik może teraz zarejestrować usługę wtyczki, a Ty możesz uzyskać odwołanie do obiektu rejestracji usługi wtyczki. W pliku
public/index.js
zastąp funkcjęgetRegistration
tym kodem:// Get the current service worker registration. function getRegistration() { return navigator.serviceWorker.getRegistration(); }
Funkcja ta korzysta z interfejsu Service Worker API, aby pobrać bieżącą rejestrację skryptu service worker (jeśli istnieje). Dzięki temu łatwiej jest uzyskać odwołanie do rejestracji usługi.
Aby dokończyć rejestrację skryptu service worker, dodaj kod, który spowoduje wyrejestrowanie 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 wyświetlasz aplikację na żywo, załaduj ponownie stronę. Przyciski Zarejestruj skrypt service worker i Wyrejestruj skrypt service worker powinny teraz działać.
Wysyłanie powiadomień do service workera
W tym kroku napiszesz kod, który będzie wykonywany, gdy użytkownik kliknie Wyślij powiadomienie w interfejsie aplikacji. Ten kod utworzy powiadomienie, sprawdzi, czy zarejestrowany jest serwis worker, a następnie wyśle powiadomienie do serwis workera za pomocą metody postMessage
.
W osadzonym edytorze 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.');
}
}
}
Oto, co robi ten kod:
sendNotification
to funkcja asynchroniczna, więc możesz użyćawait
, aby uzyskać odwołanie do rejestracji usługi.Metoda
postMessage
w usługowym workerze wysyła dane z aplikacji do usługowego workera. Więcej informacji znajdziesz w dokumentacji MDN dotyczącej funkcji postMessage.Kod sprawdza obecność właściwości
navigator.serviceWorker.controller
, zanim spróbuje uzyskać dostęp do funkcjipostMessage
. Wartośćnavigator.serviceWorker.controller
będzie równanull
, jeśli nie ma aktywnego skryptu service worker lub jeśli strona została odświeżona przymusowo (Shift+
Odśwież). Więcej informacji znajdziesz w dokumentacji kontrolera ServiceWorker na stronie MDN.
Obsługa powiadomień w usługach działających w tle
W tym kroku napiszesz kod w serwisie workera, który będzie obsługiwać przesyłane do niego wiadomości i wyświetlać powiadomienia dla użytkownika.
W osadzonym edytorze Glitch otwórz plik public/service-worker.js
. Dodaj na końcu pliku ten kod:
// 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
to odwołanie do samego serwisu.Chociaż wyświetlanie powiadomień obsługuje teraz usługa w tle, interfejs głównej aplikacji nadal odpowiada za uzyskiwanie od użytkownika zgody na wysyłanie powiadomień. Jeśli nie zostanie udzielone uprawnienie, obietnica zwrócona przez
showNotification
zostanie odrzucona. Kod powyżej używa blokucatch
, aby uniknąć niezauważonego błędu odrzuceniaPromise
i trochę lepiej go obsłużyć.
Jeśli utkniesz, możesz skorzystać z gotowego kodu na stronie glitch.com/edit/#!/codelab-notifications-service-worker-completed.
Przejdź do kolejnego ćwiczenia z programowania z tej serii: Tworzenie serwera powiadomień push.