如何通过PWA触发Android悬浮通知（Heads-up Notification）？

PWA完全可以实现Android上的悬浮通知，核心是通过推送优先级配置、通知渠道设置以及系统权限配合来达成，具体步骤如下：

1. 服务器端设置推送优先级 #

发送Web Push请求时，必须同时配置两个关键项：

• 在HTTP请求头中添加 Urgency: high，告知推送服务这是高优先级消息；
• 在推送payload的notification字段里，指定priority: "high"和requireInteraction: true，示例payload：

{
  "notification": {
    "title": "值班任务提醒",
    "body": "有新的值班安排需要处理",
    "icon": "/icons/duty-192x192.png",
    "data": { "url": "/duty-detail" },
    "priority": "high",
    "requireInteraction": true
  }
}

2. Service Worker中配置通知展示选项 #

在监听push事件时，调用showNotification必须传入高优先级相关参数，同时指定自定义通知渠道（针对Android 8.0+）：
首先在activate事件中创建高优先级通知渠道：

self.addEventListener('activate', async () => {
  if ('NotificationChannel' in self.registration.notifications) {
    const dutyChannel = new NotificationChannel(
      'duty-alerts',
      '值班提醒',
      {
        importance: self.registration.notifications.IMPORTANCE_HIGH,
        enableVibration: true,
        enableLights: true,
        showBadge: true,
        vibrationPattern: [200, 100, 200]
      }
    );
    await self.registration.notifications.createNotificationChannel(dutyChannel);
  }
});

然后在push事件中使用该渠道展示通知：

self.addEventListener('push', (event) => {
  const payload = event.data?.json() || {};
  const notificationOpts = {
    body: payload.notification.body,
    icon: payload.notification.icon,
    data: payload.notification.data,
    priority: 'high',
    requireInteraction: true,
    channelId: 'duty-alerts',
    vibrate: [200, 100, 200]
  };

  event.waitUntil(
    self.registration.showNotification(payload.notification.title, notificationOpts)
  );
});

3. 确认Android系统权限设置 #

即使PWA配置正确，用户需要在系统层面开启对应的权限：

• 找到系统设置中的「通知」选项，定位到你的PWA应用；
• 开启「悬浮通知」开关；
• 将通知优先级设置为「高」或「重要」（不同厂商系统表述可能略有差异）。

注意事项 #

• Android 8.0（API 26）及以上版本强制要求使用通知渠道，所以必须创建高优先级渠道才能触发悬浮通知；
• requireInteraction参数会让通知停留在状态栏直到用户手动处理，进一步强化提醒效果；
• 避免滥用高优先级推送，频繁发送可能会被系统限制或用户关闭权限。

内容的提问来源于stack exchange，提问作者Sam