Angular PWA推送通知点击无响应问题求助

数据老陈

2026-7-24

问题分析与解决方案

你的核心问题是推送通知的负载格式不符合Angular 11 Service Worker的预期，导致它无法识别onActionClick配置，只能执行默认的关闭通知行为，并触发备用的notificationClicks Observable。

修复步骤：调整负载结构

Angular 11的Service Worker要求推送通知的onActionClick配置必须嵌套在notification.data.ngswPush字段下，而非直接放在data根节点。修改后的正确负载如下：

{
  "notification": {
    "title": "New Notification!",
    "actions": [
      {"action": "foo", "title": "Open new tab"},
      {"action": "bar", "title": "Focus last"},
      {"action": "baz", "title": "Navigate last"},
      {"action": "qux", "title": "Send request in the background"},
      {"action": "other", "title": "Just notify existing clients"}
    ],
    "data": {
      "ngswPush": {
        "onActionClick": {
          "default": {"operation": "openWindow"},
          "foo": {"operation": "openWindow", "url": "/absolute/path"},
          "bar": {"operation": "focusLastFocusedOrOpen", "url": "relative/path"},
          "baz": {"operation": "navigateLastFocusedOrOpen", "url": "https://other.domain.com/"},
          "qux": {"operation": "sendRequest", "url": "https://yet.another.domain.com/"}
        }
      }
    }
  }
}

额外检查点

验证ngsw-config.json配置：确认配置文件中已启用推送功能，确保存在类似如下配置（Angular PWA默认会包含）：
```
{
  "index": "/index.html",
  "assetGroups": [...],
  "dataGroups": [...],
  "push": true
}
```
刷新Service Worker缓存：在浏览器开发者工具的Application > Service Workers面板中，点击Update按钮，确保加载的是最新版本的Service Worker，避免旧代码导致的逻辑失效。
检查自定义notificationClicks订阅：如果你在代码中订阅了SwPush.notificationClicks，确保没有编写覆盖默认行为的逻辑，但你的情况是触发了该备用流，说明默认处理未被触发，所以核心修复还是负载结构调整。