Wyświetlanie powiadomienia

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Opcje powiadomień są podzielone na 2 sekcje: jedna dotyczy aspektów wizualnych (ta sekcja), a druga – aspektów behawioralnych powiadomień (następna sekcja).

Możesz wypróbować różne opcje powiadomień w różnych przeglądarkach na różnych platformach za pomocą Generatora powiadomień Petera Beverloo.

Opcje wizualne

Interfejs API do wyświetlania powiadomienia jest prosty:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

Oba argumenty, title i options, są opcjonalne.

Tytuł jest ciągiem znaków, a opcje mogą być dowolnymi z tych elementów:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

Przyjrzyjmy się opcjom wizualnym:

Analiza interfejsu powiadomienia.

Opcje tytułu i treści

Oto jak wygląda powiadomienie bez tytułu i opcji w Chrome na Windowsa:

Powiadomienie bez tytułu i opcji w Chrome na Windows.

Jak widać, nazwa przeglądarki jest używana jako tytuł, a w polu tekstowym „Nowe powiadomienie” znajduje się tekst powiadomienia.

Jeśli na urządzeniu jest zainstalowana progresywna aplikacja internetowa, zamiast nazwy przeglądarki będzie używana nazwa aplikacji internetowej:

Powiadomienie zawierające nazwę aplikacji internetowej zamiast nazwy przeglądarki.

Jeśli uruchomiliśmy ten kod:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

w Chrome w Linuksie pojawi się takie powiadomienie:

Powiadomienie z tytułem i tekstem w Chrome na Linuksie

W Firefoksie na Linuksie wygląda to tak:

Powiadomienie z tytułem i treścią w przeglądarce Firefox w systemie Linux.

Oto jak wygląda powiadomienie z dużą ilością tekstu w tytule i tekstie w Chrome na Linuxie:

Powiadomienie z długim tytułem i tekstem w Chrome na Linuksie

Firefox na Linuksie zwinięty jest do momentu, gdy najedziesz kursorem na powiadomienie, co spowoduje jego rozwinięcie:

Powiadomienie z długim tytułem i tekstem głównym w Firefox na Linuksie

Powiadomienie z długim tytułem i tekstem w Firefoksie na Linuksie, gdy najedziesz na powiadomienie kursorem myszy.

Te same powiadomienia w Firefoksie na Windows wyglądają tak:

Powiadomienie z tytułem i treścią w przeglądarce Firefox w systemie Windows.

Powiadomienie z długim tytułem i tekstem głównym w Firefox na Windows.

Jak widzisz, to samo powiadomienie może wyglądać inaczej w różnych przeglądarkach. Może też wyglądać inaczej w tej samej przeglądarce na różnych platformach.

Chrome i Firefox używają powiadomień systemowych i centrum powiadomień na platformach, na których są dostępne.

Na przykład powiadomienia systemowe w macOS nie obsługują obrazów ani działań (przycisków i wypełnianych w polu odpowiedzi).

Chrome ma też niestandardowe powiadomienia na wszystkich platformach komputerowych. Możesz go włączyć, ustawiając flagę chrome://flags/#enable-system-notifications w stanie Disabled.

Ikona

Opcja icon to w podstawie mały obraz, który możesz wyświetlić obok tytułu i tekstu głównego.

W kodzie musisz podać adres URL obrazu, który chcesz wczytać:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

W Chrome na Linuksie pojawia się takie powiadomienie:

Powiadomienie z ikoną w Chrome na Linuksie

i w Firefoksie w systemie Linux:

Powiadomienie z ikoną w Firefoksie na Linuksie

Niestety nie ma żadnych ścisłych wytycznych dotyczących rozmiaru obrazu, który ma być używany jako ikona.

Android wymaga obrazu o wymiarach 64 dp (co odpowiada wielokrotności 64 pikseli pomnożonym przez współczynnik pikseli urządzenia).

Zakładając, że najwyższy współczynnik pikseli dla urządzenia wynosi 3, bezpieczny rozmiar ikony to co najmniej 192 piksele.

Plakietka

badge to mała monochromatyczna ikona, która przekazuje użytkownikowi więcej informacji o źródle powiadomienia:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

W momencie pisania tego tekstu plakietka jest używana tylko w Chrome na Androida.

Powiadomienie z plakietką w Chrome na Androida

W innych przeglądarkach (lub w Chrome bez plakietki) zobaczysz ikonę przeglądarki.

Powiadomienie z plakietką w Firefoksie na Androidzie

Podobnie jak w przypadku opcji icon, nie ma żadnych wytycznych dotyczących rozmiaru.

Po zapoznaniu się z wytycznymi dotyczącymi Androida stwierdziliśmy, że zalecany rozmiar to 24 piksele pomnożone przez współczynnik pikseli urządzenia.

Oznacza to, że obraz o rozmiary co najmniej 72 piksele powinien być odpowiedni (przy założeniu, że maksymalny współczynnik pikseli urządzenia wynosi 3).

Obraz

Opcja image umożliwia wyświetlenie użytkownikowi większego obrazu. Jest to szczególnie przydatne, gdy chcesz wyświetlić użytkownikowi obraz podglądu.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

W Chrome w Linuksie powiadomienie będzie wyglądać tak:

Powiadomienie z obrazem w Chrome na Linuksie

W Chrome na Androidzie przycinanie i proporcje są inne:

Powiadomienie z obrazem w Chrome na Androidzie

Ze względu na różnice w stosunku między komputerami a urządzeniami mobilnymi bardzo trudno jest podać wytyczne.

Ponieważ Chrome na komputerze nie wypełnia dostępnej przestrzeni i ma współczynnik 4:3, być może najlepszym rozwiązaniem jest wyświetlenie obrazu w tym formacie i pozwolenie Androidowi na przycięcie go. Opcja image może się jednak jeszcze zmienić.

Na Androidzie jedyną wytyczną jest szerokość 450 dp.

Zgodnie z tymi wytycznymi dobrze sprawdzi się obraz o szerokości co najmniej 1350 pikseli.

Działania (przyciski)

Możesz zdefiniować actions, aby wyświetlać przyciski w powiadomieniu:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      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);

Dla każdego działania możesz zdefiniować title, action (czyli identyfikator), icon i type. To, co będzie widoczne w powiadomieniu, to tytuł i ikona. Identyfikator jest używany do wykrywania, że użytkownik kliknął przycisk wezwania do działania (więcej informacji na ten temat znajdziesz w następnej sekcji). Typ można pominąć, ponieważ 'button' jest wartością domyślną.

W momencie pisania tego artykułu tylko Chrome i Opera na Androida obsługują działania.

W przykładzie powyżej zdefiniowano 4 działania, aby pokazać, że możesz zdefiniować więcej działań niż będzie wyświetlanych. Jeśli chcesz poznać liczbę działań, które będą wyświetlane przez przeglądarkę, możesz sprawdzić window.Notification?.maxActions:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

Na komputerze ikony przycisków poleceń wyświetlają swoje kolory (patrz różowe pączki):

Powiadomienie z przyciskami polecenia w Chrome na Linuksa.

Na Androidzie 6 i starszych ikony są kolorowane zgodnie ze schematem kolorów systemu:

Powiadomienie z przyciskami czynności w Chrome na Androida

Na Androidzie 7 i nowszych ikony czynności w ogóle się nie wyświetlają.

Chrome zmieni swoje działanie na komputerach, aby pasowało do Androida (czyli zastosuje odpowiedni schemat kolorów, aby ikony pasowały do wyglądu i wrażeń systemu). W międzyczasie możesz dopasować kolor tekstu w Chrome do koloru #333333.

Warto też wspomnieć, że ikony wyglądają dobrze na Androidzie, ale nie na komputerze.

Najlepszy rozmiar reklamy do pracy w Chrome na komputery to 24 x 24 piksele. To niestety wygląda na nie na swoim miejscu na Androidzie.

Sprawdzone metody, które wynikają z tych różnic:

  • Stosuj spójny schemat kolorów ikon, aby co najmniej wszystkie ikony były spójne dla użytkownika.
  • Upewnij się, że działają w wersji monochromatycznej, ponieważ niektóre platformy mogą wyświetlać je w ten sposób.
  • Wypróbuj różne rozmiary i zobacz, który z nich będzie dla Ciebie najlepszy. Rozmiar 128 × 128 pikseli działa dobrze na Androidzie, ale na komputerze obraz jest niskiej jakości.
  • Ikony działań mogą się w ogóle nie wyświetlać.

Specyfikacja powiadomień zawiera sposób definiowania różnych rozmiarów ikon, ale wygląda na to, że zanim dojdzie do porozumienia, minie jeszcze trochę czasu.

Działania (odpowiedzi w tekście)

Możesz dodać odpowiedź w powiadomieniu, definiując działanie o typie 'text':

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Na Androidzie będzie to wyglądać tak:

Powiadomienie na Androidzie z przyciskiem odpowiedzi

Kliknięcie przycisku polecenia otwiera pole do wprowadzania tekstu:

Powiadomienie na Androidzie z otwartym polem tekstowym

Obiekt zastępczy dla pola tekstowego możesz dostosować:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Powiadomienie na Androidzie z niestandardowym tekstem zastępczym w polu tekstowym

W Chrome na Windowsie pole do wprowadzania tekstu jest zawsze widoczne, bez konieczności klikania przycisku działania:

Powiadomienie w Windows z polem do wpisywania tekstu i przyciskiem odpowiedzi

Możesz dodać więcej niż jedną odpowiedź w tekście lub połączyć przyciski i odpowiedzi w tekście:

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

Powiadomienie w Windows z polem do wprowadzania tekstu i 2 przyciskami czynności

Kierunek

Parametr dir pozwala określić, w którym kierunku ma się wyświetlać tekst: od prawej do lewej lub od lewej do prawej.

Podczas testów okazało się, że kierunek zależy głównie od tekstu, a nie od tego parametru. Zgodnie ze specyfikacją ma to sugerować przeglądarce sposób rozmieszczania opcji, takich jak działania, ale nie zauważyłem żadnej różnicy.

Prawdopodobnie najlepiej jest to określić, jeśli to możliwe. W przeciwnym razie przeglądarka powinna robić to, co należy, na podstawie podanego tekstu.

Parametr powinien mieć wartość auto, ltr lub rtl.

Język pisany od prawej do lewej w Chrome w Linuksie wygląda tak:

Powiadomienie w języku zapisywanym od prawej do lewej w Chrome na Linuksie

W Firefoxie (po najechaniu kursorem) zobaczysz:

Powiadomienie w języku od prawej do lewej w Firefoksie na Linuksie

Wibracje

Opcja wibracji umożliwia określenie wzoru wibracji, który będzie uruchamiany podczas wyświetlania powiadomienia, przy założeniu, że bieżące ustawienia użytkownika zezwalają na wibracje (czyli urządzenie nie jest w trybie wyciszonym).

Format opcji wibracji powinien być tablicą liczb, które opisują liczbę milisekund, przez które urządzenie powinno wibrować, oraz liczbę milisekund, przez które urządzenie nie powinno wibrować.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

Dotyczy to tylko urządzeń obsługujących wibracje.

Dźwięk

Parametr sound umożliwia określenie dźwięku, który ma być odtwarzany po otrzymaniu powiadomienia.

Obecnie żadna przeglądarka nie obsługuje tej opcji.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Sygnatura czasowa

Czas stempla czasowego pozwala platformie określić, kiedy wystąpiło zdarzenie, które spowodowało wysłanie powiadomienia push.

Wartość timestamp powinna być podana w milisekundach od godziny 00:00:00 UTC, czyli 1 stycznia 1970 r. (czyli epoka UNIX).

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

Sprawdzone metody dotyczące wrażeń użytkownika

Największym problemem związanym z UX, jaki zauważyłem w przypadku powiadomień, jest brak szczegółowości informacji wyświetlanych przez powiadomienie.

Przede wszystkim zastanów się, dlaczego wysłałeś wiadomość push, i upewnij się, że wszystkie opcje powiadomień zostały zastosowane, aby użytkownicy wiedzieli, dlaczego czytają to powiadomienie.

Szczerze mówiąc, łatwo jest zobaczyć przykłady i pomyśleć „Nigdy nie popełnię takiego błędu”. Ale łatwiej jest wdać się w pułapkę, niż mogłoby się wydawać.

Oto kilka typowych problemów, których należy unikać:

  • Nie umieszczaj adresu swojej witryny w tytule ani w treści. Przeglądarki podają w powiadomieniu Twoją domenę, więc nie duplikuj jej.
  • Wykorzystaj wszystkie dostępne informacje. Jeśli wysyłasz wiadomość push, ponieważ ktoś inny wysłał wiadomość do użytkownika, zamiast tytułu „Nowa wiadomość” i tekstu „Kliknij tutaj, aby ją przeczytać” użyj tytułu „Jan Kowalski wysłał nową wiadomość” i ustaw tekst powiadomienia jako część wiadomości.

Wykrywanie przeglądarek i funkcji

W momencie pisania wiadomości Chrome i Firefox różnią się pod względem obsługi funkcji powiadomień.

Na szczęście możesz sprawdzić obsługę funkcji powiadomień, korzystając z prototypu window.Notification.

Załóżmy, że chcemy się dowiedzieć, czy powiadomienie obsługuje przyciski poleceń, dlatego wykonaj te czynności:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

Dzięki temu możemy zmienić powiadomienie wyświetlane użytkownikom.

W przypadku innych opcji postępuj tak samo jak wyżej, ale zastąp 'actions' odpowiednią nazwą parametru.

Co dalej

Codelabs