Ionic 4+AngularFire2 Messaging：FCM通知点击动作配置及推送时长疑问

嘿，我来帮你搞定这两个FCM配置的问题，都是你当前用Ionic 4 + AngularFire2 Messaging会遇到的典型场景：

一、配置通知点击的响应行为 #

FCM确实对Android和Web端的点击跳转逻辑有不同的配置字段，在Ionic应用里需要分场景处理：

1. 后台发送通知（Firebase控制台/FCM API） #

• Android端：必须在通知的payload中添加click_action字段，值要和你AndroidManifest.xml里MainActivity的intent-filter对应。比如：

  {
    "notification": {
      "title": "新通知",
      "body": "点击查看详情",
      "click_action": "FCM_PLUGIN_ACTIVITY"
    },
    "to": "用户设备token"
  }
  

  同时要确保AndroidManifest.xml的MainActivity里配置了对应的intent-filter：

  <activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="FCM_PLUGIN_ACTIVITY" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
  </activity>
  

  这样用户点击Android通知时，就会打开你的Ionic应用主页面，之后你可以在Ionic的代码里通过监听FCM的点击事件，跳转到具体的路由页面。

• Web端（Ionic PWA）：在payload中添加link字段，值为你要跳转的URL。如果是应用内路由，直接写相对路径即可（比如/tabs/home），FCM会自动处理为完整的应用URL：

  {
    "notification": {
      "title": "新通知",
      "body": "点击查看详情",
      "link": "/tabs/home"
    },
    "to": "用户设备token"
  }
  

2. 前端用AngularFire2发送通知 #

如果是在Ionic应用内通过AngularFire2发送通知，你可以在构建payload时同时包含两个字段，FCM会根据目标平台自动识别并生效：

import { AngularFireMessaging } from '@angular/fire/messaging';

constructor(private afMessaging: AngularFireMessaging) {}

sendUserNotification(userToken: string, title: string, content: string) {
  const notificationPayload = {
    notification: {
      title: title,
      body: content,
      // Android专属配置
      click_action: 'FCM_PLUGIN_ACTIVITY',
      // Web专属配置
      link: `${window.location.origin}/tabs/detail`
    },
    token: userToken
  };

  this.afMessaging.send(notificationPayload)
    .then(res => console.log('通知发送成功:', res))
    .catch(err => console.error('发送失败:', err));
}

二、设置桌面Web推送通知的显示时长 #

FCM本身没有提供直接配置通知显示时长的参数，但可以通过Service Worker来自定义控制：

1. 让通知一直显示（直到用户操作） #

在你的Firebase Service Worker文件（通常是firebase-messaging-sw.js）中，监听push事件并设置requireInteraction: true，这样通知不会自动消失：

self.addEventListener('push', (event) => {
  const payload = event.data?.json() || {};
  const notificationOpts = {
    body: payload.notification.body,
    icon: '/assets/icon.png',
    requireInteraction: true, // 关键属性：保持通知显示
    badge: '/assets/badge.png'
  };

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

2. 自定义自动关闭时长（可选） #

如果想让通知在指定时间后自动关闭，可以在显示通知后添加定时器调用close()方法，但注意部分浏览器可能限制这个行为：

self.addEventListener('push', (event) => {
  const payload = event.data?.json() || {};
  let activeNotification;

  const notificationOpts = {
    body: payload.notification.body,
    icon: '/assets/icon.png'
  };

  event.waitUntil(
    self.registration.showNotification(payload.notification.title, notificationOpts)
    .then(notification => {
      activeNotification = notification;
      // 5秒后自动关闭通知
      setTimeout(() => activeNotification.close(), 5000);
    })
  );
});

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