Ionic+Angular+Capacitor iOS端Firebase动态链接无法传递至前端

方案一：利用Capacitor App插件原生事件处理（推荐） #

Capacitor自带的App插件提供了appUrlOpen事件，只要iOS端将动态链接正确传递给Capacitor桥接，前端就能直接监听并处理路由。

1. 前端监听事件（app.component.ts） #

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

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

  ngOnInit() {
    // 监听App打开URL事件
    App.addListener('appUrlOpen', (data) => {
      const targetUrl = data.url;
      // 解析动态链接并跳转对应路由
      if (targetUrl.includes('/product-detail')) {
        const parsedUrl = new URL(targetUrl);
        const productId = parsedUrl.searchParams.get('id');
        this.router.navigate(['/product-detail', productId]);
      }
      // 可扩展其他路由逻辑
    });
  }
}

2. iOS端修改AppDelegate.swift传递链接 #

确保将Firebase动态链接的目标URL传递给Capacitor的桥接处理，覆盖open url和continue userActivity两个方法：

import UIKit
import Capacitor
import FirebaseDynamicLinks

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        let capacitorConfig = CapacitorConfig()
        BridgeDelegate.shared.initialize(with: capacitorConfig, window: window)
        return true
    }

    // 处理自定义Scheme唤起的链接
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        if let dynamicLink = DynamicLinks.dynamicLinks().dynamicLink(fromCustomSchemeURL: url), let linkUrl = dynamicLink.url {
            return BridgeDelegate.shared.handleOpenUrl(url: linkUrl, options: options)
        }
        return BridgeDelegate.shared.handleOpenUrl(url: url, options: options)
    }

    // 处理Universal Links唤起的链接
    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        if let incomingURL = userActivity.webpageURL {
            DynamicLinks.dynamicLinks().handleUniversalLink(incomingURL) { dynamicLink, error in
                guard error == nil, let dynamicLink = dynamicLink, let linkUrl = dynamicLink.url else { return }
                BridgeDelegate.shared.handleOpenUrl(url: linkUrl, options: [:])
            }
            return BridgeDelegate.shared.handleContinueUserActivity(userActivity, restorationHandler: restorationHandler)
        }
        return false
    }
}

方案二：自定义Capacitor插件传递通知（备选） #

如果坚持用NotificationCenter，需要通过Capacitor插件桥接原生通知到前端：

1. iOS端创建自定义插件 #

新建DynamicLinkPlugin.swift文件：

import Capacitor

@objc(DynamicLinkPlugin)
public class DynamicLinkPlugin: CAPPlugin {
    override public func load() {
        // 监听原生通知
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleDynamicLink),
            name: NSNotification.Name("DynamicLinkReceived"),
            object: nil
        )
    }

    @objc func handleDynamicLink(_ notification: NSNotification) {
        if let urlStr = notification.object as? String {
            // 通知前端
            notifyListeners("dynamicLinkReceived", data: ["url": urlStr])
        }
    }
}

2. AppDelegate.swift中发送通知 #

// 在处理动态链接的位置添加
if let dynamicLink = DynamicLinks.dynamicLinks().dynamicLink(fromCustomSchemeURL: url), let linkUrl = dynamicLink.url {
    DispatchQueue.main.async {
        NotificationCenter.default.post(
            name: NSNotification.Name("DynamicLinkReceived"),
            object: linkUrl.absoluteString
        )
    }
}

3. 前端注册并监听插件事件 #

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

const DynamicLinkPlugin = registerPlugin('DynamicLinkPlugin');

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

  ngOnInit() {
    DynamicLinkPlugin.addListener('dynamicLinkReceived', (data: {url: string}) => {
      this.router.navigateByUrl(data.url);
    });
  }
}

额外检查项 #

• 确认capacitor.config.ts中配置了正确的URL Scheme和Universal Links：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app.id',
  appName: 'YourApp',
  webDir: 'www',
  urlScheme: 'your-app-scheme', // 对应Firebase动态链接的自定义Scheme
  server: {
    hostname: 'your-dynamic-link-domain.page.link' // 对应Firebase动态链接的域名
  }
};

export default config;

• 确保iOS端已正确配置Firebase动态链接的关联域名（在Info.plist和苹果开发者后台）。

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