Chrome 59 以降では、Notifications API または chrome.notifications 拡張機能 API が表示されます。 macOS のネイティブ通知システムから直接通知されるようになりました。
この変更により、macOS 版 Chrome とプラットフォームの統合感が格段に向上 長いバグ修正も行われています たとえば Chrome が システムのサイレント モードを設定します。
ここでは、この変更によって既存の API
通知センター
この変更の利点の一つは、通知が macOS の通知センター。
<ph type="x-smartling-placeholder">![Google Chrome の通知が macOS の通知センターに表示されるようになりました](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/google-chrome-notificatio-0dd272728498d.png?authuser=6&hl=ja)
相違点
アイコンのサイズと配置
アイコンの外観が変わります。サイズが小さくなり、パディングも 適用されました。透明な背景のアイコンに切り替えることをおすすめします 見栄えが良くなります。
<ph type="x-smartling-placeholder">![Mac 版 Chrome の通知アイコンの表示前と表示後の比較
macOS](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-chrome-ma-8f7a9faf4b135.png?authuser=6&hl=ja)
アクション アイコン
変更前は、アクション ボタンとアイコンが 通知を受け取ります。ネイティブ通知では、操作ボタンのアイコンが 通知にカーソルを合わせて [その他] ボタンを ] ボタンをクリックすると、実行可能な操作が表示されます。
<ph type="x-smartling-placeholder">![によって表示されたアイコン付きの通知操作ボタンの前と後
Chrome と macOS での表示の比較。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-acefa2d32d351.png?authuser=6&hl=ja)
Chrome のロゴ
Chrome ロゴは常に表示され、置き換えや変更はできません。この は、macOS のサードパーティ アプリケーションに必要です。
画像
image
オプションは macOS でサポートされなくなります。イメージを定義する場合、
プロパティを使用しても通知は表示されますが、
パラメータを使用します(下記の例を参照)。
![macOS の Chrome 通知画像の表示前と使用後。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-35cb1f20a7481.png?authuser=6&hl=ja)
次のコードを使用して、機能検出の画像サポートを使用できます。
if ('image' in Notification.prototype) {
// Image is supported.
} else {
// Image is NOT supported.
}
Chrome 拡張機能の変更
Chrome 拡張機能には通知テンプレートのコンセプトがあります。 この変更によって動作が変わります。
画像通知テンプレートに画像が表示されなくなります。注意すべき点として 画像を補足するもので、ユーザーにとって有用である必要はありません。
<ph type="x-smartling-placeholder">![chrome.notification API の画像テンプレートの使用前と使用後。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-image-temp-ea8d68fe9acc.png?authuser=6&hl=ja)
リスト通知テンプレートには、リストの最初の項目のみが表示されます。マイページ 基本的な通知スタイルに戻して、body の使用を検討してください。 一連の変更を要約できます
<ph type="x-smartling-placeholder">![chrome.notification API のリスト テンプレートの使用前と使用後](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-list-templ-58a8124f4c8f9.png?authuser=6&hl=ja)
進行状況の通知では、通知のタイトルに割合の値が付加されます 進行状況バーの代わりに進行状況を示すことができます。
<ph type="x-smartling-placeholder">![chrome.notification API の進行状況テンプレートの使用前と使用後。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-progress-t-aeb9eb61ae795.png?authuser=6&hl=ja)
通知 UI の最後の違いは、appIconMarkUrl
が
macOS では使用されなくなりました。
![chrome.notification API の appIconMarkUrl の使用前と使用後](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-appiconmar-74e3f48314cd4.png?authuser=6&hl=ja)