Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Wyświetlanie powiadomienia

Alexey Rodionov

Matt Gaunt

Opcje powiadomień są podzielone na 2 sekcje: jedna dotyczy aspektów wizualnych (ta sekcja), a druga wyjaśnia aspekty związane z działaniem powiadomień (następna sekcja).

Możesz poeksperymentować z różnymi opcjami powiadomień w różnych przeglądarkach na różnych platformach, korzystając z generatora powiadomień Petera Beverloo.

Opcje obrazu

Interfejs API do wyświetlania powiadomień 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

Tak wygląda powiadomienie bez tytułu i opcji w Chrome na Windowsie:

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

Jak widać, nazwa przeglądarki jest używana jako tytuł, a obiekt zastępczy „Nowe powiadomienie” jest używany jako treść powiadomienia.

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

Powiadomienie z nazwą aplikacji internetowej zamiast nazwy przeglądarki.

Jeśli uruchomimy 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 na Linuksie otrzymamy takie powiadomienie:

Powiadomienie z tytułem i treścią w Chrome na Linuksie.

W przeglądarce Firefox w systemie Linux wygląda to tak:

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

Tak wygląda powiadomienie z dużą ilością tekstu w tytule i treści w Chrome na Linuksie:

Powiadomienie z długim tytułem i treścią w Chrome na Linuksie.

Firefox w systemie Linux zwija tekst powiadomienia, dopóki nie najedziesz na nie kursorem, co powoduje jego rozwinięcie:

Powiadomienie z długim tytułem i tekstem w przeglądarce Firefox w systemie Linux.

Powiadomienie z długim tytułem i treścią w przeglądarce Firefox na Linuksie, gdy kursor myszy jest nad powiadomieniem.

Te same powiadomienia w przeglądarce Firefox w systemie 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 w przeglądarce Firefox w systemie Windows.

Jak widać, 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ą one dostępne.

Na przykład powiadomienia systemowe w systemie macOS nie obsługują obrazów i działań (przycisków i odpowiedzi w tekście).

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

Ikona

Opcja icon to w zasadzie mały obraz, który możesz wyświetlać 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 pojawi się to powiadomienie:

oraz w przeglądarce Firefox w systemie Linux:

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

Android wydaje się wymagać obrazu o rozmiarze 64 dp (czyli 64 pikseli pomnożonych przez współczynnik pikseli urządzenia).

Zakładając, że najwyższy współczynnik pikseli urządzenia wynosi 3, bezpiecznym wyborem jest rozmiar ikony wynoszący co najmniej 192 piksele.

Plakietka

badge to mała monochromatyczna ikona, która służy do przekazywania użytkownikowi dodatkowych informacji o tym, skąd pochodzi powiadomienie:

const title = 'Badge Notification';

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

registration.showNotification(title, options);

W momencie pisania tego artykułu plakietka jest używana tylko w Chrome na Androidzie.

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

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

Zgodnie z wytycznymi dotyczącymi Androida zalecany rozmiar to 24 piksele pomnożone przez współczynnik pikseli urządzenia.

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

Obraz

Opcja image może służyć do wyświetlania użytkownikowi większego obrazu. Jest to szczególnie przydatne, gdy chcesz wyświetlić użytkownikowi podgląd obrazu.

const title = 'Image Notification';

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

registration.showNotification(title, options);

W Chrome na 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 proporcjach między komputerami a urządzeniami mobilnymi bardzo trudno jest podać konkretne wytyczne.

Chrome na komputerze nie wypełnia dostępnego miejsca i ma współczynnik proporcji 4:3, więc najlepszym rozwiązaniem może być wyświetlanie obrazu o takich proporcjach i zezwolenie Androidowi na jego przycięcie. Mimo to opcja image może się jeszcze zmienić.

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

Zgodnie z tą wytyczną obraz o szerokości co najmniej 1350 pikseli będzie dobrym wyborem.

Działania (przyciski)

Możesz zdefiniować actions, aby wyświetlać przyciski z powiadomieniem:

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 (który jest zasadniczo identyfikatorem), icon i type. Tytuł i ikona są widoczne w powiadomieniu. Identyfikator jest używany do wykrywania, czy przycisk polecenia został kliknięty (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 powyższym przykładzie zdefiniowano 4 działania, aby pokazać, że można zdefiniować więcej działań, niż zostanie wyświetlonych. Jeśli chcesz sprawdzić liczbę działań, które zostaną wyświetlone 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ń są wyświetlane w kolorze (patrz różowy pączek):

Powiadomienie z przyciskami poleceń w Chrome na Linuksie.

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

Powiadomienie z przyciskami poleceń w Chrome na Androida.

Na Androidzie 7 i nowszych ikony czynności nie są w ogóle wyświetlane.

Chrome powinien zmienić swoje działanie na komputerze, aby dopasować je do Androida (czyli zastosować odpowiedni schemat kolorów, aby ikony pasowały do wyglądu i stylu systemu). Tymczasem możesz dopasować kolor tekstu w Chrome, ustawiając kolor ikon na #333333.

Warto też zauważyć, że ikony wyglądają wyraźnie na Androidzie, ale nie na komputerze.

Najlepszy rozmiar, jaki udało mi się uzyskać w Chrome na komputerze, to 24 x 24 piksele. Niestety na Androidzie wygląda to nie na miejscu.

Sprawdzone metody, które możemy wyciągnąć z tych różnic:

Używaj spójnego schematu kolorów ikon, aby wszystkie ikony były wyświetlane użytkownikowi w jednolity sposób.
Upewnij się, że działają w trybie monochromatycznym, ponieważ niektóre platformy mogą je wyświetlać w ten sposób.
Przetestuj rozmiar i sprawdź, co sprawdza się w Twoim przypadku. Wymiary 128 px × 128 px dobrze sprawdzają się na Androidzie, ale na komputerze jakość była słaba.
Ikony działań nie będą się wyświetlać.

Specyfikacja powiadomień bada sposób definiowania wielu rozmiarów ikon, ale wygląda na to, że minie trochę czasu, zanim zostanie osiągnięte porozumienie.

Działania (odpowiedzi w tekście)

Możesz dodać odpowiedź w powiadomieniu, definiując działanie typu '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);

Tak będzie to wyglądać na Androidzie:

Powiadomienie na Androidzie z przyciskiem polecenia odpowiedzi.

Kliknięcie przycisku polecenia otwiera pole do wprowadzania danych:

Powiadomienie na Androidzie z otwartym polem do wprowadzania danych.

Możesz dostosować obiekt zastępczy pola do wprowadzania danych:

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 do wprowadzania danych.

W Chrome w systemie Windows pole do wprowadzania danych jest zawsze widoczne bez konieczności klikania przycisku polecenia:

Powiadomienie w systemie Windows z polem do wprowadzania danych i przyciskiem polecenia odpowiedzi.

Możesz dodać więcej niż 1 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 systemie Windows z polem do wprowadzania danych i 2 przyciskami poleceń.

Kierunek

Parametr dir pozwala określić, w którym kierunku ma być wyświetlany tekst: od prawej do lewej czy od lewej do prawej.

Podczas testów okazało się, że kierunek był w dużej mierze określany przez tekst, a nie przez ten parametr. Zgodnie ze specyfikacją ma to sugerować przeglądarce, jak układać opcje, takie jak działania, ale nie zauważyłem żadnej różnicy.

Najlepiej jest go zdefiniować, jeśli to możliwe. W przeciwnym razie przeglądarka powinna postępować zgodnie z podanym tekstem.

Parametr powinien być ustawiony na auto, ltr lub rtl.

Język zapisywany od prawej do lewej używany w Chrome w systemie Linux wygląda tak:

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

W przeglądarce Firefox (po najechaniu kursorem) zobaczysz:

Powiadomienie w języku zapisywanym od prawej do lewej w przeglądarce Firefox w systemie Linux.

Wibracje

Opcja wibracji umożliwia zdefiniowanie wzorca wibracji, który będzie uruchamiany po wyświetleniu powiadomienia, przy założeniu, że bieżące ustawienia użytkownika zezwalają na wibracje (tzn. urządzenie nie jest w trybie cichym).

Opcja wibracji powinna być tablicą liczb, które określają liczbę milisekund, przez które urządzenie powinno wibrować, a następnie 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.

W momencie pisania tego artykułu ż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

Sygnatura czasowa pozwala poinformować platformę o czasie wystąpienia zdarzenia, które spowodowało wysłanie powiadomienia push.

Wartość timestamp powinna być liczbą milisekund od godziny 00:00:00 czasu UTC 1 stycznia 1970 r. (czyli od epoki uniksowej).

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 na zapewnienie wygody użytkowania

Największym błędem UX, jaki widziałem w powiadomieniach, jest brak szczegółowych informacji wyświetlanych przez powiadomienie.

Zastanów się, dlaczego wysyłasz wiadomość push, i upewnij się, że wszystkie opcje powiadomień są używane, aby pomóc użytkownikom zrozumieć, 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 wpaść w tę pułapkę, niż mogłoby się wydawać.

Typowe pułapki, których należy unikać:

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

Przeglądarki i wykrywanie funkcji

W momencie pisania tego artykułu istnieje dość duża rozbieżność między Chrome a Firefoksem pod względem obsługi funkcji powiadomień.

Na szczęście możesz wykryć obsługę funkcji powiadomień, sprawdzając prototyp window.Notification.

Załóżmy, że chcemy sprawdzić, czy powiadomienie obsługuje przyciski poleceń. W tym celu:

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

Dzięki temu możemy zmienić powiadomienie, które wyświetlamy użytkownikom.

W przypadku innych opcji wykonaj te same czynności, zastępując 'actions' nazwą odpowiedniego parametru.

Wyświetlanie powiadomienia

Opcje obrazu

Opcje tytułu i treści

Ikona

Plakietka

Obraz

Działania (przyciski)

Działania (odpowiedzi w tekście)

Kierunek

Wibracje

Dźwięk

Sygnatura czasowa

Sprawdzone metody na zapewnienie wygody użytkowania

Przeglądarki i wykrywanie funkcji

Co dalej

Ćwiczenia w Codelabs

Wyświetlanie powiadomienia Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Opcje obrazu

Opcje tytułu i treści

Ikona

Plakietka

Obraz

Działania (przyciski)

Działania (odpowiedzi w tekście)

Kierunek

Wibracje

Dźwięk

Sygnatura czasowa

Sprawdzone metody na zapewnienie wygody użytkowania

Przeglądarki i wykrywanie funkcji

Co dalej

Ćwiczenia w Codelabs

Wyświetlanie powiadomienia