如何在Ionic 5(React)+Capacitor中通过推送通知跳转指定应用路由？

好问题！你其实完全不需要通用链接或者配套网站就能实现这个需求——因为你是在应用内部的推送通知处理逻辑里跳转路由（包括应用被通知唤醒的情况），这属于纯粹的应用内导航逻辑，用Capacitor的推送通知API加上React Router就能搞定，甚至连@capacitor/deeplinks插件都不一定非要用（不过如果之后需要处理外部唤醒应用的场景，这个插件也能派上用场，但你的核心需求不需要）。

1. 核心思路 #

在推送通知的payload中携带目标路由信息（比如/my-movies/123），然后在推送通知的监听事件里，利用Ionic React的React Router导航工具（useHistory或useNavigate）直接跳转到指定路由，同时加入认证校验逻辑即可。

2. 具体实现步骤 #

步骤1：确保推送通知基础功能正常 #

你已经实现了推送通知的接收处理，这一步可以跳过，只需要记得在推送payload中加入路由字段（比如data.route）。

步骤2：在推送通知监听中处理路由跳转 #

根据应用的运行状态（前台、后台、已杀死），需要处理两个推送事件：

• pushNotificationReceived：应用在前台时收到通知
• pushNotificationActionPerformed：应用在后台/被杀死时，用户点击通知唤醒应用

以下是完整的代码示例（基于Ionic 5 React + React Router 5）：

import { useEffect } from 'react';
import { PushNotifications } from '@capacitor/push-notifications';
import { useHistory } from 'react-router-dom';
import { checkAuthStatus } from '../path-to-your-auth-utils'; // 替换成你的认证检查函数

const App = () => {
  const history = useHistory();

  useEffect(() => {
    // 处理应用前台收到通知的情况
    const foregroundListener = PushNotifications.addListener(
      'pushNotificationReceived',
      async (notification) => {
        const targetRoute = notification.data?.route;
        if (targetRoute) {
          handleRouteNavigation(targetRoute);
        }
      }
    );

    // 处理应用后台/被杀死时，用户点击通知唤醒应用的情况
    const actionListener = PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (action) => {
        const targetRoute = action.notification.data?.route;
        if (targetRoute) {
          handleRouteNavigation(targetRoute);
        }
      }
    );

    // 清理监听器
    return () => {
      foregroundListener.remove();
      actionListener.remove();
    };
  }, [history]);

  // 统一处理路由跳转+认证校验
  const handleRouteNavigation = (targetRoute: string) => {
    const isAuthenticated = checkAuthStatus();
    if (isAuthenticated) {
      // 已认证，直接跳转目标路由
      history.push(targetRoute);
    } else {
      // 未认证，先跳转到登录页，携带重定向参数
      history.push(`/login?redirect=${encodeURIComponent(targetRoute)}`);
    }
  };

  return <IonApp>{/* 你的应用页面结构 */}</IonApp>;
};

export default App;

步骤3：发送测试推送时携带路由参数 #

在推送服务（比如Firebase Cloud Messaging）的payload中，通过data字段传入目标路由：

{
  "notification": {
    "title": "新电影更新",
    "body": "点击查看《XXX》详情"
  },
  "data": {
    "route": "/my-movies/123"
  },
  "to": "你的设备FCM令牌"
}

3. 关于@capacitor/deeplinks插件的补充 #

如果之后你需要支持从外部应用/浏览器链接唤醒应用并跳转指定路由（比如用户点击短信里的链接打开应用到电影详情页），才需要用到@capacitor/deeplinks插件，此时只需要配置自定义URI Scheme（不需要配套网站）：

• iOS：在Info.plist中添加CFBundleURLSchemes

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>myapp</string> <!-- 自定义的URI Scheme，比如myapp:// -->
      </array>
    </dict>
  </array>
  

• Android：在AndroidManifest.xml的<activity>标签内添加intent-filter

  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" /> <!-- 对应自定义的URI Scheme -->
  </intent-filter>
  

配置后，用户点击myapp://my-movies/123就能唤醒应用并跳转到指定路由，此时可以用@capacitor/deeplinks的监听器来处理：

import { Deeplinks } from '@capacitor/deeplinks';

Deeplinks.addListener('deepLinkOpen', async (data) => {
  const path = data.url.replace('myapp://', ''); // 得到/my-movies/123
  handleRouteNavigation(path);
});

但回到你的原始需求，完全不需要这一步，只用推送通知监听+React Router导航就足够了。

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