このページは Cloud Translation API によって翻訳されました。

通知トリガー API

通知トリガーを使用すると、ネットワーク接続を必要としないローカル通知のスケジュールを設定できるため、カレンダーアプリなどのユースケースに最適です。

Thomas Steiner

Twitter GitHub Glitch Mastodon ホームページ

警告: Google のケーパビリティプロジェクトの一部である Notification Triggers API の開発は現在行われていません。通知環境はオペレーティングシステム間で急速に変化しており、プラットフォーム間で堅牢で一貫性のある、信頼性の高いエクスペリエンスを提供できるかどうかは不明確です。

優れたエクスペリエンスを実現するには、タブが開いているかどうかに依存せずに、期限切れのまたは無効化されたスケジュール設定された通知（カレンダーの予定のキャンセルなど）をプルーニングできるメカニズムが必要です。「定期的なバックグラウンド同期」を使用できる頻度では不十分であり、通知を表示する必要があるため、Push API も適切なソリューションではないというフィードバックをいただきました。

通知トリガーとは

ウェブデベロッパーは、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 */
}

通知のスケジュール設定

通知のスケジュール設定は通常のプッシュ通知の表示と似ていますが、TimestampTrigger オブジェクトを値として通知の options オブジェクトに渡す 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 の通知パネルを使用して、通知をデバッグできます。デバッグを開始するには、「Start recording」または Ctrl+E キー（Mac では command+E キー）を押します。Chrome DevTools は、スケジュール設定された通知、表示された通知、閉じた通知を含むすべての通知イベントを、DevTools を閉じても 3 日間記録します。

[アプリケーション] パネルにある Chrome DevTools の [通知] ペインに、スケジュール設定された通知イベントがログに記録されました。 — スケジュール設定された通知。

表示された通知イベントが Chrome DevTools の [通知] ペインに記録されます。 — 表示された通知。

デモ

デモで通知トリガーの動作を確認できます。ここでは、通知のスケジュール設定、スケジュール設定された通知の一覧表示、通知のキャンセルを行うことができます。ソースコードは Glitch で入手できます。

セキュリティと権限

Chrome チームは、強力なウェブプラットフォーム機能へのアクセスの制御で定義されている基本原則（ユーザーコントロール、透明性、エルゴノミクスなど）に基づいて、Notification Triggers API を設計、実装しています。この API には Service Worker が必要なため、安全なコンテキストも必要です。API を使用するには、通常のプッシュ通知と同じ権限が必要です。

ユーザーコントロール

この API は、ServiceWorkerRegistration のコンテキストでのみ使用できます。これは、必要なデータがすべて同じコンテキストに保存され、Service Worker が削除されたとき、またはユーザーがオリジンのすべてのサイトデータを削除したときに、自動的に削除されます。Cookie をブロックすると、Service Worker が Chrome にインストールされなくなり、この API を使用できなくなります。ユーザーはサイトの設定で、そのサイトの通知をいつでも無効にできます。

透明性

Push API とは異なり、この API はネットワークに依存しません。つまり、スケジュール設定された通知では、badge、icon、image 属性で参照される画像リソースなど、必要なすべてのデータが事前に必要です。つまり、スケジュール設定された通知はデベロッパーが表示できず、ユーザーが通知を操作するまで Service Worker の復帰は行われません。したがって、現時点では、IP アドレスの位置情報検索など、プライバシーを侵害する可能性のあるアプローチでデベロッパーがユーザーに関する情報を取得する方法は確認されていません。また、この設計により、Android の AlarmManager のようなオペレーティングシステムのスケジューリングメカニズムを利用して、バッテリーを節約することもできます。

フィードバック

Chrome チームでは、通知トリガーの使用経験についてお伺いします。

API 設計について教えてください

API について、想定どおりに動作しない点はありますか？あるいは、アイデアを実装するために必要なメソッドやプロパティが欠落していないか？セキュリティモデルについて質問やコメントがある場合は通知トリガー GitHub リポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加します。

実装に問題がある場合

Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？ new.crbug.com でバグを報告します。できるだけ詳しい情報と簡単な再現手順を記述し、[Component] を UI>Notifications に設定します。Glitch は、バグの再現をすばやく簡単に行うのに最適です。

API の使用を計画している場合は、

サイトで通知トリガーを使用する予定はありますか？皆様のサポートのおかげで、Google は各機能に優先順位を付け、そのサポートがいかに重要であるかを他のブラウザベンダーに示すことができます。ハッシュタグ #NotificationTriggers を使って @ChromiumDev 宛てにツイートを送信し、どこでどのように使用されているかを教えてください。

謝辞

通知トリガーは Richard Knoll によって実装され、説明書は Richard が協力して Peter Beverloo が執筆しました。記事は、Joe Medley、Pete LePage、Richard と Peter がレビューしました。Lukas Blazek（Unsplash）のヒーロー画像