Począwszy od Chrome 59, powiadomienia wysyłane przez powiadomienie API lub interfejs chrome.notifications API będą wyświetlane bezpośrednio przez natywny system powiadomień macOS, a nie przez system Chrome.
Ta zmiana sprawia, że przeglądarka Chrome w systemie macOS jest lepiej zintegrowana z platformą i naprawia wiele wcześniejszych błędów, takich jak nieprzestrzeganie systemowego ustawienia Nie przeszkadzać.
Poniżej omówimy różnice w porównaniu z dotychczasowymi interfejsami API.
Centrum powiadomień
Jedną z zalet tej zmiany jest to, że powiadomienia będą się wyświetlać w centrum powiadomień macOS.
![Powiadomienia Google Chrome będą wyświetlane w centrum powiadomień macOS](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/google-chrome-notificatio-0dd272728498d.png?authuser=1&hl=pl)
Różnice
Rozmiar i umiejscowienie ikony
Wygląd ikon ulegnie zmianie. Zostaną one mniejsze i zostanie zastosowane dopełnienie. Być może warto zmienić ją na przezroczyste tło zamiast jednolitego koloru, aby poprawić estetykę.
![Przed i po w Chrome na Macu ikony powiadomień wyświetlane w Chrome w porównaniu z tymi wyświetlanymi w macOS.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-chrome-ma-8f7a9faf4b135.png?authuser=1&hl=pl)
Ikony czynności
Przed wprowadzeniem tej zmiany przyciski i ikony działań były widoczne w powiadomieniu. W przypadku powiadomień natywnych ikony przycisków działań nie będą używane. Aby zobaczyć dostępne działania, użytkownik będzie musiał najechać kursorem na powiadomienie i kliknąć przycisk „Więcej”.
![Przyciski działań dotyczące powiadomień z ikonami wyświetlanymi w Chrome i po nich wyświetlane w systemie macOS.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-acefa2d32d351.png?authuser=1&hl=pl)
Logo Chrome
Logo Chrome jest zawsze wyświetlane i nie można go zastąpić ani zmienić. Jest to wymagane w przypadku aplikacji innych firm w systemie macOS.
zdjęcia;
Opcja image
nie będzie już obsługiwana w systemie macOS. Jeśli zdefiniujesz właściwość obrazu, powiadomienie będzie wyświetlane, ale zignoruje parametr „image” (patrz przykład poniżej).
![Obraz powiadomienia Chrome w systemie macOS przed i po.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-35cb1f20a7481.png?authuser=1&hl=pl)
Możesz wykryć obsługę obrazów za pomocą tego kodu:
if ('image' in Notification.prototype) {
// Image is supported.
} else {
// Image is NOT supported.
}
Zmiany rozszerzeń do Chrome
W rozszerzeniach do Chrome wprowadziliśmy szablony powiadomień, które po tej zmianie będą działać inaczej.
Szablon powiadomienia o obrazie nie będzie już wyświetlać obrazu. Upewnij się, że obrazy uzupełniają się i nie muszą być przydatne dla użytkowników.
![Przed i po w przypadku szablonów graficznych w interfejsie chrome.notification API.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-image-temp-ea8d68fe9acc.png?authuser=1&hl=pl)
Szablon powiadomień o liście zawiera tylko pierwszy element na liście. Rozważ powrót do podstawowego stylu powiadomień i podsumowanie zestawu zmian za pomocą tekstu głównego.
![Przed i po w przypadku szablonów list w interfejsie chrome.notification API.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-list-templ-58a8124f4c8f9.png?authuser=1&hl=pl)
Powiadomienia o postępach będą dodawać do tytułu powiadomienia wartość procentową, która wskazuje postęp zamiast paska postępu.
![Szablony postępu przed i po w interfejsie chrome.notification API.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-progress-t-aeb9eb61ae795.png?authuser=1&hl=pl)
Ostatnia różnica w interfejsie powiadomień polega na tym, że appIconMarkUrl
nie będzie już używany w macOS.
![Przed i po dla parametru appIconMarkUrl w interfejsie chrome.notification API.](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-appiconmar-74e3f48314cd4.png?authuser=1&hl=pl)