README.md 27 KB
Newer Older
Libin Lu's avatar
Libin Lu committed
1 2
[![Join the chat at https://gitter.im/evollu/react-native-fcm](https://badges.gitter.im/evollu/react-native-fcm.svg)](https://gitter.im/evollu/react-native-fcm?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

3
## NOTES:
Libin Lu's avatar
Libin Lu committed
4 5 6 7 8 9 10 11 12 13 14 15 16 17
[react-native-firebase](https://github.com/invertase/react-native-firebase/releases/tag/v4.0.0) has introduced new firebase messaging and remote/local notification features. It has good integration with other firebase features.  I would recommend new comers to check that.

Note that there are some advanced features still in progress 
- handle iOS remote notification when app is not running
- custom iOS notification actions 

### To existing react-native-fcm users
`react-native-firebase` can cover what `react-native-fcm` does so it is kind of a waste of effort to build the same wheels in parallel. Since I'm getting busier these days and feel challenging to maintain this repo every day while `react-native-firebase` has a larger team/company backing it, existing users may consider migrating to `react-native-firebase`.

I've created [an example project](https://github.com/evollu/react-native-fcm/tree/firebase/Examples/firebase-migration) using react-native-firebase as a migration reference

`react-native-fcm` will still take PRs and bug fixes, but possibly no new feature developement any more.


Libin Lu's avatar
Libin Lu committed
18 19

### Versions
Libin Lu's avatar
Libin Lu committed
20
- for iOS SDK < 4, use react-native-fcm@6.2.3 (v6.x is still compatible with Firebase SDK v4)
21 22 23
- for RN < 0.40.0, use react-native-fcm@2.5.6
- for RN < 0.33.0, use react-native-fcm@1.1.0
- for RN < 0.30.0, use react-native-fcm@1.0.15
Libin Lu's avatar
Libin Lu committed
24

Libin Lu's avatar
Libin Lu committed
25
### Example
26
- An example working project is available at: https://github.com/evollu/react-native-fcm/tree/master/Examples/simple-fcm-client
Libin Lu's avatar
Libin Lu committed
27

Libin Lu's avatar
Libin Lu committed
28
### Android 26
Libin Lu's avatar
Libin Lu committed
29 30
- DO NOT change Android targetSdkVersion >= 26. The notification won't show up because of notification channel requirement.
If you have to upgrade, you can use sdk-26 branch and post feedback on [here](https://github.com/evollu/react-native-fcm/pull/699)
Libin Lu's avatar
Libin Lu committed
31

Libin Lu's avatar
init  
Libin Lu committed
32 33 34
## Installation

- Run `npm install react-native-fcm --save`
Libin Lu's avatar
Libin Lu committed
35 36
- [Link libraries](https://facebook.github.io/react-native/docs/linking-libraries-ios.html)
  Note: the auto link doesn't work with xcworkspace so CocoaPods user needs to do manual linking
Libin Lu's avatar
Libin Lu committed
37
- You many need [this package for huawei phone](https://github.com/pgengoux/react-native-huawei-protected-apps)
Libin Lu's avatar
init  
Libin Lu committed
38

Libin Lu's avatar
Libin Lu committed
39 40 41 42
## Configure Firebase Console
### FCM config file

In [firebase console](https://console.firebase.google.com/), you can:
Sean Adkinson's avatar
Sean Adkinson committed
43
- for **Android**: download `google-services.json` file and place it in `android/app` directory
Libin Lu's avatar
Libin Lu committed
44 45 46 47 48
- for **iOS**: download `GoogleService-Info.plist` file and place it in `/ios/your-project-name` directory (next to your `Info.plist`)

Make sure you have certificates setup by following
https://firebase.google.com/docs/cloud-messaging/ios/certs

49
## Android Configuration
Libin Lu's avatar
init  
Libin Lu committed
50

Libin Lu's avatar
Libin Lu committed
51 52 53 54
- As `react-native link` sometimes has glitches, make sure you have this line added

https://github.com/evollu/react-native-fcm/blob/master/Examples/simple-fcm-client/android/app/src/main/java/com/google/firebase/quickstart/fcm/MainApplication.java#L28

55 56 57 58 59
- Edit `android/build.gradle`:
```diff
  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0'
+   classpath 'com.google.gms:google-services:3.0.0'
Libin Lu's avatar
init  
Libin Lu committed
60 61
```

Sagiv Ofek's avatar
Sagiv Ofek committed
62
- Edit `android/app/build.gradle`. Add at the bottom of the file:
63 64
```diff
  apply plugin: "com.android.application"
KazuyaKitahara's avatar
KazuyaKitahara committed
65
  ...
66
+ apply plugin: 'com.google.gms.google-services'
Libin Lu's avatar
init  
Libin Lu committed
67 68
```

69
- Edit `android/app/src/main/AndroidManifest.xml`:
Libin Lu's avatar
init  
Libin Lu committed
70

71 72 73 74 75
```diff
  <application
    ...
    android:theme="@style/AppTheme">

Libin Lu's avatar
Libin Lu committed
76 77
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>

Libin Lu's avatar
Libin Lu committed
78
+   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
79 80 81 82 83 84 85 86 87 88 89 90
+     <intent-filter>
+       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
+     </intent-filter>
+   </service>

+   <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
+     <intent-filter>
+       <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
+     </intent-filter>
+   </service>

    ...
Libin Lu's avatar
init  
Libin Lu committed
91
```
92

Libin Lu's avatar
Libin Lu committed
93 94 95
- Edit `{YOUR_MAIN_PROJECT}/app/build.gradle`:
```diff
 dependencies {
96
+    compile project(':react-native-fcm')
Libin Lu's avatar
Libin Lu committed
97
+    compile 'com.google.firebase:firebase-core:10.0.1' //this decides your firebase SDK version
Justyn's avatar
Justyn committed
98
+    compile 'com.google.firebase:firebase-messaging:10.0.1'
Libin Lu's avatar
Libin Lu committed
99 100 101 102 103
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
```
Ashish Chaudhary's avatar
Ashish Chaudhary committed
104
- Edit `android/settings.gradle`
105 106 107 108 109 110
```diff
  ...
+ include ':react-native-fcm'
+ project(':react-native-fcm').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fcm/android')
  include ':app'
```
Libin Lu's avatar
Libin Lu committed
111

Libin Lu's avatar
Libin Lu committed
112 113 114 115 116 117 118 119 120 121 122 123 124
- Edit `MainActivity.java`. This fixes [a bug](https://stackoverflow.com/questions/14853327/intent-not-restored-correctly-after-activity-is-killed-if-clear-top-and-single-t/18307360#18307360)
```diff
+ import android.content.Intent;
...
public class MainActivity extends ReactActivity {
+ @Override
+    public void onNewIntent(Intent intent) {
+        super.onNewIntent(intent);
+        setIntent(intent);
+    }
}
```

125
### Config for notification and `click_action` in Android
126 127 128 129 130 131 132 133 134 135 136 137 138

To allow android to respond to `click_action`, you need to define Activities and filter on specific intent. Since all javascript is running in MainActivity, you can have MainActivity to handle actions:

Edit `AndroidManifest.xml`:

```diff
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize"
+   android:launchMode="singleTop"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
139 140
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
141 142
    </intent-filter>
  </activity>
143
```
144 145

Notes:
Libin Lu's avatar
Libin Lu committed
146
- `launchMode="singleTop"` is to reuse MainActivity, you can use `singleTask` or `singleInstance` as well depend on your need. [this link explains the behavior well](https://blog.mindorks.com/android-activity-launchmode-explained-cbc6cf996802)
Libin Lu's avatar
Libin Lu committed
147
- you if want to handle `click_action` you need to add custom intent-filter, check native android documentation
148 149


150
If you are using RN < 0.30.0 and react-native-fcm < 1.0.16, pass intent into package, edit `MainActivity.java`:
151

Libin Lu's avatar
Libin Lu committed
152
- RN 0.28:
153 154 155 156 157 158 159 160 161 162 163 164 165 166

```diff
  import com.facebook.react.ReactActivity;
+ import android.content.Intent;

  public class MainActivity extends ReactActivity {

+   @Override
+   public void onNewIntent (Intent intent) {
+     super.onNewIntent(intent);
+       setIntent(intent);
+   }       
```

Libin Lu's avatar
Libin Lu committed
167
NOTE: Verify that react-native links correctly in `MainApplication.java`
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188

```diff
import android.app.application
...
+import com.evollu.react.fcm.FIRMessagingPackage;
```
....
```diff
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new VectorIconsPackage(),
+         new FIRMessagingPackage(),
          new RNDeviceInfo(),
      );
    }
 ```   



189 190 191 192 193 194 195 196 197 198 199 200 201
- RN <= 0.27:

```diff
  import com.facebook.react.ReactActivity;
+ import android.content.Intent;

  public class MainActivity extends ReactActivity {

+   @Override
+   protected void onNewIntent (Intent intent) {
+     super.onNewIntent(intent);
+       setIntent(intent);
+   }       
202
```
Libin Lu's avatar
init  
Libin Lu committed
203

204 205 206
Notes:
- `@Override` is added to update intent on notification click

207
## IOS Configuration
Libin Lu's avatar
init  
Libin Lu committed
208

Libin Lu's avatar
Libin Lu committed
209 210
### Pod approach:

211
Make sure you have [Cocoapods](https://cocoapods.org/) version > 1.0
212

213
Configure the project:
Libin Lu's avatar
Libin Lu committed
214 215
```
cd ios && pod init
216 217 218 219 220 221 222
```

(In case of syntax errors, `open YOURApp.xcodeproj/project.pbxproj` and fix them.)

Edit the newly created `Podfile`:
```diff
  # Pods for YOURAPP
Nick Sarafa's avatar
Nick Sarafa committed
223
+ pod 'Firebase/Messaging'
224 225 226 227 228
```

Install the `Firebase/Messaging` pod:
```
pod install
Libin Lu's avatar
Libin Lu committed
229
```
Libin Lu's avatar
Libin Lu committed
230
NOTE: you don't need to enable `use_frameworks!`. if you have to have `use_frameworks!` make sure you don't have `inherit! :search_paths`
Libin Lu's avatar
Libin Lu committed
231
NOTE: there is a working example in `master` branch
Libin Lu's avatar
init  
Libin Lu committed
232

Libin Lu's avatar
Libin Lu committed
233
### Non Cocoapod approach
234

Libin Lu's avatar
Libin Lu committed
235
1. Follow the instruction on [Integrate without CocoaPods](https://firebase.google.com/docs/ios/setup#frameworks).
Libin Lu's avatar
Libin Lu committed
236
- Import libraries, add Capabilities (background running and push notification), upload APNS and etc etc etc...
Libin Lu's avatar
Libin Lu committed
237 238 239
2. Put frameworks under `ios/Frameworks` folder, and drag those files into your xcode solution -> Frameworks
3. Put `firebase.h` and `module.modulemap` under `ios/Frameworks` folder, no need to drag into solution
4. Modify your project's `User Header Search Paths` and add `$(PROJECT_DIR)/Frameworks`
Libin Lu's avatar
Libin Lu committed
240 241
<img width="796" alt="screen shot 2018-03-05 at 2 17 03 pm" src="https://user-images.githubusercontent.com/9213224/36994792-263f05c4-2080-11e8-9d46-9b11ef49962a.png">
NOTE: There is a working example in `no-pod` branch
Libin Lu's avatar
Libin Lu committed
242 243

### Shared steps
Libin Lu's avatar
Libin Lu committed
244

Libin Lu's avatar
Libin Lu committed
245 246
Edit `AppDelegate.h`:
```diff
Libin Lu's avatar
Libin Lu committed
247 248
+ @import UserNotifications;
+
Libin Lu's avatar
Libin Lu committed
249 250 251
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>
```
Libin Lu's avatar
init  
Libin Lu committed
252

253 254 255 256 257 258 259 260 261
Edit `AppDelegate.m`:
```diff
+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
Libin Lu's avatar
Libin Lu committed
262
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
263 264 265

    return YES;
 }
Sean Adkinson's avatar
Sean Adkinson committed
266

Libin Lu's avatar
Libin Lu committed
267
+
Libin Lu's avatar
Libin Lu committed
268
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
Libin Lu's avatar
Libin Lu committed
269
+ {
Libin Lu's avatar
Libin Lu committed
270
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
271
+ }
Libin Lu's avatar
Libin Lu committed
272
+
Libin Lu's avatar
Libin Lu committed
273
+ #if defined(__IPHONE_11_0)
Libin Lu's avatar
Libin Lu committed
274
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
Libin Lu's avatar
Libin Lu committed
275
+ {
Libin Lu's avatar
Libin Lu committed
276
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
277
+ }
Libin Lu's avatar
Libin Lu committed
278 279 280 281 282 283
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
Libin Lu's avatar
Libin Lu committed
284
+
Libin Lu's avatar
Libin Lu committed
285
+ //You can skip this method if you don't want to use local notification
Libin Lu's avatar
Libin Lu committed
286
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
Libin Lu's avatar
Libin Lu committed
287
+   [RNFIRMessaging didReceiveLocalNotification:notification];
Libin Lu's avatar
Libin Lu committed
288
+ }
289
+
Libin Lu's avatar
Libin Lu committed
290
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
Libin Lu's avatar
Libin Lu committed
291
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
292 293
+ }
```
294

Libin Lu's avatar
Libin Lu committed
295
### Add Capabilities
296 297 298
- Select your project **Capabilities** and enable:
  - **Push Notifications**
  - *Background Modes* > **Remote notifications**.
299

Libin Lu's avatar
Libin Lu committed
300
### FirebaseAppDelegateProxyEnabled
Libin Lu's avatar
Libin Lu committed
301
This instruction assumes that you have FirebaseAppDelegateProxyEnabled=YES (default) so that Firebase will hook on push notification registration events. If you turn this flag off, you will be on your own to manage APNS tokens and link with Firebase token.
Libin Lu's avatar
Libin Lu committed
302

Libin Lu's avatar
Libin Lu committed
303
## Setup Local Notifications
Libin Lu's avatar
Libin Lu committed
304
NOTE: local notification does NOT have any dependency on FCM library but you still need to include Firebase to compile. If there are enough demand to use this functionality alone, I will separate it out into another repo
Libin Lu's avatar
Libin Lu committed
305

Libin Lu's avatar
Libin Lu committed
306
### IOS
Libin Lu's avatar
Libin Lu committed
307
No change required
308

Libin Lu's avatar
Libin Lu committed
309
### Android
Libin Lu's avatar
Libin Lu committed
310 311 312 313 314
Edit AndroidManifest.xml
```diff
  <uses-permission android:name="android.permission.INTERNET" />
+ <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
+ <uses-permission android:name="android.permission.VIBRATE" />
315

Anmol Wassan's avatar
Anmol Wassan committed
316
  <application>
Libin Lu's avatar
Libin Lu committed
317 318 319 320 321 322 323 324 325 326
+      <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
+      <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
+          <intent-filter>
+              <action android:name="android.intent.action.BOOT_COMPLETED"/>
+              <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
+              <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
+              <category android:name="android.intent.category.DEFAULT" />
+          </intent-filter>
+      </receiver>
  </application>
327
```
Libin Lu's avatar
Libin Lu committed
328 329
NOTE: `com.evollu.react.fcm.FIRLocalMessagingPublisher` is required for presenting local notifications. `com.evollu.react.fcm.FIRSystemBootEventReceiver` is required only if you need to schedule future or recurring local notifications

Libin Lu's avatar
init  
Libin Lu committed
330

Libin Lu's avatar
Libin Lu committed
331
## Usage
Libin Lu's avatar
Libin Lu committed
332
[Check example project](https://github.com/evollu/react-native-fcm/blob/master/Examples/simple-fcm-client/app/App.js#L68)
Libin Lu's avatar
init  
Libin Lu committed
333 334


Lucas Bento's avatar
Lucas Bento committed
335
### Build custom push notification for Android
Libin Lu's avatar
Libin Lu committed
336 337
Firebase android misses important feature of android notification like `group`, `priority` and etc. As a work around you can send data message (no `notification` payload at all) and this repo will build a local notification for you. If you pass `custom_notification` in the payload, the repo will treat the content as a local notification config and shows immediately.

Libin Lu's avatar
Libin Lu committed
338
NOTE: By using this work around, you will have to send different types of payload for iOS and Android devices because **custom_notification isn't supported on iOS**
Libin Lu's avatar
Libin Lu committed
339 340

WARNING: `custom_notification` **cannot** be used together with `notification` attribute. use `data` **ALONE**
Libin Lu's avatar
Libin Lu committed
341 342 343 344 345 346 347 348

Example of payload that is sent to FCM server:
```
{
  "to":"FCM_TOKEN",
  "data": {
    "type":"MEASURE_CHANGE",
    "custom_notification": {
Libin Lu's avatar
Libin Lu committed
349
      "body": "test body",
Libin Lu's avatar
Libin Lu committed
350 351 352 353 354
      "title": "test title",
      "color":"#00ACD4",
      "priority":"high",
      "icon":"ic_notif",
      "group": "GROUP",
Libin Lu's avatar
Libin Lu committed
355 356
      "id": "id",
      "show_in_foreground": true
Libin Lu's avatar
Libin Lu committed
357 358 359 360 361
    }
  }
}
```

Libin Lu's avatar
Libin Lu committed
362 363 364
Example of payload that is sent through firebase console:
<img width="753" alt="screen shot 2018-04-04 at 1 18 09 pm" src="https://user-images.githubusercontent.com/9213224/38323255-bbbfdd66-380a-11e8-95c2-bf32ced959b8.png">

Libin Lu's avatar
Libin Lu committed
365 366
Check local notification guide below for configuration.

Sean Adkinson's avatar
Sean Adkinson committed
367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386
**IMPORTANT**: When using the `admin.messaging` API, you need to `JSON.stringify` the `custom_notification` value:

```
let tokens = [...];
let payload = {
  data: {
    custom_notification: JSON.stringify({
      body: 'Message body',
      title: 'Message title'
      ...
    })
  }
};
let options = { priority: "high" };

admin
  .messaging()
  .sendToDevice(tokens, payload, options);
```

387
### Behaviour when sending `notification` and `data` payload through GCM
Libin Lu's avatar
Libin Lu committed
388
- When user clicks notification to **launch** the application, you can get that notification by calling `FCM.getInitialNotification`. (NOTE: reloading javascript or resuming from background won't change the value)
Libin Lu's avatar
Libin Lu committed
389

Libin Lu's avatar
Libin Lu committed
390 391 392 393 394
- When app is running in background (the tricky one, I strongly suggest you try it out yourself)
 - IOS will receive notificaton from `FCMNotificationReceived` event
    * if you pass `content_available` flag true, you will receive one when app is in background and another one when user resume the app. [more info](http://www.rahuljiresal.com/2015/03/retract-push-notifications-on-ios/)
    * if you just pass `notification`, you will only receive one when user resume the app.
    * you will not see banner if `notification->body` is not defined.
395
 - Android will receive notificaton from `FCMNotificationReceived` event
Naisheel Verdhan's avatar
Naisheel Verdhan committed
396
    * if you pass `notification` payload, it will receive data when user click on notification
397 398 399 400 401
    * if you pass `data` payload only, it will receive data when in background

   e.g. fcm payload looks like:

   ```json
Libin Lu's avatar
Libin Lu committed
402 403 404 405 406 407 408 409 410 411 412 413 414
   {
      "to":"some_device_token",
      "content_available": true,
      "notification": {
          "title": "hello",
          "body": "yo",
          "click_action": "fcm.ACTION.HELLO"
      },
      "data": {
          "extra":"juice"
      }
    }
    ```
415 416

    and event callback will receive as:
417

418 419 420 421
    - Android
      ```json
      {
        "fcm": {"action": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
422
        "opened_from_tray": 1,
423 424 425
        "extra": "juice"
      }
      ```
426

427 428 429 430
    - iOS
      ```json
      {
        "apns": {"action_category": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
431
        "opened_from_tray": 1,
432 433 434
        "extra": "juice"
      }
      ```
435

Libin Lu's avatar
Libin Lu committed
436
- When app is running in foreground
Naisheel Verdhan's avatar
Naisheel Verdhan committed
437
 - IOS will receive notification and android **won't** (better not to do anything in foreground for hybrid and send a separate data message.)
438

Naisheel Verdhan's avatar
Naisheel Verdhan committed
439
NOTE: it is recommended not to rely on `data` payload for click_action as it can be overwritten (check [this](http://stackoverflow.com/questions/33738848/handle-multiple-notifications-with-gcm)).
440

441 442 443 444 445
### Quick notes about upstream messages
If your app server implements the [XMPP Connection Server](https://firebase.google.com/docs/cloud-messaging/server#implementing-the-xmpp-connection-server-protocol) protocol, it can receive upstream messages from a user's device to the cloud. To initiate an upstream message, call the `FCM.send()` method with your Firebase `Sender ID` and a `Data Object` as parameters as follows:

```javascript
FCM.send('984XXXXXXXXX', {
446
  my_custom_data_1: 'my_custom_field_value_1',
447 448 449 450 451 452
  my_custom_data_2: 'my_custom_field_value_2'
});
```

The `Data Object` is message data comprising as many key-value pairs of the message's payload as are needed (ensure that the value of each pair in the data object is a `string`). Your `Sender ID` is a unique numerical value generated when you created your Firebase project, it is available in the `Cloud Messaging` tab of the Firebase console `Settings` pane. The sender ID is used to identify each app server that can send messages to the client app.

453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472
### Sending remote notifications with category on iOS
If you want to send notification which will have actions as you defined in app it's important to correctly set it's `category` (`click_action`) property. It's also good to set `"content-available" : 1` so app will gets enough time to handle actions in background.

So the fcm payload should look like this:
```javascript
{
   "to": "some_device_token",
   "content_available": true,
   "notification": {
       "title": "Alarm",
       "subtitle": "First Alarm",
       "body": "First Alarm",
       "click_action": "com.myapp.MyCategory" // The id of notification category which you defined with FCM.setNotificationCategories
   },
   "data": {
       "extra": "juice"
   }
 }
 ```

Libin Lu's avatar
init  
Libin Lu committed
473
## Q & A
474

Libin Lu's avatar
Libin Lu committed
475 476 477 478 479 480
#### Why do you build another local notification
Yes there are `react-native-push-notification` and `react-native-system-notification` which are great libraries. However
- We want a unified local notification library but people are reporting using react-native-push-notification with this repo has compatibility issue as `react-native-push-notification` also sets up GCM.
- We want to have local notification to have similar syntax as remote notification payload.
- The PushNotificationIOS by react native team is still missing features that recurring, so we are adding it here

481
#### My Android build is failing
delvedor's avatar
delvedor committed
482
Try update your SDK and google play service.
Libin Lu's avatar
Libin Lu committed
483
If you are having multiple plugins requiring different version of play-service sdk, skip conflicting group. The example project shows for how to colive with react-native-maps
Libin Lu's avatar
Libin Lu committed
484
```
Libin Lu's avatar
Libin Lu committed
485 486
    compile(project(':react-native-maps')) {
        exclude group: 'com.google.android.gms', module: 'play-services-base'
Libin Lu's avatar
Libin Lu committed
487 488
    }
```
489

Libin Lu's avatar
Libin Lu committed
490 491
#### My App throws FCM function undefined error
There seems to be link issue with rnpm. Make sure that there is `new FIRMessagingPackage(),` in your `Application.java` file
Libin Lu's avatar
Libin Lu committed
492

Libin Lu's avatar
Libin Lu committed
493 494
#### I can't get notification in iOS emulator
Remote notification can't reach iOS emulator since it can't fetch APNS token. Use real device.
495

Libin Lu's avatar
Libin Lu committed
496 497 498 499
#### I'm not getting notfication when app is in background
1. Make sure you've uploaded APNS certificates to Firebase and test with Firebase's native example to make sure certs are correct
2. Try simple payload first, sometimes notification doesn't show up because of empty body, wrong sound name etc.

Libin Lu's avatar
Libin Lu committed
500
#### App running in background doesn't trigger `FCMNotificationReceived` when receiving hybrid notification [Android]
501
These is [an issue opened for that](https://github.com/google/gcm/issues/63). Behavior is not consistent between 2 platforms
502

Libin Lu's avatar
Libin Lu committed
503
#### Android notification is showing a white icon
504 505
Since Lollipop, the push notification icon is required to be all white, otherwise it will be a white circle.

Libin Lu's avatar
Libin Lu committed
506 507 508
#### iOS not receiving notification when the app running in the background
- Try adding Background Modes permission in Xcode->Click on project file->Capabilities tab->Background Modes->Remote Notifications

509 510 511 512 513 514 515
#### I am using Proguard
You need to add this to your `android/app/proguard-rules.pro`:
```
# Google Play Services
-keep class com.google.android.gms.** { *; }
-dontwarn com.google.android.gms.**
```
Libin Lu's avatar
init  
Libin Lu committed
516

Libin Lu's avatar
Libin Lu committed
517 518 519
#### I'm getting `com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/internal/zzqf;`
It is most likely that you are using other react-native-modules that requires conflicting google play service
search for `compile "com.google.android.gms` in android and see who specifies specific version. Resolve conflict by loosing their version or specify a version resolve in gradle.
Libin Lu's avatar
Libin Lu committed
520
Check this article https://medium.com/@suchydan/how-to-solve-google-play-services-version-collision-in-gradle-dependencies-ef086ae5c75f#.9l0u84y9t
Libin Lu's avatar
Libin Lu committed
521

Libin Lu's avatar
Libin Lu committed
522
#### How do I tell if user clicks the notification banner?
Naisheel Verdhan's avatar
Naisheel Verdhan committed
523
Check open from tray flag in notification. It will be either 0 or 1 for iOS and undefined or 1 for android. I decide for iOS based on [this](http://stackoverflow.com/questions/20569201/remote-notification-method-called-twice), and for android I set it if notification is triggered by intent change.
Libin Lu's avatar
Libin Lu committed
524

Libin Lu's avatar
Libin Lu committed
525
#### Android notification doesn't vibrate/show head-up display etc
526
All available features are [here](https://firebase.google.com/docs/cloud-messaging/http-server-ref#notification-payload-support). FCM may add more support in the future but there is no timeline.
Libin Lu's avatar
Libin Lu committed
527
In the mean time, you can pass "custom_notification" in a data message. This repo will show a local notification for you so you can set priority etc
Libin Lu's avatar
Libin Lu committed
528

Libin Lu's avatar
Libin Lu committed
529 530 531
#### How do I do xxx with FCM?
check out [official docs and see if they support](https://firebase.google.com/docs/cloud-messaging/concept-options)

Libin Lu's avatar
Libin Lu committed
532
#### I want to add advanced feature that FCM doesn't support for remote notification
Libin Lu's avatar
Libin Lu committed
533
You can either wait for FCM to develop it or you have to write native code to create notifications.
Libin Lu's avatar
Libin Lu committed
534 535
- for iOS, you can do it in `didReceiveRemoteNotification` in `appDelegate.m`
- for android, you can do it by implementing a service similar to "com.evollu.react.fcm.MessagingService"
Libin Lu's avatar
Libin Lu committed
536

Libin Lu's avatar
Libin Lu committed
537 538
Or if you have a good way to wake up react native javascript thread please let me know, although I'm worring waking up the whole application is too expensive.

Libin Lu's avatar
Libin Lu committed
539 540 541 542 543 544 545 546 547 548 549 550
#### What about new notifications in iOS 10
Congratulations, now you have 5 notification handler to register!
in sum
- `willPresentNotification` is introduced in iOS 10 and will only be called when local/remote notification will show up. This allows you to run some code **before** notification shows up. You can also decide how to show the notification.
- `didReceiveNotificationResponse` is introduced in iOS 10 and provides user's response together with local/remote notification. It could be swipe, text input etc.
- `didReceiveLocalNotification` is for iOS 9 and below. Triggered when user clicks local notification. replaced by `didReceiveNotificationResponse`
- `didReceiveRemoteNotification` is for iOS 9 and below. Triggered when remote notification received.
- `didReceiveRemoteNotification:fetchCompletionHandler` is for both iOS 9 and 10. it gets triggered 2 times for each remote notification. 1st time when notification is received. 2nd time when notification is clicked. in iOS 9, it serves us the purpose of both `willPresentNotification` and `didReceiveNotificationResponse` but for remote notification only. in iOS 10, you don't need it in most of the case unless you need to do background fetching

Great, how do I configure for FCM?
It is up to you! FCM is just a bridging library that passes notification into javascript world. You can define your own NSDictionary and pass it into notification.

Libin Lu's avatar
Libin Lu committed
551
#### I want to show notification when app is in foreground
Libin Lu's avatar
Libin Lu committed
552
Use `show_in_foreground` attribute to tell app to show banner even if the app is in foreground.
Libin Lu's avatar
Libin Lu committed
553

Libin Lu's avatar
Libin Lu committed
554
NOTE: this flag doesn't work for Android push notification, use `custom_notification` to achieve this.
Libin Lu's avatar
Libin Lu committed
555

Libin Lu's avatar
Libin Lu committed
556 557
NOTE: foreground notification is not available on iOS 9 and below

Libin Lu's avatar
Libin Lu committed
558 559 560
#### Do I need to handle APNS token registration?
No. Method swizzling in Firebase Cloud Messaging handles this unless you turn that off. Then you are on your own to implement the handling. Check this link https://firebase.google.com/docs/cloud-messaging/ios/client

Libin Lu's avatar
Libin Lu committed
561 562 563
#### I want to add actions in iOS notification
Check this https://github.com/evollu/react-native-fcm/issues/325

Libin Lu's avatar
Libin Lu committed
564 565 566
#### React/RCTBridgeModule.h not found
This is mostly caused by React Native upgrade. Here is a fix http://stackoverflow.com/questions/41477241/react-native-xcode-upgrade-and-now-rctconvert-h-not-found

567 568
#### Some features are missing
Issues and pull requests are welcome. Let's make this thing better!
569

Libin Lu's avatar
Libin Lu committed
570
#### Credits
Libin Lu's avatar
Libin Lu committed
571
Local notification implementation is inspired by react-native-push-notification by zo0r
Noitidart's avatar
Noitidart committed
572

delvedor's avatar
delvedor committed
573 574 575 576 577 578
#### I get the notifications in the logs, but the native prompt does not show up
Did you remember to ask the user permissions? ;)
```js
await FCM.requestPermissions({ badge: false, sound: true, alert: true })
```

Noitidart's avatar
Noitidart committed
579
## Sending remote notification
Noitidart's avatar
Noitidart committed
580 581 582 583

How to send a push notification from your server? You should `POST` to this endpoint:

    https://fcm.googleapis.com/fcm/send
delvedor's avatar
delvedor committed
584

Noitidart's avatar
Noitidart committed
585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628
You need to set the headers of `Content-Type` to `application/json` and `Authorization` to `key=******` where you replace `******` with the "Legacy server key" from here the Firebase dashbaord. Get this information by first going to:

1. https://console.firebase.google.com/
2. Click on "Gear" icon and click "Project Settingss". Screenshot: https://screenshotscdn.firefoxusercontent.com/images/35b93de8-44e1-49af-89d7-140b74c267c7.png
3. Click on "Cloud Message" tab and find "Legacy server key" here. Screenshot: https://screenshotscdn.firefoxusercontent.com/images/c52ec383-783d-47d3-a1e6-75249fb6f3fb.png

The body should be json like this:

```
{
  "to":"FCM_DEVICE_TOKEN_GOES_HERE",
  "data": {
    "custom_notification": {
      "body": "test body",
      "title": "test title",
      "color":"#00ACD4",
      "priority":"high",
      "icon":"ic_launcher",
      "group": "GROUP",
      "sound": "default",
      "id": "id",
      "show_in_foreground": true
    }
  }
}
```

Example:

```
fetch('https://fcm.googleapis.com/fcm/send', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
        'Authorization': 'key=EFefklefwef9efwefkejfwf'
    },
    body: JSON.stringify({
        "to":"kajfsdf:efawefwe_fsdfdsf-asfawefwefwf_asdfsdfasd-asdfasdfsd9A_asdfsdf_asdf",
        "data": {
            "custom_notification": {
            "body": "test body",
            "title": "test title",
            "color":"#00ACD4",
            "priority":"high",
Noitidart's avatar
Noitidart committed
629
            "icon":"ic_notif",
Noitidart's avatar
Noitidart committed
630 631 632 633 634 635 636 637 638
            "group": "GROUP",
            "sound": "default",
            "id": "id",
            "show_in_foreground": true
            }
        }
    })
})
```