Alibaba Cloud Mobile Push + uni-app best practices

Register a notification channel

Starting from Android 8.0, you must create a notification channel to display notifications. You can create the notification channel in the onLaunch callback method of the project's App.vue file. The following sample code shows an example:

<script>
	const channel = uni.requireNativePlugin('Aliyun-Push-NotificationChannel');
	export default {
		onLaunch: function() {
			if (uni.getSystemInfoSync().platform === 'android') {
				// Create a notification channel
				channel.createChannel({
                                  id: '${notificationChannelId}',
                                  name: '${notificationChannelName}',
                                  desc: '${notificationChannelDescription}',
                                  importance: 3,
                                });
			}	
		}
	}
</script>

The following table describes the parameters of createChannel.

Register for push notifications

The Alibaba Cloud Mobile Push plugin handles the registration of the proprietary channel and its message callbacks on the Android client. These callbacks manage both notification and pass-through messages. You can complete the registration in the onLaunch callback method of your project's App.vue file. The following sample code shows an example:

<script>
	const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
	export default {
		onLaunch: function() {
			if (uni.getSystemInfoSync().platform === 'android') {
				// Create a notification channel
				...
				//Register for push notifications
				aliyunPush.registerPush({}, result => {
                                  const event = result.event;
                                  if (event === 'registerPush') {
                                    if (result.code === 'success') {
                                      console.log("Push registration successful");
                                    } else {
                                      console.log("Push registration " + result.code + " " + result.msg);
                                    }
                                  } else {
                                    const data = JSON.stringify(result.data);
                                    console.log("receive push event : " + event);
                                    console.log("receive push data : " + data);
                                  }
                                });
			}	
		}
	}
</script>

The following table describes the fields in the result callback.

Vendor channel registration and notification message receiving on Android

<script>
	const aliyunThirdPush = uni.requireNativePlugin('Aliyun-ThirdPush');
	export default {
		onLaunch: function() {
			if (uni.getSystemInfoSync().platform === 'android') {
				// Create a notification channel
				...
				//Register for push notifications
				...
				//Register the callback for vendor channel notification clicks
				aliyunThirdPush.registerThirdPush({}, result => {
                                  const data = JSON.stringify(result);
                                  console.log("receive third push : " + data);
                                });
			}	
		}
	}
</script>

Register for push notifications

On iOS, initialization is performed by default when the application starts. You do not need to call an initialization method. However, you must register callback interfaces to receive push data.

Register a callback for receiving notification messages

You can register a callback to receive notification messages on the iOS client. This lets you retrieve the content of a notification message when the application is in the foreground and notifications are not displayed. You can register the callback for receiving notification messages in the onLaunch callback method of the project's App.vue file. The following sample code shows an example:

<script>
	const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
	export default {
		onLaunch: function() {
			if (uni.getSystemInfoSync().platform === 'ios') {
				// Register the callback for receiving notification messages
				aliyunPush.setNotificationCallback({}, result => {
                                  const data = JSON.stringify(result);
                                  console.log("setNotificationCallback : " + data);
                                });
			}	
		}
	}
</script>

Register a callback for notification message clicks

You can register a callback that is triggered when a user clicks a notification message on the iOS client. You can register this callback for notification message clicks in the onLaunch callback method of the project's App.vue file. The following sample code shows an example:

<script>
	const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
	export default {
		onLaunch: function() {
			if (uni.getSystemInfoSync().platform === 'ios') {
				// Register the callback for receiving notification messages
				...
				// Register the callback for notification message clicks
				aliyunPush.setNotificationResponseCallback({}, result => {
                                  const data = JSON.stringify(result);
                                  console.log("setNotificationResponseCallback : " + data);
                                });
			}	
		}
	}
</script>

Register a callback for receiving pass-through messages

You can register a callback to receive pass-through messages on the iOS client. You can register this callback in the onLaunch callback method of the project's App.vue file. The following sample code shows an example:

<script>
	const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
	export default {
		onLaunch: function() {
			if (uni.getSystemInfoSync().platform === 'ios') {
				// Register the callback for receiving notification messages
				...
				// Register the callback for notification message clicks
				...
				// Register the callback for receiving pass-through messages
				aliyunPush.setMessageCallback({}, result => {
                                  const data = JSON.stringify(result);
                                  console.log("setMessageCallback : " + data);
                                });
			}	
		}
	}
</script>