本地计划通知反应原生 [英] Local Schedule Notification react native

问题描述

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

I am new to React Native i'm trying to implement a functionality where the app sends to user everyday at a certain period of dates and times a notifications to remind users to take pills ( times and dates and data are stored in mongodb server so i'll be using axios to fetch them ) can notifications still works if app is closed or in the background ? is it easy to make it work ? Does anyone know of a way to achieve this , is it possible ?

谢谢

推荐答案

是的！！！这个有可能.您有很多选择，其中包括:

Yes!!! This is possible. You have many options which includes:

1) 为 iOS 和 Android 中的 HeadlessTask 使用 background-fetch，这是一个不错的库https://github.com/jamesisaac/react-native-background-task

1) Use a background-fetch for iOS and HeadlessTask in Android, here is a decent library https://github.com/jamesisaac/react-native-background-task

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

2) Push notifications from a server to ensure deterministically that the app wakes app (except it having been killed by the OS). In iOS, ensure that you call notification.finish() to avoid being discriminated by the task handler algorithm.

No 1 的简单示例如下所示(未测试！！):

A Simple example for no 1 goes like this (NOT TESTED!!):

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 作业一样定期根据存储在数据库中的不同时间/日期和药丸信息向所有用户设备发送通知.

For the second one, the idea is somehow the server should have like a cron job that periodically, sends notification to all user devices based on their different timings/date and pills information stored in the database.

NB 对于 expo 的服务器端实现，你可以使用 https://github.com/expo/expo-server-sdk-node 用于 node.js 项目，其他 sdk 在此处列出:https://docs.expo.io/versions/latest/guides/push-notifications/

N.B for the server side implemention for expo u can use https://github.com/expo/expo-server-sdk-node for node.js projects, other sdks are listed here: 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>
    );
  }
}

请注意，这些解决方案尚未经过测试，可能包含一些错误，但总体思路保持不变，可以进行调整:).

Please Note that these solutions have not been tested and may contain some bugs, but the general idea remains the same and can be tweaked :).

希望对你有帮助.

这篇关于本地计划通知反应原生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！