macOS のネイティブ通知システムへの移行

Stephen McGruer
Stephen McGruer

Chrome 59 以降では、Notifications API または chrome.notifications 拡張機能 API が表示されます。 macOS のネイティブ通知システムから直接通知されるようになりました。

この変更により、macOS 版 Chrome とプラットフォームの統合感が格段に向上 長いバグ修正も行われています たとえば Chrome が システムのサイレント モードを設定します。

ここでは、この変更によって既存の API

通知センター

この変更の利点の一つは、通知が macOS の通知センター。

<ph type="x-smartling-placeholder">
</ph> Google Chrome の通知が macOS の通知センターに表示されるようになりました <ph type="x-smartling-placeholder">
</ph> Google Chrome の通知が macOS の通知センターに表示されるようになりました

相違点

アイコンのサイズと配置

アイコンの外観が変わります。サイズが小さくなり、パディングも 適用されました。透明な背景のアイコンに切り替えることをおすすめします 見栄えが良くなります。

<ph type="x-smartling-placeholder">
</ph> Mac 版 Chrome の通知アイコンの表示前と表示後の比較
    macOS <ph type="x-smartling-placeholder">
</ph> Mac 版 Chrome の通知アイコンの表示前と表示後の比較 macOS

アクション アイコン

変更前は、アクション ボタンとアイコンが 通知を受け取ります。ネイティブ通知では、操作ボタンのアイコンが 通知にカーソルを合わせて [その他] ボタンを ] ボタンをクリックすると、実行可能な操作が表示されます。

<ph type="x-smartling-placeholder">
</ph> によって表示されたアイコン付きの通知操作ボタンの前と後
    Chrome と macOS での表示の比較。 <ph type="x-smartling-placeholder">
</ph> によって表示されたアイコン付きの通知操作ボタンの前と後 Chrome と macOS での表示の比較

Chrome ロゴは常に表示され、置き換えや変更はできません。この は、macOS のサードパーティ アプリケーションに必要です。

画像

image オプションは macOS でサポートされなくなります。イメージを定義する場合、 プロパティを使用しても通知は表示されますが、 パラメータを使用します(下記の例を参照)。

<ph type="x-smartling-placeholder">
</ph> macOS の Chrome 通知画像の表示前と使用後。 <ph type="x-smartling-placeholder">
</ph> macOS の Chrome 通知画像の表示前と使用後

次のコードを使用して、機能検出の画像サポートを使用できます。

if ('image' in Notification.prototype) {  
  // Image is supported.
} else {  
  // Image is NOT supported.
}

Chrome 拡張機能の変更

Chrome 拡張機能には通知テンプレートのコンセプトがあります。 この変更によって動作が変わります。

画像通知テンプレートに画像が表示されなくなります。注意すべき点として 画像を補足するもので、ユーザーにとって有用である必要はありません。

<ph type="x-smartling-placeholder">
</ph> chrome.notification API の画像テンプレートの使用前と使用後。 <ph type="x-smartling-placeholder">
</ph> chrome.notification API の画像テンプレートの使用前と使用後

リスト通知テンプレートには、リストの最初の項目のみが表示されます。マイページ 基本的な通知スタイルに戻して、body の使用を検討してください。 一連の変更を要約できます

<ph type="x-smartling-placeholder">
</ph> chrome.notification API のリスト テンプレートの使用前と使用後 <ph type="x-smartling-placeholder">
</ph> chrome.notification API のリスト テンプレートの使用前と使用後

進行状況の通知では、通知のタイトルに割合の値が付加されます 進行状況バーの代わりに進行状況を示すことができます。

<ph type="x-smartling-placeholder">
</ph> chrome.notification API の進行状況テンプレートの使用前と使用後。 <ph type="x-smartling-placeholder">
</ph> chrome.notification API の進行状況テンプレートの使用前と使用後

通知 UI の最後の違いは、appIconMarkUrl が macOS では使用されなくなりました。

<ph type="x-smartling-placeholder">
</ph> chrome.notification API の appIconMarkUrl の使用前と使用後 <ph type="x-smartling-placeholder">
</ph> chrome.notification API の appIconMarkUrl の使用前と使用後