バッジAPI

W3C作業草案

この文書の詳細
このバージョン:
https://www.w3.org/TR/2023/WD-badging-20230503/
最新公開バージョン:
https://www.w3.org/TR/badging/
最新編集者ドラフト:
https://w3c.github.io/badging/
履歴:
https://www.w3.org/standards/history/badging
コミット履歴
編集者:
Marcos Cáceres (Apple Inc.)
Diego González (Microsoft)
以前の編集者:
Matt Giuca (Google Inc.) -
Jay Harris (Google Inc.) -
フィードバック:
GitHub w3c/badging (プルリクエスト, 新しい課題, オープン課題)

概要

この仕様は、インストール済みウェブアプリケーションがアプリケーションバッジを設定できるAPIを定義します。アプリケーションバッジは通常、デバイスのホーム画面やアプリケーションドックでアプリのアイコンの横に表示されます。

この文書のステータス

このセクションは、本書が公開された時点での文書のステータスを説明します。現在のW3C出版物の一覧と、この技術報告書の最新改訂版は、W3C技術報告書インデックス(https://www.w3.org/TR/)に掲載されています。

この文書は作業中です。

この文書は、Web Applications Working Groupによって、「勧告ルート」を使用して作業草案として公開されました。

作業草案として公開されたことは、W3Cおよびその会員による承認を意味するものではありません。

この文書はドラフトであり、随時他の文書によって更新・置換・廃止される可能性があります。作業中以外の文献としてこの文書を引用することは不適切です。

この文書は、W3C特許ポリシーに則って活動しているグループによって作成されました。 W3Cは、グループの成果物に関連して行われた特許開示の公開リストを管理しています。そのページには特許開示方法の案内も掲載されています。ある個人が本質的権利を含むと信じる特許を実際に知っている場合は、W3C特許ポリシー第6節に従って情報を開示する必要があります。

この文書は、2021年11月2日 W3Cプロセス文書に従って管理されています。

1. 利用例

このセクションは規定ではありません。

1: アプリのアイコンに未読数を表示する
async function updateMailBadge() {
  // APIがサポートされているか確認します。
  if (!navigator.setAppBadge) return;

  const unreadCount = await getUnreadMailCount();

  // アプリバッジの設定を試みます。
  try {
    await navigator.setAppBadge(unreadCount);
  } catch (e) {
    // バッジがサポートされていないか、ユーザーがバッジの設定を拒否しています。
  }
}

バッジは、オペレーティングシステムのアプリケーションアイコン上に表示される場合があります。同じアプリケーション内で複数回API呼び出しでバッジを設定または消去した場合、最新の操作が有効となり、アプリケーションを閉じた後も表示され続けることがあります。

2: アプリのアイコンに準備完了ステータスを表示する
async function showPlayerTurn(playerTurnId) {
  if (playerTurnId === localPlayerId)
    await navigator.setAppBadge();
  else
    await navigator.clearAppBadge();
}

一部のオペレーティングシステムでは、バッジの設定にユーザーの許可が必要な場合があります。その場合、開発者は"notifications"権限のステータスを確認してからバッジを設定する必要があります。権限が付与されていない場合、開発者は Notification.requestPermission() を通じて許可を求める必要があります。

3: 権限の確認
async function checkPermission() {
  permission = await navigator.permissions.query({
    name: "notifications",
  });
  const button = document.getElementById("permission-button");
  if (permission.state === "prompt") {
    // ユーザーに権限の許可を促します。
    button.hidden = false;
    button.addEventListener("click", async () => {
      await Notification.requestPermission();
      checkPermission();
    }, { once: true });
    return;
  }
  button.hidden = true;
}

2. モデル

バッジは、インストール済みウェブアプリケーションがユーザーに新しい活動があり注意が必要であることを通知したり、未読数など少量の情報を示すための仕組みです。

バッジは、以下ののいずれかを持つことができます:

特別な値 "nothing"
現在バッジが設定されていないことを示します。
特別な値 "flag"
バッジが設定されているが、特定の値は持たないことを示します。
数値値:
バッジが設定され、0より大きい数値が指定されていることを示します。

インストール済みウェブアプリケーションには、関連付けられたバッジがあり、初期状態は"nothing"です。

ユーザーエージェントは、(再)設定する際に、アプリケーションのバッジを"nothing"にする場合があります(例:システムの慣例に従う場合)。

3. バッジの表示

アプリケーションのバッジが設定されている場合、ユーザーエージェントまたはオペレーティングシステムは、ユーザーのオペレーティングシステム上でアプリケーションの主要なアイコン表現の横にバッジを表示すべきです(例:デバイスのホーム画面上のアプリアイコンの上に小さなオーバーレイとして)。

ユーザーエージェントは、バッジの明示的な許可をユーザーから要求する場合があります。その場合、すべきです許可の付与を"notifications"権限に紐付けます。

バッジ設定され、その値が"flag"の場合、ユーザーエージェント またはオペレーティングシステムは、非特定のシンボル(例:色付きの円)でインジケーターを表示すべきです

バッジの値が設定され、"nothing"の場合、ユーザーエージェントまたはオペレーティングシステムは消去を行い、表示を停止すべきです

バッジ設定され、値が数値の場合、ユーザーエージェント またはオペレーティングシステムは:

4. NavigatorおよびWorkerNavigatorインターフェースの拡張

WebIDL[SecureContext]
interface mixin NavigatorBadge {
  Promise<undefined> setAppBadge(
    optional [EnforceRange] unsigned long long contents
  );
  Promise<undefined> clearAppBadge();
};

Navigator includes NavigatorBadge;
WorkerNavigator includes NavigatorBadge;

アプリケーションバッジを一切表示しないユーザーエージェントは、含めるべきではありません include NavigatorBadge

4.1 setAppBadge() メソッド

setAppBadge() メソッドが呼び出されたとき、ユーザーエージェントは必ずアプリケーションバッジを設定し、thiscontents引数の値にします。

4.2 clearAppBadge() メソッド

clearAppBadge() メソッドが呼び出されたとき、ユーザーエージェントは必ずアプリケーションバッジを設定し、thisの値を0にします。

5. アプリケーションバッジの設定

プラットフォームオブジェクトcontextアプリケーションバッジを設定するには、オプションのunsigned long long contents値を使います:

  1. globalcontext関連グローバルオブジェクトとする。
  2. globalWindow オブジェクトなら:
    1. documentglobal関連付けられた Documentとする。
    2. document完全にアクティブでなければ、却下されたpromiseを返し、エラーは"InvalidStateError"、DOMExceptionとします。
  3. promise新しいpromiseとする。
  4. 並列で
    1. this関連設定オブジェクトオリジンが、this関連設定オブジェクトトップレベルオリジン と同一オリジンでない場合、グローバルタスクをキューし、promiseを"SecurityError"で却下して、このアルゴリズムを終了します。
    2. ユーザーエージェントが明示的な許可を必要とする場合、アプリケーションバッジの設定について:
      1. permissionStateを、"notifications"で現在の権限状態を取得した結果とする。
      2. permissionStateが"granted"でなければ、 グローバルタスクをキューし、ユーザー操作タスクソースglobalに対してpromiserejectし、NotAllowedErrorでこのアルゴリズムを終了します。
    3. contentsについて分岐し、以下の場合:
      contentsが渡されていない場合:
      badge"flag"に設定します。
      contentsが0の場合:
      badge"nothing"に設定します。
      contents
      badgecontentsに設定します。
    4. グローバルタスクをキューし、DOM操作タスクソースglobalに対して、resolveし、promiseundefinedで解決します。
  5. promiseを返します。

6. プライバシーに関する考慮事項

このAPIは設計上、書き込み専用です。バッジの値をサイト側で読み取る方法は存在せず、これによりアプリケーションバッジがストレージやフィンガープリンティングの仕組みとして利用されることを防いでいます。

7. セキュリティに関する考慮事項

ユーザーエージェントやオペレーティングシステムは任意でバッジを消去することができ、システムの慣例(例:システムリセット時)に従うこともあります。

Issue 68: バッジの設定能力のレート制限

提起者:@grorg / webkit-dev より:

ブラウザが短時間に多数のset/clear操作(例:バッジの点滅を作成するため)を無視する仕様文を追加してほしいです。例えば、バッジの操作は1分に1回まで等の制限があるとよいでしょうか?

これはUIに関する内容であるため、要件というより推奨事項となるかもしれませんが、対応すべきです。

最終的に書き込まれた値が必ずユーザーに表示されるという「最終的整合性」の保証があるとよいです。これにより、例えば「3」を設定し、10秒後に「12」を設定した場合、レート制限のせいで「12」が反映されず「3」のままになる状況を防げます。具体的には「UIがN秒以上更新されていない場合は新しい値を即時反映し、そうでなければN−(前回更新からの経過時間)秒後に反映する」といったルールが望ましいです。

8. アクセシビリティに関する考慮事項

このセクションは規定ではありません。

Issue 24: アクセシビリティセクションの追加

ブラウザがバッジを表示する制御を持つ場合、アクセシビリティガイドラインを定義できるようにするべきです。

9. 適合性

規定ではないと明記されたセクションだけでなく、この仕様書中のすべての著者向けガイドライン、図、例、注釈は規定ではありません。それ以外の内容はすべて規定事項です。

この文書内のキーワード MAYMUSTSHOULDSHOULD NOT は、 BCP 14 [RFC2119] [RFC8174] の記載通りに解釈されます(すべて大文字で記述された場合のみ)。

A. 参考文献

A.1 規定参照

[appmanifest]
Web Application Manifest. Marcos Caceres; Kenneth Christiansen; Matt Giuca; Aaron Gustafson; Daniel Murphy; Anssi Kostiainen. W3C. 2023年5月2日. W3C作業草案. URL: https://www.w3.org/TR/appmanifest/
[html]
HTML標準. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. 現行標準. URL: https://html.spec.whatwg.org/multipage/
[infra]
Infra標準. Anne van Kesteren; Domenic Denicola. WHATWG. 現行標準. URL: https://infra.spec.whatwg.org/
[notifications]
Notifications API標準. Anne van Kesteren. WHATWG. 現行標準. URL: https://notifications.spec.whatwg.org/
[permissions]
Permissions. Marcos Caceres; Mike Taylor. W3C. 2022年12月20日. W3C作業草案. URL: https://www.w3.org/TR/permissions/
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels. S. Bradner. IETF. 1997年3月. ベストカレントプラクティス. URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words. B. Leiba. IETF. 2017年5月. ベストカレントプラクティス. URL: https://www.rfc-editor.org/rfc/rfc8174
[WEBIDL]
Web IDL標準. Edgar Chen; Timothy Gu. WHATWG. 現行標準. URL: https://webidl.spec.whatwg.org/