Sposób działania powiadomień

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Do tej pory przyjrzeliśmy się opcjom zmiany wyglądu powiadomienia. Dostępne są też opcje, które zmieniają sposób działania powiadomień.

Domyślnie wywołanie metody showNotification() tylko z opcjami wizualnymi będzie działać w taki sposób:

  • Kliknięcie powiadomienia nic nie da.
  • Każde nowe powiadomienie wyświetla się jedno po drugim. Przeglądarka w żaden sposób nie zwija powiadomień.
  • W zależności od platformy platforma może odtwarzać dźwięk lub wibrować urządzenie użytkownika.
  • Na niektórych platformach powiadomienie znika po krótkim czasie, a na innych jest ono widoczne, dopóki użytkownik nie wejdzie z nim w interakcję. Możesz na przykład porównać powiadomienia na Androidzie i na komputerze.

W tej sekcji omówimy, jak można zmienić domyślne zachowania, używając samych opcji. Są one stosunkowo łatwe do wdrożenia i wykorzystania.

Zdarzenie kliknięcia powiadomienia

Domyślnie po kliknięciu powiadomienia przez użytkownika nic się nie dzieje. Nie powoduje ono nawet zamknięcia ani usunięcia powiadomienia.

Typową metodą w przypadku kliknięcia powiadomienia jest zamknięcie go i wykonanie innej czynności logicznej (np. otwarcie okna lub wywołanie interfejsu API do aplikacji).

Aby to osiągnąć, musisz dodać do skryptu service worker odbiornik zdarzeń 'notificationclick'. Ta metoda będzie wywoływana po każdym kliknięciu powiadomienia.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

Jak widać w tym przykładzie, kliknięte powiadomienie jest dostępne jako event.notification. Następnie możesz przejść do właściwości i metod powiadomienia. W takim przypadku wywołujesz jej metodę close() i wykonujesz dodatkową pracę.

Działania

Działania pozwalają określić inny poziom interakcji z użytkownikami, a nie tylko kliknięcie powiadomienia.

Przyciski

W poprzedniej sekcji omówiliśmy definiowanie przycisków poleceń podczas wywoływania funkcji showNotification():

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Jeśli użytkownik kliknie przycisk polecenia, sprawdź wartość event.action w zdarzeniu noticationclick, aby określić, który przycisk polecenia został kliknięty.

event.action będzie zawierać wartość action ustawioną w opcjach. W przykładzie powyżej wartość event.action będzie jedną z tych wartości: 'coffee-action', 'doughnut-action', 'gramophone-action' lub 'atom-action'.

Dzięki temu wykrywamy kliknięcia powiadomień lub działań podobne do tych:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

Odpowiedzi w tekście

W poprzedniej sekcji omówiliśmy też, jak dodać odpowiedź w tekście do powiadomienia:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply będzie zawierać wartość wpisaną przez użytkownika w polu do wprowadzania danych:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

Tag

Opcja tag to zasadniczo identyfikator ciągu znaków, który „grupuje” powiadomienia. Pozwala w łatwy sposób określić, jak wiele powiadomień ma być wyświetlanych użytkownikowi. To najłatwiej wyjaśnić na przykładzie.

Wyświetlmy powiadomienie i dodajmy do niego tag: 'message-group-1'. Powiadomienie wyświetlimy takim kodem:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Będzie to pierwsze powiadomienie.

Pierwsze powiadomienie z tagiem grupy wiadomości 1.

Wyświetlmy drugie powiadomienie z nowym tagiem 'message-group-2', na przykład:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Spowoduje to wyświetlenie drugiego powiadomienia dla użytkownika.

Dwa powiadomienia, w których drugi tag grupy wiadomości 2.

Teraz wyświetlimy trzecie powiadomienie, ale ponownie użyjmy pierwszego tagu 'message-group-1'. Spowoduje to zamknięcie pierwszego powiadomienia i zastąpienie go nowym.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Teraz mamy dwa powiadomienia, mimo że numer showNotification() został wywołany trzy razy.

Dwa powiadomienia, w których pierwsze powiadomienie jest zastąpione trzecim powiadomieniem.

Opcja tag to po prostu sposób grupowania wiadomości. Dzięki temu wszystkie stare powiadomienia, które są obecnie wyświetlane, zostaną zamknięte, jeśli będą zawierały ten sam tag co nowe powiadomienie.

Indywidualny charakter korzystania z usługi tag polega na tym, że po zastąpieniu powiadomienia działanie to zrobiono bez dźwięku ani wibracji.

Tutaj z pomocą przychodzi opcja renotify.

Powiadom ponownie

Dotyczy to głównie urządzeń mobilnych w chwili pisania tego tekstu. Po ustawieniu tej opcji nowe powiadomienia będą sygnalizowane wibracjami i odtwarzanym dźwiękiem systemowym.

Istnieją sytuacje, w których lepiej będzie, gdy powiadomienie o wyłączeniu aktualizacji ma na celu powiadomienie użytkownika, a nie aktualizację dyskretną. Dobrym przykładem są aplikacje do obsługi czatu. W takim przypadku ustaw tag i renotify na true.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Ciche

Ta opcja umożliwia wyświetlenie nowego powiadomienia, ale zapobiega domyślnemu działaniu wibracji i dźwięków oraz włączaniem wyświetlacza urządzenia.

Jest to idealne rozwiązanie, jeśli powiadomienia nie wymagają natychmiastowej uwagi ze strony użytkownika.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Wymaga interakcji

Chrome na komputerze wyświetla powiadomienia przez określony czas, a następnie je ukryje. Chrome na Androidzie nie działa tak. Powiadomienia są wyświetlane, dopóki użytkownik nie wejdzie z nimi w interakcję.

Aby wymusić wyświetlanie powiadomienia, dopóki użytkownik nie wejdzie z nim w interakcję, dodaj opcję requireInteraction. Powiadomienie będzie widoczne do czasu, aż użytkownik go zamknie lub kliknie.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Używaj tej opcji z rozwagą. Wyświetlanie powiadomienia i zmuszanie użytkownika do zaprzestania działań w celu zamknięcia powiadomienia może być frustrujące.

W następnej sekcji przyjrzymy się kilku typowym wzorcom wykorzystywanych w internecie do zarządzania powiadomieniami i wykonywania takich działań jak otwieranie stron po kliknięciu powiadomienia.

Co dalej

Laboratoria kodu