本地计划通知本机响应

时间:2019-05-11 17:56:36

标签: react-native push-notification notifications expo

我是React Native的新手,我正在尝试实现一项功能,该应用程序每天在特定日期和时间段向用户发送一条通知,提醒用户服用药丸(时间和日期和数据存储在mongodb中服务器,所以我将使用axios来获取它们) 如果应用关闭或在后台,通知仍然可以正常工作吗? 使它工作容易吗? 有人知道实现此目标的方法吗?

谢谢

1 个答案:

答案 0 :(得分:0)

是的!这个有可能。您有很多选择,其中包括:

1)在iOS和Android中使用HeadlessTask进行后台获取,这是一个不错的库  https://github.com/jamesisaac/react-native-background-task

2)从服务器推送通知,以确保确定地唤醒应用程序(除非应用程序已被操作系统杀死)。在iOS中,请确保调用notification.finish()以避免被任务处理程序算法所区分。

没有一个简单的例子就是这样(未测试!):

import React from 'react'
import { Text } from 'react-native'
import BackgroundTask from 'react-native-background-task'
import { Notifications, Permissions, Constants } from 'expo';

BackgroundTask.define(async () => {

 // if time is 12pm, fire off a request with axios to fetch the pills info
  const response = await fetch('http://pills-server')


    const text = await response.text()

  // Data persisted to AsyncStorage can later be accessed by the foreground app
  await AsyncStorage.setItem('@MyApp:key', text)  

  // Notification configuration object
  const localNotification = {
        title: text,
        body: 'msg',
        data: data,
        ios: {
          sound: true
        }
      }

 // trigger notification, note that on ios if the app is open(in foreground) the notification will not show so you will need to find some ways to handling it which is discribed here https://docs.expo.io/versions/latest/guides/push-notifications

      Notifications
         .presentLocalNotificationAsync(localNotification)
         .catch((err) => {
            console.log(err)
         })


      BackgroundTask.finish()
})

class MyApp extends React.Component {

  async componentDidMount() {
    // allows the app to recieve notifications (permission stuff)
    this.registerForPushNotificationsAsync().then(() => {
      BackgroundTask.schedule()
    });

  }

  registerForPushNotificationsAsync = async () => {

    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    if (status !== 'granted') {
      return;
    }
    let deviceToken = await Notifications.getExpoPushTokenAsync()

  }



  render() {
    return <Text>Hello world</Text>
  }
}

对于第二个,想法是服务器应该具有某种cron作业的功能,该作业可以定期地,根据所有用户设备的不同时间/日期和存储在数据库中的药丸信息向所有用户设备发送通知。

用于博览会的服务器端实现的N.B可以将https://github.com/expo/expo-server-sdk-node用于node.js项目,此处列出了其他SDK:https://docs.expo.io/versions/latest/guides/push-notifications/

import React from 'react'; 
import { Notifications, Permissions, Constants } from 'expo';
import { Text, View } from 'react-native'

class App extends React.Component {

  registerForPushNotificationsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    // prevent device from registering more than once
    if (status !== 'granted') {
     return;
    }

    // get unique token of the device that the server can use to push notification to 
    the device
    let deviceToken = await Notifications.getExpoPushTokenAsync();

    // call a method that sends the device token to the server, in which server stores somewhere and uses in the future
    this.props.registerToken({ deviceToken }).then(() => {

     // the listener here, is called whenever a push notification comes from the server or when the user clicks on the notification at the device tray
      this.notificationSubscription = 
         Notifications.addListener(this.handleNotification);
    })
  }

  handleNotification = (notification) => {

    if (notification.origin === 'selected') {
      // The notification was clicked from the tray by the user i.e selected
      // do stuff to handle selection
    } else {
     // The notification originated from the server
      const localNotification = {
        title: notification.title,
        body: notification.message,
        data: data,
        ios: {
          sound: true
        }
      }
      Notifications.presentLocalNotificationAsync(localNotification).catch((err) => {
        console.log(err)
      })
    }

  }

  async componentDidMount() {

    this.registerForPushNotificationsAsync().then(() => {
    });

  }


  render() {
    return (
     <View>
       <Text>Helllo world</Text>
     </View>
    );
  }
}

请注意,这些解决方案尚未经过测试,可能包含一些错误,但是总体思路仍然相同,可以进行调整:)。

希望有帮助。