# jpush-react-native

1. **申请极光推送开发者帐号**

```
要创建极光推送开发者帐号，请访问[极光推送官方网站'https://www.jiguang.cn/push](https://www.jiguang.cn/push)'
```

![jpush\_android\_3m](https://docs.jiguang.cn/jpush/client/image/jpush_app_register.png)

* **Portal上创建应用**

  ```
   使用注册账号登陆，进入极光控制台后，点击“创建应用”按钮。创建帐号进入极光推送后，首先显示的是创建应用的界面。填上你的应用程序的名称，以及 Android包名这二项就可以了。
  ```

![jpush\_android\_3m](https://docs.jiguang.cn/jpush/client/image/jpush_app_create.png)

1. **react native集成极光推送（ios和android）**
2. **安装**

   ```
    打开终端，进入项目文件夹，执行以下命令：

    $ npm install jpush-react-native --save

    \# jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

    $ npm install jcore-react-native --save
   ```
3. **配置**

   ```
    \# 针对性的link，避免之前手动配置的其它插件重复配置造成报错 

    $ react-native link jpush-react-native 

    $ react-native link jcore-react-native

    执行完 link 项目后可能会出现报错，这没关系，需要手动配置一下 build.gradle 文件
   ```

在 Android Studio 中打开你的项目，然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块，打开此模块下的 build.gradle 文件，做以下改动：

project/android/app/build.gradle

android { ... defaultConfig { applicationId "yourApplicationId" // 此处改成你在极光官网上申请应用时填写的包名 ... manifestPlaceholders = \[ JPUSH\_APPKEY: "yourAppKey", //在此替换你的 APPKey APP\_CHANNEL: "developer-default" //应用渠道号, 默认即可 ] } } ... dependencies { compile fileTree(dir: "libs", include: \["\*.jar"]) compile project(':jpush-react-native') // 添加 jpush 依赖 compile project(':jcore-react-native') // 添加 jcore 依赖 compile "com.facebook.react:react-native:+" // From node\_modules }

检查 android 项目下的 settings.gradle 配置有没有包含以下内容：

project/android/settings.gradle

include ':app', ':jpush-react-native', ':jcore-react-native' project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node\_modules/jpush-react-native/android') project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node\_modules/jcore-react-native/android')

检查一下 app 下的 AndroidManifest 配置，有没有增加

<

meta-data

\>

部分。

project/android/app/AndroidManifest.xml

<

application ...

<

!-- Required . Enable it you can get statistics data with channel --

\>

<

meta-data android:name="JPUSH\_CHANNEL" android:value="${APP\_CHANNEL}"/

\>

<

meta-data android:name="JPUSH\_APPKEY" android:value="${JPUSH\_APPKEY}"/

\>

<

/application

\>

现在重新 sync 一下项目，应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。

![](/files/-LEJBBVRbC8ZA3fx8CGr)

接下来加入 JPushPackage

* RN 0.29.0 以下版本

打开 app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：

project/android/app/MainActivity.java

![](/files/-LEJBBVTSmD_iIJ_0n7f)

* RN 0.29.0 以上版本

打开 app 下的 MainApplication.java 文件，然后加入 JPushPackage，

[参考 demo](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fjpush%2Fjpush-react-native%2Fblob%2Fmaster%2Fexample%2Fandroid%2Fapp%2Fsrc%2Fcom%2Fpushdemo%2FMainApplication.java)

：

// 设置为 true 将不弹出 toast private boolean SHUTDOWN\_TOAST = false; // 设置为 true 将不打印 log private boolean SHUTDOWN\_LOG = false; private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List

<

ReactPackage

\>

getPackages() { return Arrays.

<

ReactPackage

\>

asList( new MainReactPackage(), new JPushPackage(SHUTDOWN\_TOAST, SHUTDOWN\_LOG) ); } };

然后在 MainActivity 中加入一些初始化代码即可：

project/android/app/src/java/.../MainActivity.java

public class MainActivity extends ReactActivity { ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); JPushInterface.init(this); } @Override protected void onPause() { super.onPause(); JPushInterface.onPause(this); } @Override protected void onResume() { super.onResume(); JPushInterface.onResume(this); } @Override protected void onDestroy() { super.onDestroy(); } }

这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。

使用

import JPushModule from 'jpush-react-native'; ... componentDidMount() { // 新版本必需写回调函数 // JPushModule.notifyJSDidLoad(); JPushModule.notifyJSDidLoad((resultCode) =

\>

{ if (resultCode === 0) {} }); // 接收自定义消息 JPushModule.addReceiveCustomMsgListener((message) =

\>

{ this.setState({pushMsg: message}); }); // 接收推送通知 JPushModule.addReceiveNotificationListener((message) =

\>

{ console.log("receive notification: " + message); }); // 打开通知 JPushModule.addReceiveOpenNotificationListener((map) =

\>

{ console.log("Opening notification!"); console.log("map.extra: " + map.extras); // 可执行跳转操作，也可跳转原生页面 // this.props.navigation.navigate("SecondActivity"); }); } componentWillUnmount() { JPushModule.removeReceiveCustomMsgListener(); JPushModule.removeReceiveNotificationListener(); }

ios配置

## ios配置

iOS Usage

打开 iOS 工程，在 rnpm link 之后，RCTJPushModule.xcodeproj 工程会自动添加到 Libraries 目录里面

在 iOS 工程 target 的 Build Phases->Link Binary with Libraries 中加入如下库

libz.tbd

CoreTelephony.framework

Security.framework

CFNetwork.framework

CoreFoundation.framework

SystemConfiguration.framework

Foundation.framework

UIKit.framework

UserNotifications.framework

libresolv.tbd

在 AppDelegate.h 文件中 填写如下代码，这里的的 appkey、channel、和 isProduction 填写自己的

#### 1.3.1、下面直接放我的代码图吧，上面的代码都是官网的，但是有几个地方是需要修改的，也是需要增加的，要不然各种报错，：

![](http://upload-images.jianshu.io/upload_images/3463020-e53933a4fd63f013.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3463020-9a7851ae3658f3dc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3463020-123ddaf99bd5aec4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

#### 1.3.2、还有一个最重要的，把github上极光的代码都放到你的这个AppDelegate.m文件中，然后加一个接口

#### @interfaceAppDelegate()；

而且用官网的代码会提示下面的警告信息：

/Users/vittorio/Desktop/log/ios/log/AppDelegate.m:39:55: 'UIRemoteNotificationTypeBadge' is deprecated:

first deprecated in iOS 8.0 - Use UserNotifications Framework's UNAuthorizationOptions for user notifications

and registerForRemoteNotifications for receiving remote notifications instead.

需要把代码里面的UIRemoteNotificationType改成：UNAuthorizationOption

具体看我以下的代码：

**\[plain]**

[view plain](http://blog.csdn.net/liu__520/article/details/53133441?locationNum=8\&fps=1#)

[copy](http://blog.csdn.net/liu__520/article/details/53133441?locationNum=8\&fps=1#)

1. /\*\* &#x20;
2.
3. \* Copyright (c) 2015-present, Facebook, Inc. &#x20;
4.
5. \* All rights reserved. &#x20;
6.
7. \* &#x20;
8.
9. \* This source code is licensed under the BSD-style license found in the &#x20;
10.
11. \* LICENSE file in the root directory of this source tree. An additional grant &#x20;
12.
13. \* of patent rights can be found in the PATENTS file in the same directory. &#x20;
14.
15. \*/ &#x20;
16.
17. \#import "AppDelegate.h" &#x20;
18.
19. \#import "RCTBundleURLProvider.h" &#x20;
20.
21. \#import "RCTRootView\.h" &#x20;
22.
23. // ---------------------------start极光推送-------------------------- &#x20;
24.
25. \#import "JPUSHService.h" &#x20;
26.
27. \#import &#x20;
28.
29. \#import &#x20;
30.
31. \#ifdef NSFoundationVersionNumber\_iOS\_9\_x\_Max &#x20;
32.
33. \#import &#x20;
34.
35. \#endif &#x20;
36.
37. @interface AppDelegate () &#x20;
38.
39. // ---------------------------end极光推送--------------------------- &#x20;
40.
41. @end &#x20;
42.
43. @implementation AppDelegate &#x20;
44.
45. * (BOOL)application:(UIApplication \*)application didFinishLaunchingWithOptions:(NSDictionary \*)launchOptions &#x20;
46.
47. { &#x20;
48.
49. // ---------------------------start极光推送-------------------------- &#x20;
50.
51. //Required &#x20;
52.
53. if (\[\[UIDevice currentDevice].systemVersion floatValue]&#x20;

    \>

    \= 10.0) { &#x20;
54.
55. JPUSHRegisterEntity \* entity = \[\[JPUSHRegisterEntity alloc] init]; &#x20;
56.
57. entity.types = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound; &#x20;
58.
59. \[JPUSHService registerForRemoteNotificationConfig:entity delegate:self]; &#x20;
60.
61. } &#x20;
62.
63. else if (\[\[UIDevice currentDevice].systemVersion floatValue]&#x20;

    \>

    \= 8.0) { &#x20;
64.
65. //可以添加自定义categories &#x20;
66.
67. \[JPUSHService registerForRemoteNotificationTypes:(UNAuthorizationOptionBadge | &#x20;
68.
69. UNAuthorizationOptionSound | &#x20;
70.
71. UNAuthorizationOptionAlert) &#x20;
72.
73. categories:nil]; &#x20;
74.
75. } &#x20;
76.
77. else { &#x20;
78.
79. //categories 必须为nil &#x20;
80.
81. \[JPUSHService registerForRemoteNotificationTypes:(UNAuthorizationOptionBadge | &#x20;
82.
83. UNAuthorizationOptionSound | &#x20;
84.
85. UNAuthorizationOptionAlert) &#x20;
86.
87. categories:nil]; &#x20;
88.
89. } &#x20;
90.
91. \[JPUSHService setupWithOption:launchOptions appKey:appKey &#x20;
92.
93. channel:nil apsForProduction:nil]; &#x20;
94.
95. // ---------------------------end极光推送-------------------------- &#x20;
96.
97. NSURL \*jsCodeLocation; &#x20;
98.
99. jsCodeLocation = \[\[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; &#x20;
100.
101. RCTRootView \*rootView = \[\[RCTRootView alloc] initWithBundleURL:jsCodeLocation &#x20;
102.
103. moduleName:@"log" &#x20;
104.
105. initialProperties:nil &#x20;
106.
107. launchOptions:launchOptions]; &#x20;
108.
109. rootView\.backgroundColor = \[\[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; &#x20;
110.
111. self.window = \[\[UIWindow alloc] initWithFrame:\[UIScreen mainScreen].bounds]; &#x20;
112.
113. UIViewController \*rootViewController = \[UIViewController new]; &#x20;
114.
115. rootViewController.view = rootView; &#x20;
116.
117. self.window\.rootViewController = rootViewController; &#x20;
118.
119. \[self.window makeKeyAndVisible]; &#x20;
120.
121. return YES; &#x20;
122.
123. } &#x20;
124.
125. // ---------------------------start极光推送-------------------------- &#x20;
126.
127. //----------------------------------------------------------------------- &#x20;
128.
129. * (void)application:(UIApplication \*)application &#x20;
130.
131. didRegisterForRemoteNotificationsWithDeviceToken:(NSData \*)deviceToken { &#x20;
132.
133. \[JPUSHService registerDeviceToken:deviceToken]; &#x20;
134.
135. } &#x20;
136.
137. //----------------------------------------------------------------------- &#x20;
138.
139. * (void)application:(UIApplication \*)application didReceiveRemoteNotification:(NSDictionary \*)userInfo { &#x20;
140.
141. // 取得 APNs 标准信息内容 &#x20;
142.
143. \[\[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo]; &#x20;
144.
145. } &#x20;
146.
147. //iOS 7 Remote Notification &#x20;
148.
149. * (void)application:(UIApplication \*)application didReceiveRemoteNotification:  (NSDictionary \*)userInfo fetchCompletionHandler:(void (^)  (UIBackgroundFetchResult))completionHandler { &#x20;
150.
151. \[\[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo]; &#x20;
152.
153. } &#x20;
154.
155. // iOS 10 Support &#x20;
156.
157. * (void)jpushNotificationCenter:(UNUserNotificationCenter \*)center willPresentNotification:(UNNotification \*)notification withCompletionHandler:(void (^)(NSInteger))completionHandler { &#x20;
158.
159. // Required &#x20;
160.
161. NSDictionary \* userInfo = notification.request.content.userInfo; &#x20;
162.
163. if(\[notification.request.trigger isKindOfClass:\[UNPushNotificationTrigger class]]) { &#x20;
164.
165. \[JPUSHService handleRemoteNotification:userInfo]; &#x20;
166.
167. \[\[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo]; &#x20;
168.
169. } &#x20;
170.
171. completionHandler(UNNotificationPresentationOptionAlert); // 需要执行这个方法，选择是否提醒用户，有Badge、Sound、Alert三种类型可以选择设置 &#x20;
172.
173. } &#x20;
174.
175. // iOS 10 Support &#x20;
176.
177. * (void)jpushNotificationCenter:(UNUserNotificationCenter \*)center didReceiveNotificationResponse:(UNNotificationResponse \*)response withCompletionHandler:(void (^)())completionHandler { &#x20;
178.
179. // Required &#x20;
180.
181. NSDictionary \* userInfo = response.notification.request.content.userInfo; &#x20;
182.
183. if(\[response.notification.request.trigger isKindOfClass:\[UNPushNotificationTrigger class]]) { &#x20;
184.
185. \[JPUSHService handleRemoteNotification:userInfo]; &#x20;
186.
187. \[\[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo]; &#x20;
188.
189. } &#x20;
190.
191. completionHandler();  // 系统要求执行这个方法 &#x20;
192.
193. } &#x20;
194.
195. * (void)application:(UIApplication \*)application didFailToRegisterForRemoteNotificationsWithError:(NSError \*)error { &#x20;
196.
197. //Optional &#x20;
198.
199. NSLog(@"did Fail To Register For Remote Notifications With Error: %@", error); &#x20;
200.
201. } &#x20;
202.
203. // ---------------------------end极光推送-------------------------- &#x20;
204.
205. @end &#x20;

#### 1.3.3、然后需要选择描述配置的东西吧：

具体看下面的两张图：

![](http://upload-images.jianshu.io/upload_images/3463020-8e3f50a3c4d438e4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3463020-46cbc16dd36cfaca.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

#### 1.3.4、打开项目---capacities---打开push notifications,

![](http://upload-images.jianshu.io/upload_images/3463020-0a12d65407a65a46.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

1.3.5、打开项目--build settings---signing---code signing identify,都改成 ios developer，

![](http://upload-images.jianshu.io/upload_images/3463020-5501d3f204913c1b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

#### 1.3.6、然后把tests的signing也要改一下，要不然安装到真机上会报错的：

![](http://upload-images.jianshu.io/upload_images/3463020-113f5270a06f27e4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

到此为止，配置基本就完成了，

## 2、下面我们在RN上进行操作了：

打开js文件我的是在主页上进行的，

具体的代码如下：

**\[plain]**

[view plain](http://blog.csdn.net/liu__520/article/details/53133441?locationNum=8\&fps=1#)

[copy](http://blog.csdn.net/liu__520/article/details/53133441?locationNum=8\&fps=1#)

1. componentDidMount() { &#x20;
2.
3. //---------------------------------android start--------------------------------- &#x20;
4.
5. JPushModule.addReceiveCustomMsgListener((message) =

   \>

   &#x20;{ &#x20;
6.
7. //这是默认的通知消息 &#x20;
8.
9. //  this.setState({pushMsg:message}); &#x20;
10.
11. }); &#x20;
12.
13. JPushModule.addReceiveNotificationListener((map) =

    \>

    &#x20;{ &#x20;
14.
15. //自定义推送的消息 &#x20;
16.
17. //console.log("alertContent: " + map.alertContent); &#x20;
18.
19. //extra是可选配置上的附件字段 &#x20;
20.
21. //console.log("extras: " + map.extras); &#x20;
22.
23. var message = JSON.parse(map.extras); &#x20;
24.
25. this.storeDB(message);//我这里是把内容存在了数据库里面，你可以把这里的message放到state里面显示出来 &#x20;
26.
27. //这里面解析json数据，并存在数据库中，同时显示在通知栏上 &#x20;
28.
29. }) &#x20;
30.
31. //点击通知进入应用的主页，相当于跳转到制定的页面 &#x20;
32.
33. JPushModule.addReceiveOpenNotificationListener((map) =

    \>

    &#x20;{ &#x20;
34.
35. //console.log("Opening notification!"); &#x20;
36.
37. this.props.navigator.replace({name: "HomePage",component:HomePage}); &#x20;
38.
39. }) &#x20;
40.
41. //---------------------------------android end--------------------------------- &#x20;
42.
43. //---------------------------------ios start--------------------------------- &#x20;
44.
45. NativeAppEventEmitter.addListener( &#x20;
46.
47. 'ReceiveNotification', &#x20;
48.
49. (message) =

    \>

    &#x20;{ &#x20;
50.
51. //下面就是发送过来的内容，可以用stringfy打印发来的消息 &#x20;
52.
53. console.log("content: " + JSON.stringify(message)); &#x20;
54.
55. //下面的json就是我在极光推送上的附件字段内容就是上面的log打印出来的东西 &#x20;
56.
57. // { &#x20;
58.
59. //    "\_j\_msgid": 4572771355,  &#x20;
60.
61. //    "content": "日志第一天",  &#x20;
62.
63. //    "time": "2016-11-18/13:11:09",  &#x20;
64.
65. //    "aps": { &#x20;
66.
67. //        "sound": "default",   &#x20;
68.
69. //        "badge": 1,  &#x20;
70.
71. //        "alert": "测试ios1"  &#x20;
72.
73. //    },  &#x20;
74.
75. //    "name": "刘成", &#x20;
76.
77. //    "age": "28",  &#x20;
78.
79. //    "性别": "男", &#x20;
80.
81. //"qq":"674668211"， &#x20;
82.
83. //"手机号":"674668211"， &#x20;
84.
85. // } console.log("\_j\_msgid:" + message.\_j\_msgid); &#x20;
86.
87. //这个是极光的消息id console.log("content:" + message.content); &#x20;
88.
89. //这是标题 console.log("aps:" + message.aps.sound); &#x20;
90.
91. //这是声音 console.log("aps:" + message.aps.badge); &#x20;
92.
93. //这是上标 console.log("aps:" + message.aps.alert); &#x20;
94.
95. //这是发送通知的主内容 this.storeDB(message); } ); &#x20;
96.
97. //---------------------------------ios end--------------------------------- &#x20;
98.
99. } &#x20;
100.
101. //最后在组件卸载的时间取消监听： &#x20;
102.
103. componentWillUnmount() { &#x20;
104.
105. JPushModule.removeReceiveCustomMsgListener(); &#x20;
106.
107. JPushModule.removeReceiveNotificationListener(); &#x20;
108.
109. BackAndroid.removeEventListener('hardwareBackPress'); &#x20;
110.
111. NativeAppEventEmitter.removeAllListeners(); &#x20;
112.
113. DeviceEventEmitter.removeAllListeners(); &#x20;
114.
115. }

     上面的android的推送内容都在message.content里面，附加的数据在message.extras,

     message就是发送过来的消息内容：addReceiveNotificationListener

     如果你没有附加的消息，只是显示消息内容，用这个方法就行了:addReceiveCustomMsgListener

     如果你要点击通知打开某个应用，用:addReceiveOpenNotificationListener

     ios的要用到注册监听事件：

     NativeAppEventEmitter.addListener

     消息内容都在message里面，可以看下我的示例，结合我极光推送的附加字段：就会明白的//我这里是把内容存在了数据库里面，

     你可以把这里的message

     放到state里面显示出来

#### 2，如何使用

## 创建应用 <a href="#id-1" id="id-1"></a>

### **创建应用步骤**: <a href="#id-2" id="id-2"></a>

#### 创建应用 : <a href="#id-3" id="id-3"></a>

点击［创建应用］按钮即可;\
![](https://docs.jiguang.cn/jpush/console/image/create_application.png)

#### 配置应用信息： <a href="#id-4" id="id-4"></a>

Step1： 基本信息：输入应用名称 (必填), 上传一个图标；\
配置android平台信息：填写应用包名, JPush 系统会在后台根据你输入的包名生成的推送的 Android 应用 Demo, 该 Demo 包含了该配置的信息;\
Step2： 配置iOS平台信息：上传相关环境的推送证书，并填写和证书配套的密码；\
Step3： 配置WinPhone平台信息：选择是否开启即可；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/setting_application.png)\
Step4： 信息配置完成后，查看应用信息如下：\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/info_application.png)

## 应用管理 <a href="#id-5" id="id-5"></a>

点击［home］回到首页，可浏览所有应用的信息，点击应用名称或设置可查看应用详情，点击推送可去到发送通知页，编辑并推送通知，点击统计，可查看该应用的所有统计数据；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/manage_application.png)

应用详情如下\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/application_moreinfo.png)

应用设置如下\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/application_moresetting.png)

## 分组管理 <a href="#id-6" id="id-6"></a>

点击［home］回到首页后，在左侧导航中点击［分组管理］，可浏览应用的分组管理信息并创建新分组；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/group_application.png)

## 报表下载 <a href="#id-7" id="id-7"></a>

点击［home］回到首页后，在左侧导航中点［报表下载］，可以根据时间对报表进行下载；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/data_application.png)

## 发送通知 <a href="#id-8" id="id-8"></a>

路径：选择应用－>推送－>发送通知\
填写推送内容后点击页面最下方的［立即发送］按钮即可；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/send_notification.png)

Web界面会弹出对话框, 提示是否发送, 选［发送吧］即可;\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/send_.png)

推送成果后，弹出对话框，点击［去看看］即可查看推送结果;\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/send_success.png)

## 自定义消息 <a href="#id-9" id="id-9"></a>

路径：选择应用－>推送－>自定义消息 填写推送内容后点击页面最下方的［立即发送］按钮即可； ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/send_message.png)

## 富媒体消息 <a href="#id-10" id="id-10"></a>

路径：选择应用－>推送－>富媒体消息；\
可通过模板发送landing page、弹窗、信息流等形式的富媒体消息，或者直接通过URL发送预先编辑好的页面；

### 通过landing page 模板发送 <a href="#landing-page" id="landing-page"></a>

* Step1：路径：选择应用－>推送－>富媒体消息－>模版－>landing page，目前landing page只提供一种通用模板；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/landingpage_1.png)
* Step2：进入模板内容编辑页面，填写所有内容，左侧可预览内容的展示效果，单击［下一步］；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/landingpage_2.png)
* Step3：单击［预览富媒体页面］，可预览刚刚编辑完成的landing page模板；单击页面最下方的［立即发送］按钮，即可完成该landing page的推送；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/landingpage_3.png)

### 通过弹窗模板发送 <a href="#id-11" id="id-11"></a>

* Step1：选择应用－>推送－>富媒体消息－>模版－>弹窗，挑选适合的模板；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/popup_1.png)
* Step2：进入模板内容编辑页面，填写所有内容，左侧可预览内容的展示效果，单击下一步；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/popup_2.png)
* Step3：单击［预览富媒体页面］，可以预览刚刚编辑完成的弹窗模板，单击页面最下方的［立即发送］按钮，即可完成该弹窗的推送；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/popup_3.png)

### 通过信息流模板发送 <a href="#id-12" id="id-12"></a>

* Step1：路径：选择应用－>推送－>富媒体消息－>模版－>信息流，挑选适合的模板；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/Informationflow_1.png)
* Step2：进入模板内容编辑页面，填写所有内容，左侧可预览内容的展示效果，单击下一步；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/Informationflow_2.png)
* Step3：单击［预览富媒体页面］，可以预览刚刚编辑完成的弹窗模板，单击页面最下方的［立即发送］按钮，即可完成该信息流的推送；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/informationflow_3.png)

### 通过URL发送通知 <a href="#url" id="url"></a>

* Step1：路径：选择应用－>推送－>富媒体消息－>URL；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/url_1.png)
* Step2：输入需要推送的页面的URL，单击［下一步］按钮，由于通知的大小有限制，URL不可过长，若URL超过限制长度，请自行转成短地址再输入；\
  ![image](https://docs.jiguang.cn/jpush/console/image/url_2.png)
* Step3：URL不提供页面预览功能，请确保输入正确的URL，单击页面最下方的［立即发送］按钮，即可完成URL推送；\
  ![jpush\_web](https://docs.jiguang.cn/jpush/console/image/url_3.png)

## 推送历史 <a href="#id-13" id="id-13"></a>

路径：选择应用－>推送－>推送历史\
在右边可以浏览推送的历史数据，包含推送时间，内容，类型，IOS 目标|成功，Android目标|成功，Winphone目标|成功，操作；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/send_history.png)

**说明**

* 类型包括：广播、tag、alias、Registration ID
* 操作包括：转发、详情、删除

**注意**

推送历史数据只保留一个月的统计信息。

详情如下：\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/send_number.png)

统计示例：\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/total.png)

## 定时推送 <a href="#id-14" id="id-14"></a>

路径：选择应用－>推送－>定时消息\
右边的下拉菜单中可以选择［通知］还是［自定义消息］的定时推送消息；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/Schedule_send.png)

### 定速推送 <a href="#id-15" id="id-15"></a>

定速推送时长(分钟),在应用的 "推送" 模块,点击定速推送\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/speed.png)

## 用户分群 <a href="#id-16" id="id-16"></a>

路径：选择应用－>推送－>用户分群－>创建用户分群\
用户分群可设置：标签，地理位置，活跃用户，系统版本，在线用户，注册用户中的一个或多个条件；\
用户分群的名称为必填项，在控制台向用户分群发送时使用名称；\
用户分群的ID是在创建之后生成的，调用API时可指定该ID；\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/segment_1.png)![jpush\_web](https://docs.jiguang.cn/jpush/console/image/segment_2.png)

## 统计与报表说明 <a href="#id-17" id="id-17"></a>

### 查看报表 <a href="#id-18" id="id-18"></a>

JPush 的 Web 上提供了多种应用级别的统计数据。如下图所示，用户在登录JPush 帐号，并选择了具体的应用后，可以在顶部导航条内选择“统计”

#### 选择报表类型 <a href="#id-19" id="id-19"></a>

JPush 统计包括：推送统计、用户统计、API统计、活跃分析、在线留存率、用户分群统计、设备信息统计、排行统计、地区分布、错误列表、流失分析、回访分析\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/statistics_1.png)

### 选择统计时间 <a href="#id-20" id="id-20"></a>

可以在报表右上角选择统计的时间范围，也可以自定查询范围，具体统计周期如下图所示。单位粒度依次为：小时，天，月。\
例：如果选择“昨天”，那么报表呈现的数据是以小时为单位；如果选择”最近7天“，那么报表呈现的数据则是是以天为单位。\
![jpush\_web](https://docs.jiguang.cn/jpush/console/image/statistics_time.png)

## 统计项说明 <a href="#id-21" id="id-21"></a>

### 推送统计 <a href="#id-22" id="id-22"></a>

推送报表呈现“推送数量”和“用户点击”情况,部分统计效果需要实现 [推送效果反馈 API](https://docs.jiguang.cn/jpush/client/Android/android_api/#api_2)。

**送达数量**\
Android 用户实际收到推送的数量合计，该数量包括：通过Portal发出的，以及通过API发出的。包括通知，也包括自定义消息。

```
iOS 与 Window Phone 系统由于原理不同，此曲线显示的为正确送达到 APNS 和 MPNS 的统计。
```

**用户点击数**\
用户通过点击通知栏消息进入应用的次数。

```
对于 Android应用，需要实现了统计分析 API才有这个统计数据。
```

### 用户统计 <a href="#id-23" id="id-23"></a>

**新增用户**\
“新增用户”是指新增的 JPush 注册用户。当应用第一次启动时，JPush SDK 会向 JPush 发起内部注册。iOS 系统如果用户在首次使用时选择禁用推送，则不计入新增用户统计。

**在线用户**\
“在线用户”是指统计周期 与 JPush Server 建立网络连接成功的用户总数。统计时间连接过一次，则计入该统计项目，同一用户多次连接不重复计算。

**活跃用户**\
“活跃用户” 是指统计时间内至少打开一次应用的用户总数。活跃用户与在线用户的区别是，活跃必须是用户打开过应用而在线用户是用户侧有网络与 JPush 保持连接。

```
Android 系统，需要实现推送效果反馈 API才可以统计到活跃用户。
```

### API 统计 <a href="#api" id="api"></a>

**API统计**\
统计时长内调用 Push API 的总次数。注：API 次数不同于消息数，一次广播推送与一次别名推送均为 1 次 API 调用。

### 活跃分析 <a href="#id-24" id="id-24"></a>

**推送数量**\
定义同上，这里主要用作对比曲线，用来衡量推送后的用户活跃效果

**用户打开次数**\
所有用户打开应用的次数合计。该指标可用于观测，是否随着推送数量的增加，用户打开应用更多了。

```
 Android 系统，需要实现了推送效果反馈 API才有此统计数据。
```

**用户使用时长（分钟）**\
所有用户使用应用的时长合计。该指标可用于观测，是否随着推送内容的不同，用户使用应用的时间更长。

```
 Android 系统，需要实现了推送效果反馈 API才有此统计数据。
```

#### 在线留存率 <a href="#id-25" id="id-25"></a>

某段时间内新增的，过了一段时间以后仍然还在与 JPush 服务器有连接的用户，称为留存用户。留存用户占当时新增用户的比例称为留存率。“在线留存率“”可以更真实的反映用户的用户留存情况。

```
注意：JPush 的留存用户定义是在线用户，即与服务器仍然有连接的用户（可以是不打开应用只后台在线）。此定义不同与其他根据用户活跃统计的“活跃留存率”，由于iOS 平台机制用户打开应用才可能在线所以此留存约等于“活跃留存”
```

例如：日留存。某一天新增的用户数为100，在 3 天后这 100 个用户中依然在线的用户数为 50，那么这天新增用户的 3 天留存率为 50%。

## 短信验证码 <a href="#id-26" id="id-26"></a>

### 数据概览 <a href="#id-27" id="id-27"></a>

路径：选择应用－>短信验证码－>数据概览\
短信余量：剩余可发送的短信条数，这里的余量是该账号下所有应用可发送短信条数的总和；\
短信发送量：今日发送短信量、本月发送短信量、上月发送短信量，这里的发生量是该应用的使用量；

### 发送纪录 <a href="#id-28" id="id-28"></a>

路径：选择应用－>短信验证码－>发送纪录；\
当前应用发送的所有短信验证码的纪录，支持手机号、时间查询；

#### 3，踩过的坑

#### 参考

* <https://docs.jiguang.cn/jpush/client/Android/android_sdk/>
* <https://docs.jiguang.cn/jpush/client/iOS/ios_sdk/>
* <http://blog.csdn.net/liu__520/article/details/53133441?locationNum=8&fps=1>
* <https://www.jianshu.com/p/a71512a8f921>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lenovohit.gitbook.io/tech-framework/qian-duan-ji-shu/mobile/di-san-fang-zu-jian/jpush-react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
