0

使用 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"
}'

现在，我认为这不是最灵活的发送通知方式，但它让我可以快速上手。我现在的目标是，当在他们的设备上接收到特定推送通知时，能够将与（单击/按下）特定推送通知交互的用户发送到应用程序内的特定“状态”（特定 URL 的 web 视图）......我已经阅读了大部分文档，但我相信其中一些内容有点超出我的理解能力，以了解实现这一点所必需的内容（例如设置监听器等）。想知道是否有人可以帮助我简化实施？即使它有点“笨拙”，我对任何事情都持开放态度！

4

2 回答 2

1

您可以使用以下工具测试发送推送：https ://expo.dev/notifications 您可以看到一个数据（JSON）字段，您可以在其中通过推送发送一些附加信息（例如：{“id”：3 ，“idcustomer”：35，“事件”：“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();
于 2021-09-08T09:33:09.377 回答
0

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

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

  1. 确保您已安装/导入 API：
import * as Notifications from "expo-notifications";
  1. 设置参考以处理通知和通知响应/交互：
  const [expoPushToken, setExpoPushToken] = useState("");
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();
  1. 对于这个用例，我们希望能够修改 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}/>
  1. 使用下面显示的侦听器，可以从 Expo Push Notification API Snack/Example 中找到/复制。在这种情况下，如果最终用户与通知交互，无论应用程序是在前台、后台还是被终止，我希望操作是相同的：
    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);
      });
  1. 最后，在我们的 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

于 2022-02-10T18:37:35.110 回答