通知トリガーを使用すると、ネットワーク接続を必要としないローカル通知をスケジュールできます。そのため、カレンダー アプリなどのユースケースに最適です。
通知の対象とは何ですか？
ウェブ デベロッパーは、Web Notifications API を使用して通知を表示できます。この機能は、Push API と組み合わせて、速報ニュースや受信メッセージなどの緊急性の高い情報をユーザーに通知するために使用されることがよくあります。通知は、ユーザーのデバイスで JavaScript を実行することで表示されます。
Push API の問題は、時間や場所などの特定の条件が満たされたときに表示される必要がある通知をトリガーするのに信頼性がないことです。時間ベースの条件の例としては、午後 2 時の上司との重要な会議を知らせるカレンダーの通知があります。位置情報に基づく条件の例としては、スーパーマーケットの近くにいるときに牛乳を買うよう通知する機能があります。ネットワーク接続や Doze モードなどのバッテリー節約機能により、プッシュベースの通知の配信が遅れることがあります。
通知トリガーは、トリガー条件付きの通知を事前にスケジュールすることでこの問題を解決します。これにより、ネットワーク接続がない場合やデバイスがバッテリー セーバー モードになっている場合でも、オペレーティング システムが適切なタイミングで通知を配信します。
ユースケース
カレンダー アプリケーションは、時間ベースの通知トリガーを使用して、ユーザーに今後の会議を通知できます。カレンダー アプリのデフォルトの通知スキームは、会議の 1 時間前に最初のヘッドアップ通知を表示し、5 分前に別の緊急性の高い通知を表示する、といったものになる可能性があります。
テレビ ネットワークは、お気に入りのテレビ番組がまもなく始まることや、会議のライブ配信がまもなく始まることをユーザーに通知する場合があります。
タイムゾーン変換サイトでは、時間ベースの通知トリガーを使用して、電話会議やビデオ通話のアラームをスケジュール設定できます。
現在のステータス
| ステップ | ステータス |
|---|---|
| 1. 説明を作成する | 完了 |
| 2. 仕様の最初のドラフトを作成する | 未開始 |
| 3. フィードバックを収集し、設計を繰り返します。 | 作成中 |
| 4. オリジン トライアル | 完了 |
| 5. リリース | 未開始 |
通知トリガーの使用方法
about://flags で有効にする
オリジン トライアル トークンを使用せずに Notification Triggers API をローカルで試すには、about://flags で #enable-experimental-web-platform-features フラグを有効にします。
特徴検出
ブラウザが通知トリガーをサポートしているかどうかは、showTrigger プロパティの存在を確認することで判断できます。
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
通知のスケジュールを設定する
通知のスケジュール設定は、通常のプッシュ通知の表示と似ていますが、通知の options オブジェクトに値として TimestampTrigger オブジェクトを含む showTrigger 条件プロパティを渡す必要があります。
const createScheduledNotification = async (tag, title, timestamp) => {
const registration = await navigator.serviceWorker.getRegistration();
registration.showNotification(title, {
tag: tag,
body: 'This notification was scheduled 30 seconds ago',
showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
});
};
スケジュール設定された通知をキャンセルする
スケジュール設定された通知をキャンセルするには、まず ServiceWorkerRegistration.getNotifications() を介して特定のタグに一致するすべての通知のリストをリクエストします。スケジュールされた通知をリストに含めるには、includeTriggered フラグを渡す必要があります。
const cancelScheduledNotification = async (tag) => {
const registration = await navigator.serviceWorker.getRegistration();
const notifications = await registration.getNotifications({
tag: tag,
includeTriggered: true,
});
notifications.forEach((notification) => notification.close());
};
デバッグ
Chrome DevTools の [Notifications] パネルを使用すると、通知をデバッグできます。デバッグを開始するには、[イベントの記録を開始] 
または Ctrl+E（Mac の場合は Command+E）を押します。Chrome DevTools は、DevTools が閉じている場合でも、スケジュールされた通知、表示された通知、閉じられた通知など、すべての通知イベントを 3 日間記録します。
![スケジュールされた通知イベントが、Chrome デベロッパー ツールの [通知] ペイン（[アプリケーション] パネル内）に記録されました。](https://developer.chrome.com/static/docs/web-platform/notification-triggers/image/a-scheduled-notification-1bbf14c57c2da.png?authuser=002&hl=ja)
![表示された通知イベントが Chrome DevTools の [通知] ペインに記録されました。](https://developer.chrome.com/static/docs/web-platform/notification-triggers/image/a-displayed-notification-d54816e76c8f2.png?authuser=002&hl=ja)
デモ
デモでは、通知トリガーが動作する様子を確認できました。通知のスケジュール設定、スケジュール設定された通知の一覧表示、通知のキャンセルが可能でした。
セキュリティと権限
Chrome チームは、強力なウェブ プラットフォーム機能へのアクセスを制御するで定義されているユーザー制御、透明性、人間工学などの基本原則を使用して、Notification Triggers API を設計、実装しました。この API はサービス ワーカーを必要とするため、安全なコンテキストも必要です。API を使用するには、通常のプッシュ通知と同じ権限が必要です。
ユーザー コントロール
この API は ServiceWorkerRegistration のコンテキストでのみ使用できます。つまり、必要なデータはすべて同じコンテキストに保存され、サービス ワーカーが削除されたとき、またはユーザーがオリジンのすべてのサイトデータを削除したときに自動的に削除されます。Cookie をブロックすると、Chrome にサービス ワーカーをインストールできなくなるため、この API を使用することもできなくなります。通知は、サイトの設定でいつでもユーザーがサイトごとに無効にできます。
透明性
Push API とは異なり、この API はネットワークに依存しません。つまり、スケジュール設定された通知には、badge、icon、image 属性で参照される画像リソースなど、必要なデータがすべて事前に必要になります。つまり、スケジュールされた通知の表示はデベロッパーが確認できず、ユーザーが通知を操作するまでサービス ワーカーを起動しません。そのため、現時点では、デベロッパーが IP アドレスのジオロケーション ルックアップなどのプライバシー侵害の可能性のある方法でユーザーに関する情報を取得できる既知の方法はありません。この設計では、Android の AlarmManager などのオペレーティング システムが提供するスケジューリング メカニズムを必要に応じて利用することもできます。これにより、バッテリーの節約に役立ちます。
フィードバック
Chrome チームは、通知トリガーに関する皆様のご意見をお待ちしています。
API 設計について教えてください
API が想定どおりに動作しない点はありますか？アイデアを実装するために必要なメソッドやプロパティが不足している場合はどうすればよいですか？セキュリティ モデルについてご質問やご意見がある場合は、通知トリガーの GitHub リポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加してください。
実装に関する問題ですか？
Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？new.crbug.com でバグを報告します。できるだけ詳細な情報と、再現手順を簡潔に記載し、[コンポーネント] を UI>Notifications に設定してください。
API を使用する予定ですか？
サイトで通知トリガーを使用する予定ですか？公開サポートは、機能の優先順位付けに役立ち、他のブラウザ ベンダーにサポートの重要性を示すことができます。ハッシュタグ #NotificationTriggers を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。
関連リンク
- 一般向けの説明
- トラッキング バグ
- ChromeStatus.com のエントリ
- Blink コンポーネント:
UI>Notifications
謝辞
通知トリガーは Richard Knoll によって実装され、説明は Peter Beverloo によって作成されました。Richard も貢献しています。この記事は、Joe Medley、Pete LePage、Richard、Peter によってレビューされました。ヒーロー画像: Unsplash の Lukas Blazek