Wyświetlanie powiadomienia

Alexey Rodionov

Matt Gaunt

Opcje powiadomień zostały podzielone na 2 sekcje. W pierwszej zajmujemy się aspektami wizualnymi (ten ), a drugi wyjaśniający sposób działania powiadomień (następna sekcja).

Możesz wypróbować różne opcje powiadomień w różnych przeglądarkach na różnych platformach z udziałem Petera Beverloo Generator powiadomień.

Opcje wizualne

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:

Opcje tytułu i treści

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

Jak widać, nazwa przeglądarki jest używana jako tytuł oraz „Nowe powiadomienie” zmienna to używany jako treść powiadomienia.

Jeśli na urządzeniu jest zainstalowana progresywna aplikacja internetowa, zamiast niej zostanie użyta nazwa aplikacji internetowej 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);

zobaczylibyśmy takie powiadomienie w Chrome na Linuksa:

W przeglądarce Firefox w systemie Linux będzie to wyglądać tak:

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

Firefox w systemie Linux zwija tekst główny do momentu najechania kursorem na powiadomienie, przez co powiadomienie do rozwinięcia:

Takie same powiadomienia w Firefoksie w systemie Windows wyglądają tak:

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

Chrome i Firefox korzystają z powiadomień systemowych i centrum powiadomień na platformach, na których te są dostępne.

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

Chrome ma też niestandardowe powiadomienia dla wszystkich platform komputerowych. Aby ją włączyć, ustaw chrome://flags/#enable-system-notifications do stanu Disabled.

Ikona

Opcja icon to w zasadzie mały obraz wyświetlany 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:

oraz w przeglądarce Firefox w systemie Linux:

Niestety nie ma konkretnych wytycznych dotyczących rozmiaru obrazu ikony.

Wygląda na to, że Android chce mieć obraz w rozdzielczości 64 dp (co stanowi wielokrotność 64 pikseli przez proporcje piksela urządzenia).

Zakładając, że najwyższy współczynnik pikseli w przypadku urządzenia wynosi 3, ikona rozmiaru 192 piksele lub większa bezpieczne.

Uwaga: niektóre przeglądarki mogą wymagać, aby obraz był wyświetlany przez HTTPS. Pamiętaj o tym, jeśli chcesz wykorzystać obraz należący do osoby trzeciej.

Plakietka

badge to mała monochromatyczna ikona, która przedstawia dodatkowe informacje skąd pochodzi powiadomienie:

const title = 'Badge Notification';

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

registration.showNotification(title, options);

W chwili pisania plakietki jest używana tylko w Chrome na urządzeniach z Androidem.

W innych przeglądarkach (lub w Chrome bez plakietki) będzie widoczna ikona przeglądarki.

Tak jak w przypadku opcji icon, nie ma konkretnych wytycznych dotyczących rozmiaru, którego należy użyć.

Zapoznaj się ze wskazówkami dotyczącymi Androida zalecany rozmiar to 24 piksele pomnożone przez współczynnik pikseli urządzenia.

Oznacza to, że obraz o wielkości co najmniej 72 piksele powinien być dobry (zakładając, że maksymalny współczynnik pikseli urządzenia to 3).

Obraz

Za pomocą opcji image można wyświetlić użytkownikowi większy obraz. Jest to szczególnie istotne przydatny do wyświetlania obrazu podglądu użytkownikowi.

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:

W Chrome na Androidzie przycinanie i proporcje są inne:

Biorąc pod uwagę różnice w stosunku do wersji na komputery i urządzenia mobilne, niezwykle trudno jest to zasugerować. wytycznymi.

Ponieważ Chrome na komputer nie wypełnia dostępnej przestrzeni i ma współczynnik 4:3, może to być najlepszy wyświetlanie obrazu o tym współczynniku proporcji i pozwolenie Androidowi na jego przycięcie. Mając jednak na uwadze, opcja image może się jeszcze zmienić.

W przypadku Androida jedynym wytycznymi jest 450 dp.

Kierując się tą wskazówką, zalecamy zdjęcie o szerokości co najmniej 1350 pikseli.

Działania (przyciski)

Możesz określić, czy actions ma 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żna zdefiniować title, action (który jest zasadniczo identyfikatorem), icon oraz type. To, co będzie widoczne w powiadomieniu, to tytuł i ikona. Identyfikator jest używany przy wykrywaniu że kliknięto przycisk polecenia (więcej informacji na ten temat znajdziesz w następnej sekcji). Typ można pominąć, ponieważ 'button' jest wartością domyślną.

W chwili tworzenia tego tekstu działania pomocy dotyczące przeglądarek Chrome i Opera dla Androida były prawidłowe.

W powyższym przykładzie zdefiniowano 4 działania, które pokazują, że można zdefiniować więcej działań niż . Jeśli chcesz poznać liczbę działań wyświetlanych przez przeglądarkę, Sprawdź 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ń mają kolory (zobacz różowy pierścień):

W Androidzie 6 i starszych ikony są w kolorze zgodnym ze schematem kolorów systemu:

W Androidzie 7 i nowszych ikony działań w ogóle nie są wyświetlane.

Mam nadzieję, że Chrome zacznie działać na komputerach tak samo jak w Androidzie (tj. odpowiedni schemat kolorów, aby ikony pasowały do wyglądu i stylu systemu). Tymczasem możesz może dopasować kolor tekstu w Chrome, ustawiając ikony w kolorze #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 smutne na Androidzie.

Oto sprawdzone metody, które możemy wykorzystać na podstawie tych różnic:

• Stosuj spójny schemat kolorów ikon, aby przynajmniej wszystkie ikony były spójne wyświetlanych użytkownikowi.
• Upewnij się, że działają w trybie monochromatycznym, ponieważ niektóre platformy mogą tak je wyświetlać.
• Przetestuj rozmiar i zobacz, który Ci odpowiada. Rozmiar 128 × 128 pikseli dobrze sprawdza się na Androidzie, ale niezbyt dobrze jakości na komputerach.
• Ikony działań powinny w ogóle nie być wyświetlane.

W specyfikacji powiadomień badamy sposób definiowania różnych rozmiarów ikon, ale wygląda na to, że że może minąć trochę czasu, zanim cokolwiek zostanie uzgodnione.

Działania (w tekście odpowiedzi)

Aby dodać odpowiedź w tekście do powiadomienia, zdefiniuj działanie za pomocą 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 to będzie wyglądać w Androidzie:

Kliknięcie przycisku polecenia otwiera pole do wprowadzania tekstu:

Obiekt zastępczy pola do wprowadzania tekstu 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);

W Chrome w systemie Windows pole wprowadzania tekstu jest zawsze widoczne bez konieczności klikania działania przycisk:

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

Kierunek

Parametr dir umożliwia określenie kierunku wyświetlania tekstu. od prawej do lewej lub od lewej do prawej.

Testy wykazały, że kierunek jest w dużej mierze określany przez tekst, a nie na . Zgodnie ze specyfikacją ma to sugerować przeglądarce wybór opcji układu ale nie widzę żadnej różnicy.

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

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

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

W przeglądarce Firefox (najedź na nią kursorem myszy) zobaczysz następujący komunikat:

Wibracje

Uwaga: obsługa vibrate została wycofana na Androidzie 8 i nowszych.

Opcja wibracji pozwala zdefiniować wzór wibracji, który będzie uruchamiany po otrzymaniu powiadomienia jest wyświetlany, jeśli bieżące ustawienia użytkownika zezwalają na wibracje (tzn. urządzenie nie jest w tryb cichy).

Opcja wibracji powinna mieć postać tablicy liczb opisujących liczbę w milisekundach, po których ma wibrować urządzenie, oraz podaj jego liczbę nie wibracjami.

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 pozwala zdefiniować dźwięk, który będzie 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

Sygnatura czasowa pozwala określić czas wystąpienia zdarzenia, które doprowadziło do przeniesienia wysyłanego powiadomienia.

Wartość timestamp powinna być liczbą milisekund od 00:00:00 czasu UTC, czyli 1 stycznia 1970 roku (jest to 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 na zapewnienie wygody użytkowania

Największy problem z UX, który zauważyłem w przypadku powiadomień, to brak precyzji w informacjach. które wyświetla się w powiadomieniu.

Przede wszystkim zastanów się, dlaczego wysłałeś wiadomość push, i upewnij się, że wszystkie są używane do pomagania użytkownikom w zrozumieniu, dlaczego czytają to powiadomienie.

Szczerze mówiąc, łatwo jest znaleźć przykłady i pomyśleć: „Nigdy nie popełnię tego błędu”. Ale to łatwiejsze. wpaść w pułapkę, niż mogłoby się wydawać.

Kilka typowych pułapek, których należy unikać:

• Nie umieszczaj witryny w tytule ani w treści. Przeglądarki umieszczają Twoją domenę w sekcji powiadomienia, więc nie powielaj go.
• Wykorzystaj wszystkie dostępne informacje. Jeśli wysyłasz wiadomość push, ponieważ ktoś użytkownik wysłał wiadomość do użytkownika zamiast tytułu „Nowa wiadomość” i treści „Kliknij tutaj, aby uzyskać przeczytaj go”. Użyj tytułu „Jan właśnie wysłał nową wiadomość” i ustaw treść powiadomienia na wiadomości.

Wykrywanie przeglądarek i funkcji

W momencie pisania tekstów Chrome i Firefox znacznie różnią się pod względem i obsługuje powiadomienia.

Na szczęście możesz wykryć obsługę funkcji powiadomień, patrząc na window.Notification i prototypem.

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 pozostałych opcji wykonaj te same czynności, co powyżej, zastępując 'actions' odpowiednimi wartościami nazwę parametru.

Co dalej

• Omówienie powiadomień push w internecie
• Jak działa push
• Subskrybowanie użytkownika
• UX uprawnień
• Wysyłanie wiadomości za pomocą bibliotek Web Push
• Protokół Web Push Protocol
• Obsługa zdarzeń push
• Wyświetlanie powiadomienia
• Działanie powiadomień
• Typowe wzorce powiadomień
• Najczęstsze pytania na temat powiadomień push
• Typowe problemy i zgłaszanie błędów

Ćwiczenia z kodowania

• Tworzenie klienta powiadomień push
• Tworzenie serwera powiadomień push