Expo Push Notifications Service/API - 如何在使用 Push Notification 后将匿名用户定向到应用程序中的特定 webview 屏幕

Question

使用 Expo 推送通知服务，我目前向所有匿名用户发送推送通知。我收集并写入 Firebase 数据库的唯一数据是“ExponentPushToken”，它标识一个使用 expo 服务发送通知的唯一设备。我一直在使用以下命令在终端中发送推送通知：

curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
  "to": [
    "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
    "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]"
  ],
  "title": "Hello World!",
  "body": "Example text here!!",
  "sound": "default"
}'

现在，我认为这不是发送通知的最灵活方式，但它让我能够快速落地运行。我现在的目标是，能够将在设备上接收到特定推送通知（click/press 上）的用户发送到特定“状态”（特定 URL 的网络视图）该应用程序...我已经通读了大部分文档，但我相信有些内容超出了我解释实现此目标所需条件的能力（例如设置 Listener 等）。想知道是否有人可以帮助我简化实施过程？即使它有点“笨拙”，我对任何事情都持开放态度！

Answer 1

您可以使用以下工具测试发送推送：https://expo.dev/notifications 您可以看到一个数据 (JSON) 字段，您可以在其中通过推送发送一些附加信息（例如：{"id": 3, "idcustomer": 35, "event": "foo"}

当您将此推送发送到已注册的令牌时，应用会捕获事件：

notificationListener.current = 
    Notifications.addNotificationReceivedListener(notification => {

        console.log("Foreground notification", notification)
        // setNotification(notification);  // Set state

    });

    // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
        console.log("Interaction done", response);
    });

我习惯于在前台收到推送时显示 Snackbar (RN Paper Snackbar) 以进行额外的交互。使用 {notification}，您可以显示内容、导航或您想对这些数据执行的任何其他操作。

别忘了包括：

import * as Notifications from 'expo-notifications';
const notificationListener = useRef();
const responseListener = useRef();

Answer 2

@AleMux 的回答将我推向了正确的方向，但为了具体起见，这里是如何实现问题中提出的预期结果的。

使用 Expo 的推送通知 API，您需要确保拥有适当的监听器，这些监听器已在其 API Snack/Example（https://docs.expo.dev/versions/latest/sdk/notifications/#api).为简单起见，这是我们需要关注此功能的地方：

确保你有 API installed/imported:

import * as Notifications from "expo-notifications";

处理通知和通知的设置参考responses/interactions:

  const [expoPushToken, setExpoPushToken] = useState("");
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

对于此用例，我们希望能够修改 WebView uri。查看下面的当前工作方式，了解上下文。下面的代码假定您安装了必要的依赖项（即 WebView）：

  const [page, setPage] = useState("");
  const [baseURI] = useState("https://www.google.com");
//---A bunch of your app code will presumably be here as to what your app will render, but we'll focus in on the specific needs for this WebView---//
<WebView source={{uri: `${baseURI}/${page}`}} ref={webviewRef}/>

使用如下所示的侦听器，可以是来自 Expo Push Notification API Snack/Example 的 found/copied。在这种情况下，如果 end-user 与应用程序处于前台、后台或被杀死的通知交互，我希望操作相同：

    notificationListener.current =
      Notifications.addNotificationReceivedListener((notification) => {
        setNotification(notification);
        const onInteraction = notification.request.content.data.event;
        setPage(onInteraction);
      });

    responseListener.current =
      Notifications.addNotificationResponseReceivedListener((response) => {
        console.log(response);
        const onInteraction = response.notification.request.content.data.event;
        setPage(onInteraction);
      });

最后，在我们的 HTTP POST 请求中（在这种情况下使用 CURL），我们希望传递一个带有 JSON 对象的“数据”字段，上面的侦听器可以对其进行操作。上面提到的位置是关于侦听器可以在哪里收集对象的。 notification.request.content.data.event。在这种情况下，CURL HTTP POST 请求看起来像这样 setPage 的 webview 到页面 baseURI 域内的页面，该页面由通过上面发送给侦听器的信息确定位于 post 请求的“数据”字段中的信息。上面引用的位置 data.event 引用了这样发送的对象 "data": {"event": "insert page info here"}。这是完整 CURL 命令的一个工作示例：

curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
  "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "title": "You have new mail messages!",
  "body": "Check them out here in the app by interacting with this notification.",
  "sound": "default",
  "data": {"event": "mail"}
}'

当最终用户与推送通知交互（即按下徽章）时，应用程序将打开并且 webview 将呈现 ${baseURI}/${page}，在这种情况下，将是 https://www.google.com/mail

Expo Push Notifications Service/API - 如何在使用 Push Notification 后将匿名用户定向到应用程序中的特定 webview 屏幕

Expo Push Notifications Service/API - How to directi anonymous user to specific webview screen in app after engaging with Push Notification

ios

react-native

expo

expo-notifications