且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

react-native:推送通知+解析

更新时间:2023-02-26 21:14:09

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

EDIT: react-native implements this behavior by default now. The interesting part is the event listener for the register event which now returns the device token. Procedure is pretty straight forward now. Just have a look at the docs Also check out the answer by JWindey. Has some very important points in them that are needed to actually trigger the events.

经过一段时间和大量的尝试,我们来了今天回答。这是我们的解决方案,似乎工作得很好。

After a while and a lot of trying things out, we came up with an answer today. This is our solution and it seems to be working pretty good.

我们使用以下资源:

  • react-native
  • parse-js
  • Parse 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进行操作。

Follow the parse guide for push notifications (https://parse.com/tutorials/ios-push-notifications) and get everything set up correctly (profiles, certificates etc.). Using the react-native-remote-push component later on, you don't have to follow the steps 5 and 6.

现在添加react-native-remote-push你的项目。我们不得不对代码做一些小的调整(主要是处理遗留的objC代码),但这可能取决于你自己的项目。

Now add react-native-remote-push to you project. We had to make some minor adjustments to the code (mainly dealing with legacy objC code), but that may depend on your own project.

我们的项目有某种每个应用程序打开时显示的起始页面。在此页面上,我们处理推送通知权限以及设备令牌的注册和推送通知的监听器。我们的目标是模仿我们使用解析iOS SDK获得的相同行为。

Our project has some kind of "starting page" that is shown every time the app is opened. On this page, we deal with push notification permissions as well as with the registration of the device token and the listener for push notifications. Our goal is to mimic the same behavior that we would receive with the parse iOS SDK.

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

We need to register the device and subscribe to a push channel first. react-native-remote-push allows us to handle the permissions and receive a device token. We then proceed to use this device token to register this installation via the Rest API. This code is part of our componentDidMount() call.

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调用的函数。

PushManager is the required component from react-native-remote-push and registerInstallation is the function containing the Rest API call.

/**
* 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一样。我们现在只有一个基本的示例,但在此基础上应该很容易扩展。这一步对我们来说非常重要,因为我们需要将每个安装与特定用户相关联。

"processStatus", "parseJson" and "error" are just some small functions that handle the result of the API call. I can provide more details if necessary. This function allows us to add a lot of information via the "data" object, such as userid, app version, parse version etc., just as you're used to from the iOS SDK. We only have a basic example working right now, but it should be easy to extend on this basis. This step was very important for us, because we need to associate every installation with a certain user.

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

You should be able to receive push notifications by now. You can handle them in a "receiveRemoteNotification" function that acts as a listener. A basic function is provided on the website of the react-native-remote-push component.

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

I hope I could share some insight about this topic. If I should go into more detail on certain parts, I'll gladly add some more information.