# iOS 主屏幕图标上的应用角标

> iOS 18.6.2 上，持有通知权限的主屏 Web 应用调用 navigator.setAppBadge(3) 后，图标上显示红色的 3。

import LabEvidenceLine from '@components/lab/LabEvidenceLine.astro';
import LabHarnessLinks from '@components/lab/LabHarnessLinks.astro';
import LabResults from '@components/lab/LabResults.astro';
import LabBacks from '@components/lab/LabBacks.astro';
import LabProvenance from '@components/lab/LabProvenance.astro';

<LabEvidenceLine behaviour="app-badge-on-home-screen" locale="zh" />

Badging API 可以在已安装 Web 应用的图标上显示数字。2026-10-20，我们在 iPhone 16 Pro、iOS 18.6.2（22G100）上调用 `navigator.setAppBadge()`，有通知权限的主屏应用显示了角标。

<span id="问题"></span>

持有通知权限的 iOS 主屏 Web 应用调用 `navigator.setAppBadge(n)` 时，数字会不会出现在应用的主屏幕图标上？

<span id="测了什么"></span>

## 计数器与截图

测试应用是从 Safari 添加到主屏幕的 OpenPWA 演示应用。它的角标页面（`/demo/badging/`）用计数器记录点按次数。每点按一次 **Increment and set badge**，计数加一并调用 `navigator.setAppBadge(counter)`，所以点三次分别以 1、2、3 调用。此前在同一次运行中，这个应用已获得通知权限（实验记录 N41）。

我们留下了以下记录：

- 第三次调用后的主屏幕图标，来自操作员的截图，拍摄时间取自 EXIF；
- 应用的通知设置页面（设置 → 通知 → OpenPWA），来自另一张截图；
- Safari 标签页和主屏应用中的 `'setAppBadge' in navigator` 与 `'clearAppBadge' in navigator`，来自仪器读数。

设置角标时，检查器的页面列表是空的，代理会话当时读不到页面（N43）；角标本身的证据是截图。

## 怎么运行

1. 在 iPhone 的 Safari 中打开 `https://openpwa.net/demo/`，点按分享，选**添加到主屏幕**，再点**添加**。
2. 从图标打开 **OpenPWA**，进入 Push 页面，点按 **Request permission and subscribe**，再选**允许**。iOS 上的角标与通知权限绑定。
3. 进入 Badging 页面，点按三次 **Increment and set badge**。
4. 回到主屏幕，给应用图标截图。
5. 可选：在「设置 → 通知 → OpenPWA」中确认「标记」已打开。
6. 回到应用点按 **Clear badge**，再看一次图标。

<LabHarnessLinks behaviour="app-badge-on-home-screen" locale="zh" />

## 结果

在 iOS 18.6.2（22G100）上，第三次调用之后，OpenPWA 图标上出现红色角标「3」，截图拍摄于 08:54:41 UTC（截图或录屏，S；实验记录 N60）。31 s 前截下的应用通知设置中，「允许通知」与「标记」都已打开（S；N60），「设置 → 通知」列表中显示「OpenPWA 横幅、声音、标记」（S；N61）。`'setAppBadge' in navigator` 与 `'clearAppBadge' in navigator` 在 Safari 标签页中为 false（仪器读数，A；N03），在主屏应用中为 true（A；N13、N18）。

**Clear badge** 是否清掉了角标，只有操作员的报告，不作为结果发布。操作员后来回答的「no Badge」（N56）符合清除之后的状态，已由截图澄清（N60）。

<LabResults behaviour="app-badge-on-home-screen" locale="zh" />

<span id="文档怎么说"></span>

## WebKit 与 BCD 的角标权限说明

WebKit 的 Safari 16.4 文章记载，iOS 与 iPadOS 上的主屏 Web 应用从这个版本起支持 Badging API，其权限「is automatically granted when a user gives permission for notifications」（[WebKit Features in Safari 16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/)，webkit.org）；iOS 16.4 的 Web Push 文章也把角标列在同一版本中（[Web Push for Web Apps on iOS and iPadOS](https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/)，webkit.org）。BCD 把 iOS 版 Safari 的 `api.Navigator.setAppBadge` 记为 16.4 起支持，备注说保存到主屏幕的 Web 应用支持角标（[Navigator.json](https://raw.githubusercontent.com/mdn/browser-compat-data/main/api/Navigator.json)，github.com）。Badging API 规范定义了 `setAppBadge()`，角标如何呈现由平台决定（[Badging API](https://w3c.github.io/badging/)，w3.org）。

实测与这些来源一致。持有通知权限的主屏应用图标上出现了数字，标签页中则没有这两个方法。它在 18.6.2 上确认了已公开的行为，不是新发现。

## 数据

证据在研究的[数据包](/zh/research/2026-10-ios18-home-screen-web-apps/data/)中（CC BY 4.0）：图标截图为 `screenshots/2026-10-20_iphone16pro_ios18.6.2_T11_1_redacted.png`（其他应用已遮去），设置详情为 `screenshots/2026-10-20_iphone16pro_ios18.6.2_T7_4a.png`，列表为 `screenshots/2026-10-20_iphone16pro_ios18.6.2_T7_4_redacted.png`。特性检测在 `raw/2026-10-20-ios18.6.2-tab-demo.json`（标签页，N03）、`raw/2026-10-20-ios18.6.2-step09-app-demo.json`（演示应用，N13）和 `raw/2026-10-20-ios18.6.2-step12-app-lab.json`（PWA Lab，N18）。机器可读的运行记录在 [/lab/results.json](/lab/results.json) 中，id 为 `app-badge-on-home-screen/2026-10-20-ios-18.6.2-22g100`。

<span id="支撑的条目"></span>

## 相关参考条目

这一结果支撑 [Badging API](/zh/reference/installation/badging/) 条目中的 iOS 实测笔记，以及 Badging API 兼容性数据中 iOS 版 Safari 一行。

<LabBacks behaviour="app-badge-on-home-screen" locale="zh" />

## 局限

- 一台设备、一个版本、一名操作员、一个测试日：iOS 18.6.2（22G100）的 iPhone 16 Pro。
- 角标是截图结果（S）；当时检查器的页面列表为空，角标那一步没有仪器读数。
- 用 `clearAppBadge()` 清除角标只有操作员的报告，不是已发布的结果。
- 只测试了页面给出的整数计数。不带参数的 `setAppBadge()`、`setAppBadge(0)`、从 Service Worker 发起的调用，以及没有通知权限时的调用，都没有测试。
- iPadOS 和其他 iOS 版本都没有测试。同一台设备升级到 iOS 27 后会重新测试。

<LabProvenance locale="zh" />