Sposób działania powiadomień

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Do tej pory przyjrzeliśmy się opcjom, które zmieniają wygląd powiadomień. Istnieją a także opcje, które zmieniają sposób działania powiadomień.

Domyślnie połączenie z użytkownikiem showNotification() z wykorzystaniem opcji wizualnych będzie miało te elementy zachowania:

  • Kliknięcie powiadomienia nie przyniesie żadnego efektu.
  • Każde nowe powiadomienie wyświetla się jeden po drugim. Przeglądarka nie zwinie elementu powiadomienia.
  • Platforma może odtworzyć dźwięk lub wibrować urządzenie użytkownika (w zależności od platformy).
  • Na niektórych platformach powiadomienie zniknie po krótkim czasie, a na innych zniknie. wyświetlają się tylko wtedy, gdy użytkownik wejdzie z nim w interakcję. (Na przykład porównaj powiadomienia na urządzeniach z Androidem i komputerach).

W tej sekcji omówimy, jak można zmienić te domyślne działania za pomocą opcji z innymi. Są one stosunkowo łatwe do wdrożenia i wykorzystania.

Zdarzenie kliknięcia powiadomienia

Gdy użytkownik kliknie powiadomienie, domyślnie nic się nie dzieje. Nie a nawet zamknąć lub usunąć powiadomienie.

Typowym sposobem na kliknięcie powiadomienia jest zamknięcie go i wykonanie innej logiki (np. otwórz okno lub wywołaj aplikację przez interfejs API).

Aby to osiągnąć, musisz dodać detektor zdarzeń 'notificationclick' do naszego skryptu service worker. Ten jest wywoływane 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 można otworzyć jako event.notification Z tego miejsca uzyskasz dostęp do właściwości i metod powiadomienia. W tym musisz wywołać jego metodę close() i wykonać dodatkową pracę.

Działania

Działania umożliwiają interakcję z użytkownikami jeszcze bardziej. 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 parametrze noticationclick aby było wiadomo, który przycisk polecenia został kliknięty.

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

W ten sposób wykrywamy kliknięcia powiadomień lub działania, takie jak:

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 pokazaliś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);

Pole 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 jest zasadniczo identyfikatorem ciągu znaków, który „grupuje” powiadomienia, aby łatwo to sposób określania, jak wiele powiadomień ma być wyświetlanych użytkownikowi. Najłatwiej to wyjaśnić .

Wyświetlmy powiadomienie i wpiszmy dla niego tag: 'message-group-1'. Wyświetlimy powiadomienie z tym kodem:

const title = 'Notification 1 of 3';

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

registration.showNotification(title, options);

W którym wyświetli się 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);

Wyświetli się drugie powiadomienie dla użytkownika.

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

Wyświetlmy teraz trzecie powiadomienie, ale użyjmy ponownie pierwszego tagu 'message-group-1'. Wykonuję tę czynność spowoduje 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 usługa showNotification() została wywołana 3 razy.

Dwa powiadomienia, w przypadku których pierwsze z nich zostało zastąpione trzecim.

Opcja tag służy po prostu do grupowania wiadomości, dzięki czemu wszystkie stare powiadomienia, które są aktualnie wyświetlone reklamy zostaną zamknięte, jeśli będą miały ten sam tag co nowe powiadomienie.

delikatną cechą używania usługi tag jest to, że po zastąpieniu powiadomienia będzie ona działać bez dźwięku. ani wibracji.

Tu właśnie pojawia się opcja renotify.

Powiadamiaj ponownie

Dotyczy to głównie urządzeń mobilnych w momencie pisania. Ustawienie tej opcji powoduje utworzenie nowych powiadomienia wibrują i odtworzą dźwięk systemu.

Istnieją sytuacje, w których możesz chcieć zastąpić powiadomienie o zastąpieniu powiadomienia, aby powiadomić użytkownika, a nie dyskretną aktualizację. Dobrym przykładem są aplikacje do obsługi czatu. W tym przypadku ustaw tag oraz renotify do 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. dźwiękiem i włączeniem 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 będzie wyświetlać powiadomienia przez określony czas, zanim zostaną ukryte. Chrome włączony Android nie ma takiego działania. Powiadomienia są wyświetlane, dopóki użytkownik nie wejdzie z nimi w interakcję.

Aby powiadomienie było widoczne, dopóki użytkownik nie wejdzie z nim w interakcję, dodaj requireInteraction . Powiadomienie będzie wyświetlane, dopóki użytkownik go nie zamknie lub nie kliknie.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Warto korzystać z tej opcji z rozwagą. Wyświetlanie powiadomienia i wymuszanie na użytkowniku zatrzymania tego, co próby odrzucenia powiadomienia mogą być frustrujące.

W następnej sekcji przyjrzymy się kilku typowym wzorcom, które są używane w sieci zarządzanie powiadomieniami i wykonywanie działań, takich jak otwieranie stron po kliknięciu powiadomienia.

Co dalej

Ćwiczenia z kodowania