README.md 31.2 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)

Libin Lu's avatar
Libin Lu committed
3 4
## Deprecated
I'm not longer able to maintain this repo.
Libin Lu's avatar
Libin Lu committed
5

Libin Lu's avatar
Libin Lu committed
6
[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.
Libin Lu's avatar
Libin Lu committed
7 8

### To existing react-native-fcm users
Libin Lu's avatar
Libin Lu committed
9 10
`react-native-firebase` now can do what `react-native-fcm` can so it is a waste of effort to build the same thing in parallel. 

Libin Lu's avatar
Libin Lu committed
11
Since I'm getting busier these days and start feeling 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`.
Libin Lu's avatar
Libin Lu committed
12 13 14 15 16 17

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
- after v16.0.0, Android target SDK has be to >= 26 and build tool has to be >= 26.0.x
Libin Lu's avatar
Libin Lu committed
21
- for iOS SDK < 4, use react-native-fcm@6.2.3 (v6.x is still compatible with Firebase SDK v4)
22 23 24
- 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
25

Libin Lu's avatar
Libin Lu committed
26
### Example
27
- 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
28

Libin Lu's avatar
init  
Libin Lu committed
29 30 31
## Installation

- Run `npm install react-native-fcm --save`
Libin Lu's avatar
Libin Lu committed
32 33
- [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
34
- 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
35

Libin Lu's avatar
Libin Lu committed
36 37 38 39
## Configure Firebase Console
### FCM config file

In [firebase console](https://console.firebase.google.com/), you can:
Windham Wong's avatar
Windham Wong committed
40
- for **Android**: download `google-services.json` file and place it in `android/app` directory.
Libin Lu's avatar
Libin Lu committed
41 42 43 44 45
- 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

Windham Wong's avatar
Windham Wong committed
46 47
---

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

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

Windham Wong's avatar
Windham Wong committed
52 53 54
### Edit `android/build.gradle`:

**NOTE:** The followed line may not be up-to-dated. Please refer to https://firebase.google.com/docs/android/setup
Libin Lu's avatar
Libin Lu committed
55

Libin Lu's avatar
init  
Libin Lu committed
56
```
Windham Wong's avatar
Windham Wong committed
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
buildscript {
    repositories {
        // ...
        google() // Google's Maven repository
    }
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.0.2' // google-services plugin
    }
}

allprojects {
    // ...
    repositories {
        // ...
        google() // Google's Maven repository
    }
}
```

### Edit `android/app/build.gradle`:

**NOTE:** Please refer to https://firebase.google.com/docs/android/setup
Libin Lu's avatar
init  
Libin Lu committed
81 82

```
Windham Wong's avatar
Windham Wong committed
83 84 85
dependencies {
    // ...
    compile project(':react-native-fcm')
Libin Lu's avatar
init  
Libin Lu committed
86

Windham Wong's avatar
Windham Wong committed
87
    // ...
Windham Wong's avatar
Windham Wong committed
88 89 90 91
    
    // Automatically selecting the latest available version
    implementation 'com.google.firebase:firebase-core'
    implementation 'com.google.firebase:firebase-messaging'
Windham Wong's avatar
Windham Wong committed
92 93 94 95 96 97 98 99
}

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
```

### Edit `android/app/src/main/AndroidManifest.xml`:

Windham Wong's avatar
Windham Wong committed
100
**NOTE:** The resource `@mipmap/ic_notif` is referring to `android/app/src/res/mipmap-<resolution>/` folder. Feel free to change the filename if you have a customised icon for notification.
Libin Lu's avatar
init  
Libin Lu committed
101

102 103 104 105 106
```diff
  <application
    ...
    android:theme="@style/AppTheme">

Libin Lu's avatar
Libin Lu committed
107
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>
Libin Lu's avatar
Libin Lu committed
108
+    <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="my_default_channel"/>
Libin Lu's avatar
Libin Lu committed
109

Libin Lu's avatar
Libin Lu committed
110
+   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
111 112 113 114 115 116 117 118 119 120 121 122
+     <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
123
```
124

Windham Wong's avatar
Windham Wong committed
125
### Edit `android/app/build.gradle`:
Libin Lu's avatar
Libin Lu committed
126

Windham Wong's avatar
Windham Wong committed
127
**NOTE:** after v16.0.0, Android target SDK has be to >= 26 and build tool has to be >= 26.0.x
Libin Lu's avatar
Libin Lu committed
128

Windham Wong's avatar
Windham Wong committed
129
**NOTE:** Make sure the version matches this library.
Libin Lu's avatar
Libin Lu committed
130

Libin Lu's avatar
Libin Lu committed
131
```diff
Libin Lu's avatar
Libin Lu committed
132 133 134 135 136 137 138 139 140 141 142 143 144 145
+ compileSdkVersion 27
+    buildToolsVersion "27.0.3"

    defaultConfig {
        applicationId "com.google.firebase.quickstart.fcm"
        minSdkVersion 16
+        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

Libin Lu's avatar
Libin Lu committed
146
 dependencies {
147
+    compile project(':react-native-fcm')
Libin Lu's avatar
Libin Lu committed
148 149 150
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
Libin Lu's avatar
Libin Lu committed
151 152 153
 
 //bottom
 + apply plugin: "com.google.gms.google-services"
Libin Lu's avatar
Libin Lu committed
154
```
Libin Lu's avatar
Libin Lu committed
155 156
If you are using other firebase libraries, check this for solving dependency conflicts https://github.com/evollu/react-native-fcm/blob/master/Examples/simple-fcm-client/android/app/build.gradle#L133

Windham Wong's avatar
Windham Wong committed
157
### Edit `android/settings.gradle`
158 159 160 161 162 163
```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
164

Libin Lu's avatar
Libin Lu committed
165 166 167 168 169 170 171 172 173 174 175 176 177
- 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);
+    }
}
```

Windham Wong's avatar
Windham Wong committed
178 179 180 181
### Make sure in `MainApplication.java` you have the code below:

**NOTE:** The packages listed inside should appear once only. `react-native link` sometimes can mess up this part, please remove duplicated packeges.

Libin Lu's avatar
Libin Lu committed
182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
```diff
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new MapsPackage(),
+           new FIRMessagingPackage()
      );
    }

+ @Override
+  public void onCreate() { // <-- Check this block exists
+    super.onCreate();
+    SoLoader.init(this, /* native exopackage */ false); // <-- Check this line exists within the block
+  }
```

199
### Config for notification and `click_action` in Android
200 201 202 203 204 205 206 207 208 209 210 211 212

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>
213 214
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
215 216
    </intent-filter>
  </activity>
217
```
218 219

Notes:
Libin Lu's avatar
Libin Lu committed
220
- `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
221
- you if want to handle `click_action` you need to add custom intent-filter, check native android documentation
222 223


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

Libin Lu's avatar
Libin Lu committed
226
- RN 0.28:
227 228 229 230 231 232 233 234 235 236 237 238 239 240

```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
241
NOTE: Verify that react-native links correctly in `MainApplication.java`
242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262

```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(),
      );
    }
 ```   



263 264 265 266 267 268 269 270 271 272 273 274 275
- 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);
+   }       
276
```
Libin Lu's avatar
init  
Libin Lu committed
277

278 279 280
Notes:
- `@Override` is added to update intent on notification click

281
## IOS Configuration
Libin Lu's avatar
init  
Libin Lu committed
282

Libin Lu's avatar
Libin Lu committed
283 284
### Pod approach:

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

287
Configure the project:
Libin Lu's avatar
Libin Lu committed
288 289
```
cd ios && pod init
290 291 292 293 294 295 296
```

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

Edit the newly created `Podfile`:
```diff
  # Pods for YOURAPP
Windham Wong's avatar
Windham Wong committed
297
+ pod 'Firebase'
Nick Sarafa's avatar
Nick Sarafa committed
298
+ pod 'Firebase/Messaging'
299 300 301 302 303
```

Install the `Firebase/Messaging` pod:
```
pod install
Libin Lu's avatar
Libin Lu committed
304
```
Libin Lu's avatar
Libin Lu committed
305
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`
Windham Wong's avatar
Windham Wong committed
306

Libin Lu's avatar
Libin Lu committed
307
NOTE: there is a working example in `master` branch
Windham Wong's avatar
Windham Wong committed
308

Windham Wong's avatar
Windham Wong committed
309
NOTE: If you don't put `pod 'Firebase'` into `Podfile`, compilation will fail with error of missing Firebase library.
Libin Lu's avatar
init  
Libin Lu committed
310

Libin Lu's avatar
Libin Lu committed
311
### Non Cocoapod approach
312

Libin Lu's avatar
Libin Lu committed
313
1. Follow the instruction on [Integrate without CocoaPods](https://firebase.google.com/docs/ios/setup#frameworks).
Libin Lu's avatar
Libin Lu committed
314
- Import libraries, add Capabilities (background running and push notification), upload APNS and etc etc etc...
Libin Lu's avatar
Libin Lu committed
315 316 317
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
318 319
<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
320 321

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

Libin Lu's avatar
Libin Lu committed
323 324
Edit `AppDelegate.h`:
```diff
Libin Lu's avatar
Libin Lu committed
325 326
+ @import UserNotifications;
+
Libin Lu's avatar
Libin Lu committed
327 328 329
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>
```
Libin Lu's avatar
init  
Libin Lu committed
330

331 332 333 334 335 336 337 338 339
Edit `AppDelegate.m`:
```diff
+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
Libin Lu's avatar
Libin Lu committed
340
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
341 342 343

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

Libin Lu's avatar
Libin Lu committed
345
+
Libin Lu's avatar
Libin Lu committed
346
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
Libin Lu's avatar
Libin Lu committed
347
+ {
Libin Lu's avatar
Libin Lu committed
348
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
349
+ }
Libin Lu's avatar
Libin Lu committed
350
+
Libin Lu's avatar
Libin Lu committed
351
+ #if defined(__IPHONE_11_0)
Libin Lu's avatar
Libin Lu committed
352
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
Libin Lu's avatar
Libin Lu committed
353
+ {
Libin Lu's avatar
Libin Lu committed
354
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
355
+ }
Libin Lu's avatar
Libin Lu committed
356 357 358 359 360 361
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
Libin Lu's avatar
Libin Lu committed
362
+
Libin Lu's avatar
Libin Lu committed
363
+ //You can skip this method if you don't want to use local notification
Libin Lu's avatar
Libin Lu committed
364
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
Libin Lu's avatar
Libin Lu committed
365
+   [RNFIRMessaging didReceiveLocalNotification:notification];
Libin Lu's avatar
Libin Lu committed
366
+ }
367
+
Libin Lu's avatar
Libin Lu committed
368
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
Libin Lu's avatar
Libin Lu committed
369
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
370 371
+ }
```
372

Windham Wong's avatar
Windham Wong committed
373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391
**Add the path of header files into XCode:**

1. Open XCode.
2. Press `CMD+1` or click the XCode project.
3. Go to **Build Settings**, selecting **All** and **Combined**.
4. Search **Header Search Path** in the searchg tab.
5. Make sure there is a line of `$(SRCROOT)/../node_modules/react-native-fcm/ios`. If no, just add it.

**Add GoogleService-Info.plist:**

Make sure the file is not just moved into the folder. You need to `Right Click` the project folder in XCode and `Add File to <Project Name>`. Select **Copy if needed** in the `Options` page while selecting the file.

**Shared Library Settings:**

- Make sure you see `Pods.xcodeproj` under **Library** folder if you are using Pod install method.
- Make sure you see `RNFIRMessaging.xcodeproj` under **Library** folder.
- If you don't see any of these files, please add them by `Right Click` the **Library** folder and `Add File to <Project Name>` to add them back. `Pods.xcodeproj` should be under `ios/Pods/`, and `RNFIRMessaging.xcodeproj` should be under `node_modules/react-native-fcm/ios`.
- Make sure you see `libRNFIRMessaging.a` under **Link Binary With Libraries** under **Build Phases** tab. If no, drag the file under `RNFIRMessaging.xcodeproj` under **Library** folder into there.

Libin Lu's avatar
Libin Lu committed
392
### Add Capabilities
393 394 395
- Select your project **Capabilities** and enable:
  - **Push Notifications**
  - *Background Modes* > **Remote notifications**.
396

Libin Lu's avatar
Libin Lu committed
397
### FirebaseAppDelegateProxyEnabled
Libin Lu's avatar
Libin Lu committed
398
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
399

Libin Lu's avatar
Libin Lu committed
400
## Setup Local Notifications
Libin Lu's avatar
Libin Lu committed
401
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
402

Libin Lu's avatar
Libin Lu committed
403
### IOS
Libin Lu's avatar
Libin Lu committed
404
No change required
405

Libin Lu's avatar
Libin Lu committed
406
### Android
Libin Lu's avatar
Libin Lu committed
407 408 409 410 411
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" />
412

Anmol Wassan's avatar
Anmol Wassan committed
413
  <application>
Libin Lu's avatar
Libin Lu committed
414 415 416 417 418 419 420 421 422 423
+      <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>
424
```
Libin Lu's avatar
Libin Lu committed
425 426
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
427

Libin Lu's avatar
Libin Lu committed
428
## Usage
Libin Lu's avatar
Libin Lu committed
429
[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
430 431


Lucas Bento's avatar
Lucas Bento committed
432
### Build custom push notification for Android
Libin Lu's avatar
Libin Lu committed
433 434
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
435
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
436 437

WARNING: `custom_notification` **cannot** be used together with `notification` attribute. use `data` **ALONE**
Libin Lu's avatar
Libin Lu committed
438 439 440 441 442 443 444 445

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
446
      "body": "test body",
Libin Lu's avatar
Libin Lu committed
447 448 449 450 451
      "title": "test title",
      "color":"#00ACD4",
      "priority":"high",
      "icon":"ic_notif",
      "group": "GROUP",
Libin Lu's avatar
Libin Lu committed
452 453
      "id": "id",
      "show_in_foreground": true
Libin Lu's avatar
Libin Lu committed
454 455 456 457 458
    }
  }
}
```

Libin Lu's avatar
Libin Lu committed
459 460 461
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
462 463
Check local notification guide below for configuration.

Sean Adkinson's avatar
Sean Adkinson committed
464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483
**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);
```

484
### Behaviour when sending `notification` and `data` payload through GCM
Libin Lu's avatar
Libin Lu committed
485
- 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
486

Libin Lu's avatar
Libin Lu committed
487 488 489 490 491
- 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.
492
 - Android will receive notificaton from `FCMNotificationReceived` event
Naisheel Verdhan's avatar
Naisheel Verdhan committed
493
    * if you pass `notification` payload, it will receive data when user click on notification
494 495 496 497 498
    * 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
499 500 501 502 503 504 505 506 507 508 509 510 511
   {
      "to":"some_device_token",
      "content_available": true,
      "notification": {
          "title": "hello",
          "body": "yo",
          "click_action": "fcm.ACTION.HELLO"
      },
      "data": {
          "extra":"juice"
      }
    }
    ```
512 513

    and event callback will receive as:
514

515 516 517 518
    - Android
      ```json
      {
        "fcm": {"action": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
519
        "opened_from_tray": 1,
520 521 522
        "extra": "juice"
      }
      ```
523

524 525 526 527
    - iOS
      ```json
      {
        "apns": {"action_category": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
528
        "opened_from_tray": 1,
529 530 531
        "extra": "juice"
      }
      ```
532

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

Naisheel Verdhan's avatar
Naisheel Verdhan committed
536
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)).
537

538 539 540 541 542
### 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', {
543
  my_custom_data_1: 'my_custom_field_value_1',
544 545 546 547 548 549
  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.

550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569
### 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
570
## Q & A
571

Libin Lu's avatar
Libin Lu committed
572 573 574 575 576 577
#### 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

578
#### My Android build is failing
delvedor's avatar
delvedor committed
579
Try update your SDK and google play service.
Libin Lu's avatar
Libin Lu committed
580
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
581
```
Libin Lu's avatar
Libin Lu committed
582 583
    compile(project(':react-native-maps')) {
        exclude group: 'com.google.android.gms', module: 'play-services-base'
Libin Lu's avatar
Libin Lu committed
584 585
    }
```
586

Libin Lu's avatar
Libin Lu committed
587 588
#### 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
589

Libin Lu's avatar
Libin Lu committed
590 591
#### 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.
592

Libin Lu's avatar
Libin Lu committed
593 594 595 596
#### 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
597
#### App running in background doesn't trigger `FCMNotificationReceived` when receiving hybrid notification [Android]
598
These is [an issue opened for that](https://github.com/google/gcm/issues/63). Behavior is not consistent between 2 platforms
599

Libin Lu's avatar
Libin Lu committed
600
#### Android notification is showing a white icon
601 602
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
603 604 605
#### 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

606 607 608 609 610 611 612
#### 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
613

Libin Lu's avatar
Libin Lu committed
614 615 616
#### 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
617
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
618

Libin Lu's avatar
Libin Lu committed
619
#### How do I tell if user clicks the notification banner?
Naisheel Verdhan's avatar
Naisheel Verdhan committed
620
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
621

Libin Lu's avatar
Libin Lu committed
622
#### Android notification doesn't vibrate/show head-up display etc
623
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
624
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
625

Libin Lu's avatar
Libin Lu committed
626 627 628
#### 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
629
#### I want to add advanced feature that FCM doesn't support for remote notification
Libin Lu's avatar
Libin Lu committed
630
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
631 632
- 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
633

Libin Lu's avatar
Libin Lu committed
634 635
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
636 637 638 639 640 641 642 643 644 645 646 647
#### 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
648
#### I want to show notification when app is in foreground
Libin Lu's avatar
Libin Lu committed
649
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
650

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

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

Libin Lu's avatar
Libin Lu committed
655 656 657
#### 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
658 659 660
#### 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
661 662 663
#### 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

664 665
#### Some features are missing
Issues and pull requests are welcome. Let's make this thing better!
666

Libin Lu's avatar
Libin Lu committed
667
#### Credits
Libin Lu's avatar
Libin Lu committed
668
Local notification implementation is inspired by react-native-push-notification by zo0r
Noitidart's avatar
Noitidart committed
669

delvedor's avatar
delvedor committed
670 671 672 673 674 675
#### 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
676
## Sending remote notification
Noitidart's avatar
Noitidart committed
677 678 679 680

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
681

Noitidart's avatar
Noitidart committed
682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725
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
726
            "icon":"ic_notif",
Noitidart's avatar
Noitidart committed
727 728 729 730 731 732 733 734 735
            "group": "GROUP",
            "sound": "default",
            "id": "id",
            "show_in_foreground": true
            }
        }
    })
})
```
736 737 738

## Channels

Libin Lu's avatar
Libin Lu committed
739
Right now for Android Orion 8 or API 26 is important to use channels. Firebase will create a default channel for you or you can custom your default channel for Firebase notifications by adding default meta data to `AndroidManifest`:
740 741 742 743

```
<meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id"/>
```
Libin Lu's avatar
Libin Lu committed
744
more reading on [official docs](https://firebase.google.com/docs/cloud-messaging/android/client)
745

Libin Lu's avatar
Libin Lu committed
746 747
However it is essential to create a notification channel if you need to show local notification or use `custom_notification`.
First you should `createNotificationChannel` on init app. Its creates if not exists yet.
748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769

```
FCM.createNotificationChannel({
    id: 'car_status',
    name: 'Car status',
    description: 'Notifies when changes car status',
    priority: 'max',
});
```

After this all notifications should have `channel` key and value with specified channel name. For example:

```
customNotification = {
   id: 'id',
   title: `title`,
   body: 'body',
   sound: 'default',
   priority: 'high',
   icon: 'ic_launcher',
   show_in_foreground: true,
   vibrate: 500,
Libin Lu's avatar
Libin Lu committed
770
   channel: 'car_status', <====
771 772 773
   action: 'android.intent.action.MAIN',
};
```