Używanie skryptu service worker do zarządzania powiadomieniami

Kate Jeffreys
Kate Jeffreys

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:

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran 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:

  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, aż strona się załaduje, a potem ją inicjuje.

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

  1. 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 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 w artykule await na stronie 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 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 funkcji postMessage. Wartość navigator.serviceWorker.controller będzie równa null, 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 bloku catch, aby uniknąć niezauważonego błędu odrzucenia Promise 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.