Skip to content

Commit 876c280

Browse files
committed
Added readme for iOS.
1 parent 9468e29 commit 876c280

26 files changed

+307
-2
lines changed

README.md

Lines changed: 307 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,15 @@ It also assumes you have Visual Studio 2015 installed ([Visual Studio Community]
4242

4343
## iOS
4444

45-
Coming soon.
45+
The documentation that follows assumes you have generated a React Native iOS project using the `react-native-cli`, i.e.:
46+
47+
```
48+
react-native init myapp
49+
```
50+
51+
In addition to the standard React Native requirements, you will also need the following:
52+
* An iOS 8 (or later version)-capable device (simulator doesn't work with push notifications)
53+
* [Apple Developer Program](https://developer.apple.com/programs/) membership
4654

4755
# Getting Started
4856

@@ -215,7 +223,174 @@ namespace ...
215223

216224
## iOS Installation
217225

218-
Coming soon.
226+
### Generate the Certificate Signing Request file
227+
228+
* On your Mac, run the Keychain Access tool. It can be opened from the **Utilities** folder or the **Other** folder on the launch pad.
229+
230+
* Click **Keychain Access**, expand **Certificate Assistant**, then click **Request a Certificate from a Certificate Authority...**.
231+
232+
![RequestCertificate](./img/RequestCertificate.png)
233+
234+
* Select your **User Email Address** and **Common Name** , make sure that **Saved to disk** is selected, and then click **Continue**. Leave the **CA Email Address** field blank as it is not required.
235+
236+
![CertificateInfo](./img/CertificateInfo.png)
237+
238+
* Type a name for the Certificate Signing Request (CSR) file in **Save As**, select the location in **Where**, then click **Save**.
239+
240+
![SaveCertificate](./img/SaveCertificate.png)
241+
242+
### Register your app for push notifications
243+
244+
* If you have not already registered your app, navigate to the [iOS Provisioning Portal](http://go.microsoft.com/fwlink/p/?LinkId=272456) at the Apple Developer Center, log on with your Apple ID, click **Identifiers**, then click **App IDs**, and finally click on the **+** sign to register a new app.
245+
246+
![RegisterAppId](./img/RegisterAppId.png)
247+
248+
* Update the following three fields for your new app and then click **Continue**:
249+
250+
* **Name**: Type a descriptive name for your app in the **Name** field in the **App ID Description** section.
251+
252+
* **Bundle Identifier**: Under the **Explicit App ID** section, enter a **Bundle Identifier** in the form `<Organization Identifier>.<Product Name>` as mentioned in the [App Distribution Guide](https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/AppDistributionGuide/ConfiguringYourApp/ConfiguringYourApp.html#//apple_ref/doc/uid/TP40012582-CH28-SW8). The *Organization Identifier* and *Product Name* you use must match the organization identifier and product name you will use when you create your XCode project. In the screeshot below *NotificationHubs* is used as a organization idenitifier and *GetStarted* is used as the product name. Making sure this matches the values you will use in your XCode project will allow you to use the correct publishing profile with XCode.
253+
254+
* **Push Notifications**: Check the **Push Notifications** option in the **App Services** section, .
255+
256+
![CheckPushNotification](./img/CheckPushNotification.png)
257+
258+
* This generates your App ID and requests you to confirm the information. Click **Register** to confirm the new App ID.
259+
260+
* Once you click **Register**, you will see the **Registration complete** screen, as shown below. Click **Done**.
261+
262+
![RegistrationComplete](./img/RegistrationComplete.png)
263+
264+
* In the Developer Center, under App IDs, locate the app ID that you just created, and click on its row.
265+
266+
![NavigateAppIDs](./img/NavigateAppIDs.png)
267+
268+
* Clicking on the app ID will display the app details. Click the **Edit** button at the bottom.
269+
270+
* Scroll to the bottom of the screen, and click the **Create Certificate...** button under the section **Development Push SSL Certificate**.
271+
272+
![CreateAPNSCertificate](./img/CreateAPNSCertificate.png)
273+
274+
* Click **Choose File**, browse to the location where you saved the CSR file that you created in the first task, then click **Generate**.
275+
276+
![GenerateAPNSCertificate](./img/GenerateAPNSCertificate.png)
277+
278+
* After the certificate is created by the portal, click the **Download** button, and click **Done**.
279+
280+
![DownloadAPNSCertificate](./img/DownloadAPNSCertificate.png)
281+
282+
* Double-click the downloaded push certificate **aps_development.cer**.
283+
284+
![ImportAPNSCertificate](./img/ImportAPNSCertificate.png)
285+
286+
* In Keychain Access, right-click the new push certificate that you created in the **Certificates** category. Click **Export**, name the file, select the **.p12** format, and then click **Save**.
287+
288+
![ExportP12Certificate](./img/ExportP12Certificate.png)
289+
290+
### Create a provisioning profile for the app
291+
292+
* Back in the <a href="http://go.microsoft.com/fwlink/p/?LinkId=272456" target="_blank">iOS Provisioning Portal</a>, select **Provisioning Profiles**, select **All**, and then click the **+** button to create a new profile. This launches the **Add iOS Provisioning Profile** Wizard
293+
294+
![AddIOSProvisioningProfile](./img/AddIOSProvisioningProfile.png)
295+
296+
* Select **iOS App Development** under **Development** as the provisiong profile type, and click **Continue**.
297+
298+
* Next, select the app ID you just created from the **App ID** drop-down list, and click **Continue**
299+
300+
![SelectCreatedAppId](./img/SelectCreatedAppId.png)
301+
302+
* In the **Select certificates** screen, select your usual development certificate used for code signing, and click **Continue**. This is not the push certificate you just created.
303+
304+
![SelectIOSDevelopmentCertificate](./img/SelectIOSDevelopmentCertificate.png)
305+
306+
* Next, select the **Devices** to use for testing, and click **Continue**
307+
308+
![SelectIOSDevices](./img/SelectIOSDevices.png)
309+
310+
* Finally, pick a name for the profile in **Profile Name**, click **Generate**.
311+
312+
![GenerateProfileName](./img/GenerateProfileName.png)
313+
314+
* When the new provisioning profile is created click to download it and install it on your Xcode development machine. Then click **Done**.
315+
316+
![DownloadProvisioningProfile](./img/DownloadProvisioningProfile.png)
317+
318+
### Configure your Notification Hub for iOS push notifications
319+
320+
* Back on the [Azure Portal](https://portal.azure.com) page for your notification hub, select **Settings > Notification Services > Apple (APNS)**. Click on **Upload Certificate** and select the **.p12** file that you exported earlier. Make sure you also specify the correct password.
321+
322+
* Make sure to select **Sandbox** mode since this is for development. Only use the **Production** if you want to send push notifications to users who purchased your app from the store.
323+
324+
![AzureNotificationHubAPNSConfig](./img/AzureNotificationHubAPNSConfig.png)
325+
326+
### Connect your iOS app to Notification Hubs
327+
328+
* Make sure to use the same **Product Name** and **Organization Identifier** that you used when you previously set the bundle ID on the Apple Developer portal, i.e.:
329+
330+
* Product Name: *myapp*
331+
* Organization Identifier: *org.reactjs.native.example*
332+
333+
* Remember to set **Provisioning Profile** to the provisioning profile that you created previously.
334+
335+
![SetProvisioningProfile](./img/SetProvisioningProfile.png)
336+
337+
* Drag **node_modules/react-native-azurenotificationhub/ios/RCTAzureNotificationHubManager.xcodeproj** and **node_modules/react-native-azurenotificationhub/ios/WindowsAzureMessaging.xcodeproj** to your project on Xcode (usually under the Libraries group on Xcode).
338+
339+
![AddLibsIOS](./img/AddLibsIOS.png)
340+
341+
* Click on your main project file (the one that represents the **.xcodeproj**), select **Build Phases** and drag the static libraries from the **Products** folder inside the libraries you are importing to **Link Binary With Libraries**
342+
343+
![LinkLibsIOS](./img/LinkLibsIOS.png)
344+
345+
* Add **$(SRCROOT)/../node_modules/react-native-azurenotificationhub/ios** to **Header Search Paths** and select **recursive**
346+
347+
![IncludeHeaderIOS](./img/IncludeHeaderIOS.png)
348+
349+
* To enable support for notification and register events you need to augment your AppDelegate. At the top of your **AppDelegate.m**:
350+
351+
```objective-c
352+
#import "RCTAzureNotificationHubManager.h"
353+
```
354+
355+
* And then add the following code in the same file:
356+
357+
```objective-c
358+
// Required to register for notifications
359+
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
360+
{
361+
[RCTAzureNotificationHubManager didRegisterUserNotificationSettings:notificationSettings];
362+
}
363+
364+
// Required for the register event.
365+
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
366+
{
367+
[RCTAzureNotificationHubManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
368+
}
369+
370+
// Required for the registrationError event.
371+
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
372+
{
373+
[RCTAzureNotificationHubManager didFailToRegisterForRemoteNotificationsWithError:error];
374+
}
375+
376+
// Required for the notification event.
377+
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
378+
{
379+
[RCTAzureNotificationHubManager didReceiveRemoteNotification:notification];
380+
}
381+
382+
// Required for the localNotification event.
383+
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
384+
{
385+
[RCTAzureNotificationHubManager didReceiveLocalNotification:notification];
386+
}
387+
```
388+
389+
### XCode 8 changes
390+
391+
With XCode 8, the entitlements are set from your local entitlements file rather than from the provisioning profile you created on the Apple Developer Portal. The entitlements will now need to be added to your Xcode build under Capabilities in addition to in your provisioning profile.
392+
393+
![XCode8Change](./img/XCode8Change.png)
219394

220395
## JavaScript Configuration
221396

@@ -225,6 +400,8 @@ On the [Azure Portal](https://portal.azure.com) page for your notification hub,
225400

226401
The example below shows how you can register and unregister from Azure Notification Hub in your React component.
227402

403+
### Android / Windows
404+
228405
```js
229406
const NotificationHub = require('react-native-azurenotificationhub');
230407

@@ -266,6 +443,134 @@ class myapp extends Component {
266443
}
267444
```
268445
446+
### iOS
447+
448+
```js
449+
const NotificationHub = require('react-native-azurenotificationhub/index.ios');
450+
451+
const connectionString = '...'; // The Notification Hub connection string
452+
const hubName = '...'; // The Notification Hub name
453+
const senderID = '...'; // The Sender ID from the Cloud Messaging tab of the Firebase console
454+
const tags = [ ... ]; // The set of tags to subscribe to
455+
456+
var remoteNotificationsDeviceToken = ''; // The device token registered with APNS
457+
458+
class myapp extends Component {
459+
requestPermissions() {
460+
NotificationHub.addEventListener('register', this._onRegistered);
461+
NotificationHub.addEventListener('registrationError', this._onRegistrationError);
462+
NotificationHub.addEventListener('registerAzureNotificationHub', this._onAzureNotificationHubRegistered);
463+
NotificationHub.addEventListener('azureNotificationHubRegistrationError', this._onAzureNotificationHubRegistrationError);
464+
NotificationHub.addEventListener('notification', this._onRemoteNotification);
465+
NotificationHub.addEventListener('localNotification', this._onLocalNotification);
466+
467+
NotificationHub.requestPermissions();
468+
}
469+
470+
register() {
471+
NotificationHub.register(remoteNotificationsDeviceToken, {connectionString, hubName, senderID, tags});
472+
}
473+
474+
unregister() {
475+
NotificationHub.unregister();
476+
}
477+
478+
render() {
479+
return (
480+
<View style={styles.container}>
481+
<TouchableOpacity onPress={this.requestPermissions.bind(this)}>
482+
<View style={styles.button}>
483+
<Text style={styles.buttonText}>
484+
Request permission
485+
</Text>
486+
</View>
487+
</TouchableOpacity>
488+
<TouchableOpacity onPress={this.register.bind(this)}>
489+
<View style={styles.button}>
490+
<Text style={styles.buttonText}>
491+
Register
492+
</Text>
493+
</View>
494+
</TouchableOpacity>
495+
<TouchableOpacity onPress={this.unregister.bind(this)}>
496+
<View style={styles.button}>
497+
<Text style={styles.buttonText}>
498+
Unregister
499+
</Text>
500+
</View>
501+
</TouchableOpacity>
502+
</View>
503+
);
504+
}
505+
506+
_onRegistered(deviceToken) {
507+
remoteNotificationsDeviceToken = deviceToken;
508+
AlertIOS.alert(
509+
'Registered For Remote Push',
510+
`Device Token: ${deviceToken}`,
511+
[{
512+
text: 'Dismiss',
513+
onPress: null,
514+
}]
515+
);
516+
}
517+
518+
_onRegistrationError(error) {
519+
AlertIOS.alert(
520+
'Failed To Register For Remote Push',
521+
`Error (${error.code}): ${error.message}`,
522+
[{
523+
text: 'Dismiss',
524+
onPress: null,
525+
}]
526+
);
527+
}
528+
529+
_onRemoteNotification(notification) {
530+
AlertIOS.alert(
531+
'Push Notification Received',
532+
'Alert message: ' + notification.getMessage(),
533+
[{
534+
text: 'Dismiss',
535+
onPress: null,
536+
}]
537+
);
538+
}
539+
540+
_onAzureNotificationHubRegistered(registrationInfo) {
541+
AlertIOS.alert('Registered For Azure notification hub',
542+
'Registered For Azure notification hub'
543+
[{
544+
text: 'Dismiss',
545+
onPress: null,
546+
}]
547+
);
548+
}
549+
550+
_onAzureNotificationHubRegistrationError(error) {
551+
AlertIOS.alert(
552+
'Failed To Register For Azure Notification Hub',
553+
`Error (${error.code}): ${error.message}`,
554+
[{
555+
text: 'Dismiss',
556+
onPress: null,
557+
}]
558+
);
559+
}
560+
561+
_onLocalNotification(notification){
562+
AlertIOS.alert(
563+
'Local Notification Received',
564+
'Alert message: ' + notification.getMessage(),
565+
[{
566+
text: 'Dismiss',
567+
onPress: null,
568+
}]
569+
);
570+
}
571+
}
572+
```
573+
269574
## Publishing Notifications
270575
271576
Coming soon.

img/AddIOSProvisioningProfile.png

61.3 KB
Loading

img/AddLibsIOS.png

103 KB
Loading

img/ApsEntitlements.png

42.6 KB
Loading
31 KB
Loading

img/CertificateInfo.png

92 KB
Loading

img/CheckPushNotification.png

497 KB
Loading

img/CreateAPNSCertificate.png

564 KB
Loading

img/DownloadAPNSCertificate.png

267 KB
Loading

img/DownloadProvisioningProfile.png

119 KB
Loading

0 commit comments

Comments
 (0)