通知トリガーを使用すると、ネットワーク接続を必要としないローカル通知のスケジュールを設定できるため、カレンダー アプリなどのユースケースに最適です。
通知トリガーとは
ウェブ デベロッパーは、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 日間記録します。
デモ
デモで通知トリガーの動作を確認できます。ここでは、通知のスケジュール設定、スケジュール設定された通知の一覧表示、通知のキャンセルを行うことができます。ソースコードは 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 宛てにツイートを送信し、どこでどのように使用されているかを教えてください。
関連リンク
- 公開の説明
- 通知トリガーのデモ | 通知トリガーのデモソース
- バグの追跡
- ChromeStatus.com のエントリ
- Blink コンポーネント:
UI>Notifications
謝辞
通知トリガーは Richard Knoll によって実装され、説明書は Richard が協力して Peter Beverloo が執筆しました。記事は、Joe Medley、Pete LePage、Richard と Peter がレビューしました。Lukas Blazek(Unsplash)のヒーロー画像