How to implement ios notification in uniapp

With the popularity of smart phones, mobile phone applications have gradually increased. In order to remind users in real time, the operating system provides a message notification function. Among them, iOS has an important share of the global smartphone market, and its notification function has attracted much attention. How to implement iOS notification function under uniapp framework?

1. Basic knowledge of iOS notifications

Notification refers to a prompt message that pops up at the system level when the application is opened or closed. iOS notifications are divided into two types: local notifications and remote notifications. Local notifications are triggered directly by the application, while remote notifications are sent by the server to APNs (Apple Push Notification service).

Local notifications can be added by calling the add method of the UNUserNotificationCenter class and are displayed during the running of the application. They mainly involve the following methods:

// 配置通知内容
const content = {
  title: '通知标题',
  body: '通知内容',
  userInfo: {"key": "value"} // 附加数据
};

// 创建通知
const notification = {
  identifier: 'local-notification', // 首次显示时的标识符
  content: content,
  trigger: {
    repeats: false // 只显示一次
  }
};

// 添加通知
uni.addLocalNotification(notification);

Remote notifications mainly rely on APNs to complete, and the notification content Both construction and pushing are done on the server side.

2. uniapp implements iOS local notifications

uniapp encapsulates a unified API suitable for each platform. If you want to implement local notifications on iOS, you need to call the add method of the UNUserNotificationCenter class to publish notifications. In the uniapp project, you can directly call the uni.addLocalNotification method to implement local notifications.

When calling the uni.addLocalNotification method, you need to pass in an object containing the notification content and triggering time. Among them, the notification content needs to include title, content and optional additional information. Trigger timing is divided into three methods: time, location, and network status. Among them, time triggering requires setting the repeats attribute to control whether the notification loops.

During the implementation process, you need to pay attention to the following issues:

1. iOS notifications will not be displayed by default when the APP is running, so you need to pay attention to determine whether the current APP is in the foreground.
2. The notification triggering time needs to consider the current time zone.

The following is an example:

/**
 * 在指定时间触发通知，如果应用在前台则不展示
 */
function setNewLocalNotification() {
  const now = new Date();
  const nowStr = now.toLocaleTimeString();
  console.log(`当前时间:${nowStr}`);
  const hour = now.getHours() + 1;
  console.log(`下小时:${hour}`);
  const alarmTime = new Date();
  alarmTime.setHours(hour, 0, 0); // 设置下个小时整点触发
  console.log(`触发时间:${alarmTime.toLocaleTimeString()}`);
  let id = 1;
  uni.addLocalNotification({
    title: 'uniapp',
    body: '时间到了',
    userInfo: {"key": "value"}, // 可附加数据
    trigger: {
      date: alarmTime,
      repeats: false
    },
    identifier: `${id++}`,  
  });
  console.log('添加闹钟成功');
}

3. Import the bridge file

When implementing local notifications, some configurations need to be made to the application's Info.plist. The implementation of this part requires importing the bridge file, so the following operations need to be performed:

1. Open the uniapp project in Xcode and select Build Phases->Copy Bundle Resources.

2. Drag the "com.apple.UNNotificationFramework.framework" file in the directory into the application explorer of Nut Cloud.

3. Add the description information of the notification authorization request to the Info.plist file, the content is as follows:

<key>NSUserNotificationAlertStyle</key>
<string>alert</string>
<key>NSUserNotificationEnabled</key>
<string>YES</string>
<key>NSUserNotificationCenterAlertsEnabled</key>
<string>YES</string>
<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
    <string>remote-notification</string>
</array>
<key>UNNotificationsUsageDescription</key>
<string>请允许我们发送通知</string>

4. Summary

This article introduces the use of uniapp to implement iOS local Notification method. By adding local notifications, you can send push messages to users even when your application is not running. During the implementation process, special attention needs to be paid to obtaining permissions and importing bridge files.

The above is the detailed content of How to implement ios notification in uniapp. For more information, please follow other related articles on the PHP Chinese website!