W ramach tego ćwiczenia w Codelabs wykorzystasz skrypt service worker do zarządzania powiadomieniami. W poniższych instrukcjach zakładamy, że znasz już mechanizmy Service Worker oraz podstawy wysyłania próśb o zgodę na wyświetlanie powiadomień i wysyłania powiadomień. Jeśli chcesz przypomnieć sobie informacje o powiadomieniach, zapoznaj się z tym samouczkiem Codelab dotyczącym interfejsu Notifications API. Aby dowiedzieć się więcej o skryptach service worker, Matt Gaunt przedstawia Wprowadzenie do mechanizmów Service Worker.
Zremiksuj 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. Oto co musisz zrobić:
- Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
- Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .
Glitch powinien otworzyć się 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 kodem początkowym
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 na wczytanie strony, a następnie go inicjuje.
W osadzonym Glitch 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 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. 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 na stronieawait
w 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 uruchamiany, 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 ani 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 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. Powyższy kod używa blokucatch
, aby uniknąć nieobsłużonego błędu odrzuceniaPromise
i lepiej rozwiązać ten problem.
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.