react-native：推送通知+解析答案

【问题标题】：react-native: push notifications + parsereact-native：推送通知+解析
【发布时间】：2015-06-23 09:23:00
【问题描述】：

我目前正在开发一个小型应用项目，以学习和尝试 iOS 上的 react-native。我对 parse (parse.com) 有一些经验，并且很想将 parse 集成到新的应用程序中。目前，我没有任何问题，包括将 js 解析为 react-native。我可以使用帐户等登录。现在我需要向一定数量的用户（不是所有用户）发送推送通知。

我不明白推送通知应该如何与 react-native 和解析一起使用。通常，我会使用用户 ID 连接设备安装，然后向一定数量的用户发送推送（这意味着具有相应安装的设备）。 react-native 指南 (https://facebook.github.io/react-native/docs/pushnotificationios.html#content) 没有提到类似的内容。即使它提供了解析指南作为参考，我也看不出我应该如何通过解析发送推送。该指南也留下了很多信息。这些“听众”订阅什么来源？我将从哪个服务器发送通知等？

据我了解，解析 js 无法读取当前安装。我也犹豫是否将 Parse iOS 添加到项目中。这感觉不自然，不应该是必须做的事情，尽管它可以让我阅读当前的安装。（但仍然解析 js 无法注册该安装以订阅推送通知）。

此时，我感到有些失落。这条信息 (https://news.ycombinator.com/item?id=9271687) 告诉我它应该以某种方式成为可能。我只是不知道怎么做:(

希望有人可以帮助我。一些建议将不胜感激。

【问题讨论】：

我是按照本指南完成的 link
非常感谢您的回复。本指南的 javascript 部分告诉我，它主要用于发送推送，但不能接收推送（这可以由 react-native 处理）或订阅设备来推送。由于我想最小化项目中的 objc 和 swift 代码，这似乎并不能解决我的问题。（注意：我之前都是用 swift 完成的，现在的挑战是转向 react-native）
@MrMuetze 运气好吗？你让它工作了吗？如果是，请分享如何？
@Nachiket 嗨。我们目前正在尝试以下操作： 1. 通过 react-native 请求权限 2. 从 objc 中的 didregisterforremotenotificationswithdevicetoken() 检索设备令牌，然后通过 react-native 桥将其发送到解析 js 3. 然后我们要使用 REST-用于创建安装和订阅推送通道的 API 这可以工作，但我们无法尝试，因为我和我的朋友最近几天都很忙。我们真的觉得这很麻烦，我们希望 parse 正在开发一个更简单的解决方案。我们目前将整个主题作为一种解决方法来处理。

标签： ios parse-platform notifications push react-native

【解决方案1】：

我对 Parse + react-native 组合进行了一些调查，并让它发挥作用。

您必须将 Parse SDK（按照指南）添加到您的项目中，并链接所有必要的库。

不要忘记添加第 5 点的步骤：https://parse.com/tutorials/ios-push-notifications。

然后将 RCTPushNotificationManager.h + m（来自 react-native/Libraries）添加到您的项目中。之后，在 AppDelegate.m 中添加以下内容：

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
[[NSNotificationCenter defaultCenter] postNotificationName:@"RemoteNotificationReceived"
                                                    object:self
                                                  userInfo:userInfo];
}

应该可以的。

【讨论】：

如果我错了，请纠正我，但在这种情况下，您没有将用户分配给设备安装，是吗？

【解决方案2】：

编辑：react-native 现在默认实现此行为。有趣的部分是注册事件的事件监听器，它现在返回设备令牌。现在程序非常简单。只需看看docs 还可以查看 JWindey 的答案。其中有一些非常重要的点是实际触发事件所必需的。

经过一段时间和大量尝试，我们今天想出了一个答案。这是我们的解决方案，看起来效果不错。

我们使用以下资源：

反应原生
解析-js
解析 Rest API
react-native-remote-push (https://github.com/darylrowland/react-native-remote-push)

按照推送通知的解析指南 (https://parse.com/tutorials/ios-push-notifications) 并正确设置所有内容（配置文件、证书等）。稍后使用 react-native-remote-push 组件，您不必按照步骤 5 和 6。

现在将 react-native-remote-push 添加到您的项目中。我们不得不对代码进行一些小的调整（主要是处理遗留的 objC 代码），但这可能取决于您自己的项目。

我们的项目有某种“起始页”，每次打开应用程序时都会显示。在此页面上，我们处理推送通知权限以及设备令牌的注册和推送通知的侦听器。我们的目标是模仿使用 parse iOS SDK 接收到的相同行为。

我们需要先注册设备并订阅推送频道。 react-native-remote-push 允许我们处理权限并接收设备令牌。然后，我们继续使用此设备令牌通过 Rest API 注册此安装。此代码是我们的 componentDidMount() 调用的一部分。

var PushManager = require('./RemotePushIOS');
var registerInstallation = require('./Installation');

componentDidMount() {
    PushManager.requestPermissions(function(err, data) {
        if (err) {
            console.log("Could not register for push");
        } else {
            registerInstallation({
                "deviceType": "ios",
                "deviceToken": data.token,
                "channels": ["global"]
            });
         }
    });

    PushManager.setListenerForNotifications(this.receiveRemoteNotification);
}

PushManager 是 react-native-remote-push 的必需组件，而 registerInstallation 是包含 Rest API 调用的函数。

/**
* registers an installation
* data should look like the following:
* {
*  "deviceType": "ios", // or "android"
*  // if android is targeted set
*  // "pushType": "gcm",
*  // "GCMSenderId": "56712320625545", // whatever the later means
*  "deviceToken": "29e32a686fd09d053e1616cb48",
*  "channels": [
*       ""
*   ]
* };
* for more information visit:
* https://www.parse.com/docs/rest#installations-uploading
*/
var registerInstallation = function(data) {
    var url = "https://api.parse.com";
    url += "/1/installations";
    fetch(url, {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'X-Parse-Application-Id': PARSE_APP_ID,
            'X-Parse-REST-API-Key': PARSE_REST_KEY,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(processStatus)
    .then(parseJson)
    .catch(error);
};

module.exports = registerInstallation;

“processStatus”、“parseJson”和“error”只是一些处理API调用结果的小函数。如有必要，我可以提供更多详细信息。这个功能允许我们通过“数据”对象添加很多信息，例如用户 ID、应用程序版本、解析版本等，就像您在 iOS SDK 中使用的一样。我们现在只有一个基本示例，但在此基础上应该很容易扩展。这一步对我们来说非常重要，因为我们需要将每次安装都与特定用户相关联。

您现在应该可以收到推送通知了。您可以在充当侦听器的“receiveRemoteNotification”函数中处理它们。 react-native-remote-push 组件的网站提供了一个基本功能。

我希望我能分享一些关于这个话题的见解。如果我应该更详细地介绍某些部分，我很乐意添加更多信息。

【讨论】：

非常感谢！这对我有用，虽然我使用了 PushNotificationIOS，但你的代码非常有用:-)
我用了你的答案，它正在工作。但是我有重置徽章编号的问题。我遵循 Parse ios sdk 并在 - (void)applicationDidBecomeActive:(UIApplication *)application {... 中添加了徽章重置代码，但它不像解释的那样工作。你有什么建议吗？
抱歉，我还没有查看徽章编号。目前无法为您提供帮助。
各个文档中完全缺少使用 Parse REST API 的“registerInstallation”步骤——谢谢，这非常有用。需要明确的是，您不想使用 Parse iOS SDK 没有具体的技术原因吗？换句话说，走那条路在理论上也应该行得通吧？
没有技术原因，但我们希望在 javascript 环境中保留尽可能多的代码（因为我猜这就是 react-native 的全部内容），Parse iOS SDK 应该可以正常工作，但是请记住，如果您打算更广泛地使用它，则 parse 将在一年内关闭

【解决方案3】：

官方PushNotificationIOS有register事件，我们可以从中获取token。因此，有了@MrMuetze 的 REST API，我可以将设备安装到 Parse。

PushNotificationIOS.addEventListener('register', function(token){
 registerInstallation({
   "deviceType": "ios",
   "deviceToken": token,
   "channels": ["global"]
 })
});

【讨论】：