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

Stephen McGruer 氏
Stephen McGruer

Chrome 59 以降では、Notifications API または chrome.notifications extensions API を介して送信された通知は、Chrome 独自のシステムではなく macOS ネイティブの通知システムで直接表示されます。

この変更により、macOS 版 Chrome のプラットフォームとの統合が改善され、Chrome のサイレント モード設定が反映されないなど、長年にわたる多くのバグが修正されました。

この変更による既存の API の違いを以下に示します。

通知センター

この変更の利点の一つは、通知が macOS の通知センターに表示されることです。

Google Chrome の通知が macOS 通知センターに表示される
macOS 通知センターに Google Chrome の通知が表示されます

相違点

アイコンのサイズと配置

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

Mac 版 Chrome の通知アイコンの表示前と使用後(Chrome での表示と macOS での表示の比較)。
Mac の Chrome 通知アイコンの表示前と使用後(Chrome での表示と macOS での表示の比較)

アクション アイコン

この変更が行われる前は、アクション ボタンとアイコンが通知に表示されていました。ネイティブ通知では、アクション ボタンのアイコンは使用されません。ユーザーが通知にカーソルを合わせて [その他] ボタンを選択し、使用可能なアクションを表示する必要があります。

Chrome で表示されるアイコンと macOS で表示されるアイコンを伴う通知操作ボタンの前後。
Chrome で表示されるアイコン付きの通知操作ボタンと、macOS で表示される通知操作ボタンの使用前後

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

画像

image オプションは macOS でサポートされなくなります。画像プロパティを定義した場合、通知は引き続き表示されますが、画像パラメータは無視されます(下記の例を参照)。

macOS の Chrome の通知変更前と変更後の画像。
通知前後の画像(macOS 版 Chrome の場合)

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

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

Chrome 拡張機能の変更

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

画像通知テンプレートに画像が表示されなくなります。画像は補足的なものであり、ユーザーにとって有用であるとは限りません。

chrome.notification API の画像テンプレートの使用前と使用後
chrome.notification API の画像テンプレートの使用前と使用後

リスト通知テンプレートでは、リストの最初の項目のみが表示されます。基本的な通知スタイルに戻り、本文を使用して一連の変更を要約することをおすすめします。

chrome.notification API のリスト テンプレートの使用前と使用後
chrome.notification API のリスト テンプレートの使用前と使用後

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

chrome.notification API の進行状況テンプレートの使用前と使用後
chrome.notification API の進行状況テンプレートの使用前と使用後

通知 UI の最後の違いは、macOS では appIconMarkUrl が使用されなくなる点です。

chrome.notification API の appIconMarkUrl の前と後。
chrome.notification API の appIconMarkUrl の前と後