React Native VoIP Push Notification
React Native VoIP Push Notification - Currently iOS >= 8.0 only
Motivation
Since iOS 8.0 there is an execellent feature called VoIP Push Notification (PushKit), while in React Native only the traditional push notification is supported which limits the possibilities of building a VoIP app with React Native (like me!).
To understand the benefits of Voip Push Notification, please see VoIP Best Practices.
Note 1: Not sure if Android support this sort of stuff since I'm neither an iOS nor Android expert, from my limited understanding that GCM's sending high priority push notification might be the case. Correct me if I'm wrong!
Note 2 This module is inspired by PushNotificationIOS and React Native Push Notification
Version
If you're using React Native >= 0.40, make sure to use react-native-voip-push-notification >= 1.1.0
Installation
npm install --save react-native-voip-push-notification
iOS
The iOS version should be >= 8.0 since we are using PushKit.
Enable VoIP Push Notification and Get VoIP Certificate
Please refer to VoIP Best Practices.
Note: Do NOT follow the Configure VoIP Push Notification
part from the above link, use the instruction below instead.
AppDelegate.m Modification
...
#import <PushKit/PushKit.h> /* <------ add this line */
#import "RNVoipPushNotificationManager.h" /* <------ add this line */
...
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
/* Add PushKit delegate method */
// Handle updated push credentials
- (void)pushRegistry:(PKPushRegistry *)registry didUpdatePushCredentials:(PKPushCredentials *)credentials forType:(NSString *)type {
// Register VoIP push token (a property of PKPushCredentials) with server
[RNVoipPushNotificationManager didUpdatePushCredentials:credentials forType:(NSString *)type];
}
// Handle incoming pushes
- (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(NSString *)type {
// Process the received push
[RNVoipPushNotificationManager didReceiveIncomingPushWithPayload:payload forType:(NSString *)type];
}
...
@end
Add PushKit Framework
- In your Xcode project, select
Build Phases
-->Link Binary With Libraries
- Add
PushKit.framework
Add RNVoipPushNotification
rnpm
Option 1: Usernpm link react-native-voip-push-notification
Note: If you're using rnpm link make sure the Header Search Paths
is recursive
. (In step 3 of manually linking)
Option 2: Manually
- Drag
node_modules/react-native-voip-push-notification/ios/RNVoipPushNotification.xcodeproj
under<your_xcode_project>/Libraries
- Select
<your_xcode_project>
-->Build Phases
-->Link Binary With Libraries
- Drag
Libraries/RNVoipPushNotification.xcodeproj/Products/libRNVoipPushNotification.a
toLink Binary With Libraries
- Select
<your_xcode_project>
-->Build Settings
- In
Header Search Paths
, add$(SRCROOT)/../node_modules/react-native-voip-push-notification/ios/RNVoipPushNotification
withrecursive
Usage
...
import VoipPushNotification from 'react-native-voip-push-notification';
...
class MyComponent extends React.Component {
...
componentWillMount() { // or anywhere which is most comfortable and appropriate for you
VoipPushNotification.requestPermissions(); // required
VoipPushNotification.addEventListener('register', (token) => {
// send token to your apn provider server
});
VoipPushNotification.addEventListener('notification', (notification) => {
// register your VoIP client, show local notification, etc.
// e.g.
this.doRegister();
/* there is a boolean constant exported by this module called
*
* wakeupByPush
*
* you can use this constant to distinguish the app is launched
* by VoIP push notification or not
*
* e.g.
*/
if (VoipPushNotification.wakeupByPush) {
// do something...
// remember to set this static variable to false
// since the constant are exported only at initialization time
// and it will keep the same in the whole app
VoipPushNotification.wakeupByPush = false;
}
/**
* Local Notification Payload
*
* - `alertBody` : The message displayed in the notification alert.
* - `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view";
* - `soundName` : The sound played when the notification is fired (optional).
* - `category` : The category of this notification, required for actionable notifications (optional).
* - `userInfo` : An optional object containing additional notification data.
*/
VoipPushNotification.presentLocalNotification({
alertBody: "hello! " + notification.getMessage()
});
});
}
...
}
Contributing
Any pull request, issue report and suggestion are highly welcome!
License
ISC License (functionality equivalent to MIT License)