50547

Local Schedule Notification react native

<h3>Question</h3>

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 ?

thanks


<h3>Answer1:</h3>

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

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) 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.

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> } }

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.

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 :).

Hope it helps.

来源:https://stackoverflow.com/questions/56092937/local-schedule-notification-react-native

Recommend

  • Is there a way to “install” nuget package like the way Visual Studio does, but on a deployment serve
  • How do I write operator
  • Securing an ajax request
  • Python - Print Each Sentence On New Line
  • Xcode 4.5 Uploading a iPhone 5 app only
  • Parameterize the approver detail in Promoted Build Plugin in Jenkins
  • Implementing a logical shift right
  • Can the ResourceLocalService be called remotely via the JSON-WS API?
  • Using database with Store Locator on Google Maps API
  • conditional plot linetype in ggplot2
  • How is the size of TLB in Intel's Sandy Bridge CPU determined?
  • Having several issues with a Python service for Windows
  • Angular $resource is not working
  • Caching of Google Cloud Endpoints?
  • How to use Substring in SSIS
  • Facebook Comments on your website via Graph API instead of Comments plugin?
  • import cv2 doesn't give error on command-Prompt but error on IDLE on Windows 10, Python 3.6.4
  • How to get real term_meta using ACF with custom fields on taxonomy terms (instead of wp_options)
  • Appending spaces with str_pad
  • Static analysis of header inclusion in C++
  • Why dealing with Value is faster than with Reference for Struct?
  • Advertising Identifier for devices lower than iOS 6.0
  • Override all shipping costs for a specific shipping class in Woocommerce
  • Passing HTTP Post from AWS API GW to Lambda
  • How to implement Google Drive and Google Plus sdk in ios project
  • Query regarding com.jcraft.jsch.JSchException: UnknownHostKey: x.y.com. DSA key fingerprint is “ac:e
  • how to add dashed border on highcharts “area” graph for every point
  • Query takes almost two seconds but matches only two rows - why isn't the index helping?
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • Change the color of the legend text in forceNetwork for networkD3
  • Print Longitude and Latitude in textbox Android
  • iphone image to video issue in video speed
  • customize soft keyboard key preview
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web