Angular集成Firebase推送通知点击跳转异常问题求助

问题核心原因 #

当应用处于后台未完全关闭状态时，FCM默认的fcmOptions.link只会激活应用，但无法触发Angular路由跳转——因为Service Worker运行在独立上下文，和Angular应用的路由环境不互通，相对路径也无法被正确解析。

方案一：修正FCM推送的link配置 #

直接使用完整的绝对URL替换相对路径，确保Service Worker能正确定位到目标路由：

修改发送通知的代码：

messaging()
    .send({
      notification: {
        title,
        body: message,
      },
      webpush: {
        notification: {
          icon:
            icon ??
            'https://storage.googleapis.com/mejora-continua-bucket/logoMejora.png',
        },
        fcmOptions: {
          // 使用完整绝对URL，而非相对路径
          link: 'https://mejora-continua-dot-mx-vianney-001.uc.r.appspot.com/admin-usuarios',
        },
      },
      token: to,
    })
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    });

方案二：手动监听notificationclick事件实现自定义跳转 #

如果需要更灵活的路由控制（比如应用激活时内部跳转而非打开新窗口），可以在Service Worker中手动处理通知点击事件：

步骤1：修改Service Worker代码添加事件监听 #

importScripts(
  "https://www.gstatic.com/firebasejs/9.9.4/firebase-app-compat.js"
);
importScripts(
  "https://www.gstatic.com/firebasejs/9.9.4/firebase-messaging-compat.js"
);

firebase.initializeApp({
  apiKey: "myapikey",
  authDomain: "myapp.firebaseapp.com",
  databaseURL: "https://myapp.firebaseio.com",
  projectId: "myprojectid",
  storageBucket: "mystorage",
  messagingSenderId: "messageid",
  appId: "appid",
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log("Received background message ", payload);
});

// 监听通知点击事件
self.addEventListener('notificationclick', (event) => {
  // 关闭通知弹窗
  event.notification.close();
  
  // 从推送payload的data字段读取目标路由（建议提前在发送时配置）
  const targetRoute = event.notification.data?.route || '/admin-usuarios';
  const fullUrl = `https://mejora-continua-dot-mx-vianney-001.uc.r.appspot.com${targetRoute}`;

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        // 查找已激活的应用窗口
        const activeClient = clientList.find(client => client.focused);
        
        if (activeClient) {
          // 给Angular应用发送跳转指令
          activeClient.postMessage({
            type: 'NOTIFICATION_ROUTE',
            route: targetRoute
          });
          return activeClient.focus();
        } else {
          // 应用未激活，直接打开目标URL
          return clients.openWindow(fullUrl);
        }
      })
  );
});

步骤2：在Angular应用中监听消息并处理路由跳转 #

在app.component.ts中添加消息监听，接收Service Worker的跳转指令：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    if ('serviceWorker' in navigator) {
      // 监听来自Service Worker的消息
      navigator.serviceWorker.addEventListener('message', (event) => {
        if (event.data.type === 'NOTIFICATION_ROUTE') {
          // 触发Angular内部路由跳转
          this.router.navigate([event.data.route]);
        }
      });
    }
  }
}

配套优化：推送时携带自定义路由信息 #

发送通知时，建议把路由信息放在data字段，方便Service Worker读取：

messaging()
    .send({
      notification: {
        title,
        body: message,
      },
      // 添加自定义路由数据
      data: {
        route: '/admin-usuarios'
      },
      webpush: {
        notification: {
          icon:
            icon ??
            'https://storage.googleapis.com/mejora-continua-bucket/logoMejora.png',
        },
      },
      token: to,
    })
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    });

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