Używanie skryptu service worker do zarządzania powiadomieniami

Kate Jeffreys
Kate Jeffreys

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

  1. Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
  2. Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran 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:

  1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  2. Kliknij kartę Konsola.

  3. Upewnij się, że w menu Poziomy obok pola Filtr jest wybrana opcja Informacje.

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

  1. W umieszczonej w Glitch stronie public/index.js:

    • Dostępnych jest 4 puste funkcje: registerServiceWorker, getRegistration, unRegisterServiceWorkersendNotification.

    • 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 funkcja requestPermission. 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.

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

  1. 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 deklaracji async function, aby ułatwić obsługę obietnic. Dzięki temu możesz await rozwiązaną wartość Promise. Na przykład funkcja powyżej czeka na zarejestrowanie skryptu service worker przed zaktualizowaniem interfejsu. Więcej informacji znajdziesz na stronie await w MDN.

  2. 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 workerWyrejestruj 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 funkcji postMessage. Wartość navigator.serviceWorker.controller będzie równa null, 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 bloku catch, aby uniknąć nieobsłużonego błędu odrzucenia Promise 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.