I'm a native Android/iOS dev new to ionic capacitor and javascript in general. I'm trying to send data from Android's OnNewIntent callback to the ionic-react project I'm working on. I'm doing this in the native MainActivity.java that extends BridgeActivity:
#Override
protected void onNewIntent(Intent intent) {
super.onNewIntent(intent);
getBridge().triggerDocumentJSEvent("MyEvent","blah");
}
And in my App.tsx file, I have something like this:
const App: React.FC = () => {
const onMyEvent = (input: string): void => {
console.log('event received: ${input}');
};
useEffect(() => {
document.addEventListener('MyEvent', () => {
console.log('MyEvent document');
onMyEvent(it.name);
});
window.addEventListener('MyEvent', () => {
console.log('MyEvent window');
onMyEvent(it.name);
});
}, []);
but I can't for the life of me get a message through from the native Activity to the App.tsx file. I've tried delaying the trigger for up to 15 seconds after the Activity is resumed to make sure everybody is instantiated, but I still never see indication that the message has been received. Is there an easy way to communicate from the native layer to the capacitor layer that I'm missing? Is it that these early Android lifecycle events happen before the ionic listeners have a chance to register? Just trying to send startup data that only the native side knows to the ionic side before rendering the first screen.
Thanks!
Scott
Related
I just learned about notifications in the expo, now I have successfully sent notifications and I have also managed to get data from the notifications I sent, the problem is, if the application is in background or foreground, addNotificationResponseReceivedListener is working properly (redirect to another page), but if I close the application, and I receive a notification, then I press the notification, the application opens but the addNotificationResponseReceivedListener function is not running, I try this in a standalone application
what i’m using:
“expo”: “~40.0.0”,
“expo-notifications”: “^0.9.0”,
here’s my example code in Home.js:
componentDidMount() {
//another code..
Notifications.addNotificationResponseReceivedListener(
this._handleNotificationResponse
);
}
_handleNotificationResponse = (response) => {
console.log(
"CONSOLE FROM NOTIF: " +
JSON.stringify(response.notification.request.content.data.from)
);
if (response.notification.request.content.data.from== "GEMASS") {
this.props.navigation.navigate("goToPage", {
//another code...
});
} else {
}
};
here’s my file tree:
App.js
Components
- Home.js
and here’s my terminal looks like when i run on expo client:
clickme
can you guys help me? it means a lot :)
I have an Ionic 3 App that needs to use Force Update to all users of the App. I used this package called Ionic App Update. I created an small express server that will just serve the client for an updates.
Here is my code in my update.xml in the server or backend
<update>
<version>0.0.2</version>
<name>MyApp</name>
<url>http://192.168.214.27:3346/public/android-debug.apk</url>
</update>
and in my server.js
const express = require('express')
const app = express()
app.use('/public', express.static('public'))
app.get('/', (req, res) => {
shell.exec('./update.sh')
})
app.listen(3336, () => {})
The server is working fine there is no errors
But when I try to call the function of the App Update plugin the device crashes every time.
Here is my code in my app.component.ts
constructor() {
this.update()
}
update() {
console.log('Update check')
const updateUrl = 'http://192.168.214.27:3346/public/update.xml';
this.appUpdate.checkAppUpdate(updateUrl).then(() => { console.log('Update available') }).catch(err => {
console.log(err)
console.log('No update')
});
}
I am calling the update function every time the app component constructor is initialize.
But when I call the function the app crashes
Is this more of an android version issue or what?
Appreciate if someone could help.
Thanks in advance.
This line <version>0.0.2</version> seems to be the problem. This isn't the format for android version numbers. As per cordova's documentation it is
Expressed in major/minor/patch notation.
For example version 30.20.48 would be written as 302048.
Read More:
config.xml - https://cordova.apache.org/docs/en/latest/config_ref/
Android Platform Guide - https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-the-version-code
How to implement wait for screen elements load in ionic 2 hybrid mobile application using protractor.
As I am testing the IONIC Mobile application and not able to use wait without browser.sleep(), Because browser instance is not working in application.
Please help me to resolve this issue.
It's been a while, but I've had some success testing Ionic with Protractor with the following helper method:
waitForIonic: function () {
//Register a promise with protractor, so the browser waits for it
var deferred = protractor.promise.defer();
let clickBlock = element(by.css('.click-block-active'));
//if there's a click block, wait for it to be gone, otherwise just wait 1 sec
if (clickBlock.isPresent()) {
var untilClickBlockIsGone = ExpectedConditions.not(ExpectedConditions.visibilityOf(clickBlock));
browser.wait(untilClickBlockIsGone, 20000).then(() => {
browser.driver.sleep(1000);
//We've fulfilled the promise, so
deferred.fulfill();
});
}
else {
browser.driver.sleep(1000);
//We've fulfilled the promise, so
deferred.fulfill();
}
//Return the promise (which hasn't been fulfilled yet)
return deferred.promise;
}
Then use it like so:
//Wait for ionic animiations, Click logout
module.exports.waitForIonic().then(() => {
logoutButton.click();
});
We have been happily developing our app using Service Workers because of the ease of building an offline app.
It's registered in the usual way:
navigator.serviceWorker.register( "./worker.js" ).then( function () {
console.log( "woohoo!" );
}, function ( err ) {
console.log( "oh noes", err );
});
And it is actually quite simple:
self.addEventListener( "install", function () {
console.log( "yay" );
});
It works fine while developing in the desktop browser, behind a web server.
But is there a way to use it while in Cordova/Crosswalk, as they use the file protocol?
Is there any way to create a background service with react-native on android?
I would like some sort of timer that wakes up every hour or so, and launches a simple javascript task.
Yes, It can be done.
React native operates on top of the native (java/Objc) to JS bridge with a concept of "native" and JS modules (modules can have methods that you may call from the "other" side of the bridge). All the UI stuff is built on top of the bridge (the main "native" module that handles generating views is called "UIManager"). It is possible to use bridge directly the only restriction is that the communication has to be asynchronous.
You can call the javascript function from the JAVA code. Check this link for the documentation.
Absolutely. In fact it's quite easy now to achieve this entirely in JS (no need to write native code) cross platform with react native queue and react native background task.
There are some limitations. The background task will only be fired roughly every 15 minutes at smallest intervals (and the timing isn't guaranteed to be perfect if it even fires at all - the iOS/Android scheduler is sort of a black box that looks at battery life, current cpu load, etc, when determining when to fire a scheduled task). Also the task is limited to 30 seconds of execution.
I've written a tutorial on how to set all this up here.
Let me know if you have any difficulty getting it up and running.
Release v0.36 support headless-js, only Android, for now.
https://facebook.github.io/react-native/docs/headless-js-android.html
It's Working in my case user the react-native-background-job library for running a background service. It's working after the kill the app.
https://github.com/vikeri/react-native-background-job
import BackgroundJob from "react-native-background-job";
const regularJobKey = "regularJobKey";
BackgroundJob.register({
jobKey: regularJobKey,
job: () => {
console.log('Background Service Call!');
}
});
<TouchableHighlight
onPress={() => {
BackgroundJob.schedule({
jobKey: regularJobKey,
period: 2000
});
}}
>
<Text>Schedule regular job</Text>
</TouchableHighlight>
Example Here : https://github.com/vikeri/react-native-background-job/blob/master/example/index.android.js
Try to use react-native-background-actions, it's very great service even for iOS and they are providing the ProgressBar feature as well.
yarn add react-native-background-actions
or npm:
npm install --save react-native-background-actions
A short code snippet of how to use it.
import BackgroundService from 'react-native-background-actions';
// You can do anything in your task such as network requests, timers and so on,
// as long as it doesn't touch UI. Once your task completes (i.e. the promise is resolved),
// React Native will go into "paused" mode (unless there are other tasks running,
// or there is a foreground app).
const veryIntensiveTask = async (taskDataArguments) => {
// Example of an infinite loop task
const { delay } = taskDataArguments;
await new Promise((resolve) => {
for (let i = 0; BackgroundService.isRunning(); i++) {
console.log(i);
await sleep(delay);
}
});
};
const options = {
taskName: 'Example',
taskTitle: 'ExampleTask title',
taskDesc: 'ExampleTask description',
taskIcon: {
name: 'ic_launcher',
type: 'mipmap',
},
color: '#ff00ff',
linkingURI: 'yourSchemeHere://chat/jane', // See Deep Linking for more info
parameters: {
delay: 1000,
},
};
await BackgroundService.start(veryIntensiveTask, options);
await BackgroundService.updateNotification({taskDesc: 'New ExampleTask description'}); // Only Android, iOS will ignore this call
// iOS will also run everything here in the background until .stop() is called
await BackgroundService.stop();