I am really struggling to add push notification support to my Ionic application. My current issue is related to the documentation, which states that I need to add a cordova push plugin (which I have) and then to add the following event handler:
this.push.on('notification', function (data) {
// do something with the push data
// then call finish to let the OS know we are done
push.finish(function () {
console.log("processing of push data is finished");
}, function () {
console.log("something went wrong with push.finish for ID = " + data.additionalData.notId)
}, data.additionalData.notId);
});
However, I am getting an on property not found the error. How do I fix this issue?
That's correct. The browser outputs that this.push.on is not a function. Probably has to do with the browser not supporting Push and it's native capabilities.
However, using it in your mobile applicationw ill work just fine. If you want to make the error go away because it is confusing you could check on which OS the user currently is or check if he has cordova.
This can be done by wrapping your push.on in a if(this.platform.is('cordova')){} or if(platform.is('cordova')) (not sure about the this.) Source: How to detect if I am in browser (local development) in Ionic 2
Related
I'm using Phonegap Cordova and have an iOS app and web app that sync information to each other, the problem I'm having though is that if the user has the iOS open on their device, but minimized, the data doesn't update realtime. So if they add something on the web app and look at the iOS app the changes wouldn't have been made on the iOS side so they'd have to close the app and relaunch. This isn't very user friendly.
Would anyone have any advice how to fix this? Perhaps refresh the app every time they open, or scroll up to refresh manually?
Any help would be great! Thank you.
use this plugin :
cordova-plugin-background
and in index use this code for refrech the app
document.addEventListener('deviceready', function () {
cordova.plugins.backgroundMode.enable();
cordova.plugins.backgroundMode.onactivate = function () {
setInterval(function () {
location.reload();
}, 10000);
}
}, false);
you app it' well refrech in backround every 10000 second you can change the time
You definitely have a few options here:
You can use Cordova's resume event which should fire when the user brings the app back to the foreground (at least I think that's what it does, I haven't used that event myself)
If it applies to your use case, you could use the push plugin to push data to your device and trigger updates
A manual slide down to refresh would also be good, maybe even on top of the options above
I currently have an ionic app, which uses the following plugin: https://github.com/jeduan/cordova-plugin-facebook4 so that users can login to my app using the Facebook SDK, and so that I can track certain custom events, using the logEvent method.
Since it is an ionic app, I have a iOS and an Android build of the app. The custom events are working as expected on the Android platform. The strange thing is that in iOS, when an event is fired, I can clearly see the success event handler being called, indicating success, however, going to the Facebook analytics, I can clearly see that no custom event data is being saved. It tracks the usual app opens etc, it's just that custom events don't seem to be getting recorded for iOS.
Just to be clear any of this logging happens after the user has already logged in, I have heard it only works for iOS if you are authenticated with FB first.
So I have a generic function first:
$scope.fbLogEvent = function(eventName, params, valueToSum) {
if (valueToSum == null) {
valueToSum = 1;
}
if (!ionic.Platform.is('browser')) {
return facebookConnectPlugin.logEvent(eventName, params, valueToSum, function(success) {
return console.info('FB', eventName, 'event has been logged');
}, function(error) {
return console.error(error);
});
}
};
I then call the following function to do the actual tracking
$scope.fbLogEvent('item-requested', { item: $scope.item });
It works perfectly on Android
When I add an item on iOS (using Safari developer logging on the app running on my phone), I can see that the success function is called, because it logs the following message: FB item-requested event has been logged.
I have tested this with the latest version of the plugin (just to be sure), but that did not seem to make a difference.
UPDATE 3/3/2017 - for what it's worth, it does seem to pickup these events if they predefined events, as opposed to custom events.
EDIT: DEAR PEOPLE FROM THE FUTURE, trey-jones has fixed this issue by implementing setLoginBehavior, FBSDKLoginNative seems to have issues on FB's end not with the module.
Environment:
MacOS X 10.10.5
Ti SDK 5.1.1.GA - 5.1.2.GA
iOS 9.2
Ti.Facebook 5.0.0 - 5.0.1
My project settings (tiapp.xml) are fine (it works on every other case on both iOS and Android).
Code I'm using to invoke the login:
var fb = require('facebook');
fb.initialize();
fb.authorize();
If the Facebook app is installed to the device the fb.authorize() doesn't open up. I did not see any iOS system level messages when this happened either.
Has anyone else had luck using fb.authorize with the new sdk on iOS devices WITH the app installed. With no fb app on the system it correctly opens the browser based view.
EDIT: I have managed a workaround for this (it is not pretty) based on the fact that login works with AppC's KitchenSink.
The workaround is to add a Ti.FB loginButton to the code, doesn't matter if its not visible, initializing this will fix whatever is causing custom login's .authorize() to not work.
//Workaround button:
if(OS_IOS){
var fbHaxBtn = fb.createLoginButton({
readPermissions: ['email'],
visible: false
});
}
//It needs to be added to the window/doesn't need to be visible though
$.login_window.add(fbHaxBtn);
//Then in our custom button's code, we can fire as normal:
function doLoginClick{
fb.initialize(); //I was having unexpected issues dropping this line on Android, although the docs say its deprecated.
fb.authorize();
}
Will keep this ticket updated if/when this thing gets a formal fix.
This is my second answer on this question. I believe that my original answer offers some value to the conversation and that is why I am leaving it, but it still did not consistently solve the problem of the facebook authorization not working.
The consistent solution turned out to be modifying the official Ti.Facebook module. I will submit a pull request for this change (1 line), but for now, you can get the working module here:
Source
Pre-built
This consistently allows users to authorize by explicitly setting the login behavior to use the browser, rather than the native facebook app through fast app-switching. This is actually the intent of Facebook's developers.
I was unable to determine what is causing it to fizzle when trying to use the native app to login - it should try the next option, which is the browser - but this works, and doesn't require a TiFacebookButton either.
I hope it helps someone else!
EDIT: This answer does not solve the original question. I have left it here in case it helps with related difficulties using the Ti.Facebook module. See my other answer, to actually solve the problem. END EDIT
I commented above, but after doing so encountered some more strange behavior, with the result being that I could not reliably use the workaround given (fbHaxButton). I want to explain what was happening in my case, and show my own workaround (which is also not pretty). It's possible that the root cause is the same for both of us.
I have not bothered with Android yet, so this answer is specific to iOS.
When I started this process, I came to the conclusion that authorize was correctly opening the facebook website in safari to allow authorization, but was not firing the login event upon returning. To handle this I had already implemented the following:
facebook = require('facebook');
Ti.App.addEventListener('resumed', function (e) {
var launchOptions = Ti.App.getArguments();
if(!launchOptions.url) {
return console.warn('Ignoring resume event with no url argument.');
}
// this lib = https://github.com/garycourt/uri-js
var URI = require('vendor/uri'),
uriComponents = URI.parse(launchOptions.url),
expectedScheme = 'fb',
expectedHost = 'authorize';
// I would like to be more specific about the uri, but we are limited
// in Titanium, and this will allow us to pretty certain
// that FB is sending us back to our app
if(uriComponents.scheme.search(expectedScheme) < 0 || uriComponents.host !== expectedHost) {
return console.warn('Resume event received, but scheme is incorrect. Ignoring.');
}
// synthesize login event
facebook.fireEvent('myapp:login', {
success: 1,
token: facebook.getAccessToken(),
uid: result.id
});
});
facebook.addEventListener('myapp:login', function onFacebookAuth(e) {
facebook.removeEventListener('myapp:login', onFacebookAuth);
if(!e.success) {
// do fail action
}
// do success action
});
facebook.initialize();
facebook.authorize();
So, originally I was firing and listening for an event called 'login', which the facebook module supposedly (according to the docs) will fire after authorization is complete.
In my case, this event was being fired while my app was in the background, after authorize was called, but before the user actually clicked 'OK' in facebook. My listener would respond to this event (logging, etc), but seemed to occur in a separate thread, or somehow otherwise become disconnected from my app, as it never passed its result along to the UI. I am using Q.js (kriw-kowal) and I belive this is where the disconnect is occuring.
Ceasing to listen to 'login', and simply handling my own synthesized event has fixed my issue.
I felt that this was very difficult to explain. If you have feedback about that, and how I can be more clear about what I believe is happening, or if you believe that I have reached wrong or incomplete conclusion, let me know - I'll try to update this answer to be better.
I am currently working on a small app project to learn and try out react-native on iOS. I have some experience with parse (parse.com) and would love to integreate parse in the new app. Currently, I have no problems including parse js into react-native. I am able to log in with accounts etc. Now I need to send push notifications to a certain number of users (not all users).
What I don't understand is how push notifications should work with react-native and parse. Usually, I would connect a device installation with a user ID and then send a push to a certain number of users (which means to the devices with the corresponding installation). The react-native guide (https://facebook.github.io/react-native/docs/pushnotificationios.html#content) doesn't mention anything like that. And even though it gives the parse guide as a reference, I fail to see how I should be able to send pushes via parse. The guide leaves a lot of information to be desired too. To what source do these "Listeners" subscribe to? From which server am I going to send notifications etc?
As I understand, parse js is not able to read the current installation. I hesitate to add Parse iOS to the project too. This feels unnatural and shouldn't be a required thing to do although it would allow me to read the current installation. (but still parse js is not able to register that installation in order to subscribe to push notifications).
At this point, I feel a little bit lost. This piece of information (https://news.ycombinator.com/item?id=9271687) tells me that it should be possible somehow. I just can't figure out how :(
Hope someone can help me with that. Some advice would be truely appreciated.
EDIT: react-native implements this behavior by default now. The interesting part is the event listener for the register event which now returns the device token. Procedure is pretty straight forward now. Just have a look at the docs Also check out the answer by JWindey. Has some very important points in them that are needed to actually trigger the events.
After a while and a lot of trying things out, we came up with an answer today. This is our solution and it seems to be working pretty good.
We use the following resources:
react-native
parse-js
Parse Rest API
react-native-remote-push (https://github.com/darylrowland/react-native-remote-push)
Follow the parse guide for push notifications (https://parse.com/tutorials/ios-push-notifications) and get everything set up correctly (profiles, certificates etc.). Using the react-native-remote-push component later on, you don't have to follow the steps 5 and 6.
Now add react-native-remote-push to you project. We had to make some minor adjustments to the code (mainly dealing with legacy objC code), but that may depend on your own project.
Our project has some kind of "starting page" that is shown every time the app is opened. On this page, we deal with push notification permissions as well as with the registration of the device token and the listener for push notifications. Our goal is to mimic the same behavior that we would receive with the parse iOS SDK.
We need to register the device and subscribe to a push channel first. react-native-remote-push allows us to handle the permissions and receive a device token. We then proceed to use this device token to register this installation via the Rest API. This code is part of our componentDidMount() call.
var PushManager = require('./RemotePushIOS');
var registerInstallation = require('./Installation');
componentDidMount() {
PushManager.requestPermissions(function(err, data) {
if (err) {
console.log("Could not register for push");
} else {
registerInstallation({
"deviceType": "ios",
"deviceToken": data.token,
"channels": ["global"]
});
}
});
PushManager.setListenerForNotifications(this.receiveRemoteNotification);
}
PushManager is the required component from react-native-remote-push and registerInstallation is the function containing the Rest API call.
/**
* registers an installation
* data should look like the following:
* {
* "deviceType": "ios", // or "android"
* // if android is targeted set
* // "pushType": "gcm",
* // "GCMSenderId": "56712320625545", // whatever the later means
* "deviceToken": "29e32a686fd09d053e1616cb48",
* "channels": [
* ""
* ]
* };
* for more information visit:
* https://www.parse.com/docs/rest#installations-uploading
*/
var registerInstallation = function(data) {
var url = "https://api.parse.com";
url += "/1/installations";
fetch(url, {
method: 'post',
headers: {
'Accept': 'application/json',
'X-Parse-Application-Id': PARSE_APP_ID,
'X-Parse-REST-API-Key': PARSE_REST_KEY,
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(processStatus)
.then(parseJson)
.catch(error);
};
module.exports = registerInstallation;
"processStatus", "parseJson" and "error" are just some small functions that handle the result of the API call. I can provide more details if necessary. This function allows us to add a lot of information via the "data" object, such as userid, app version, parse version etc., just as you're used to from the iOS SDK. We only have a basic example working right now, but it should be easy to extend on this basis. This step was very important for us, because we need to associate every installation with a certain user.
You should be able to receive push notifications by now. You can handle them in a "receiveRemoteNotification" function that acts as a listener. A basic function is provided on the website of the react-native-remote-push component.
I hope I could share some insight about this topic. If I should go into more detail on certain parts, I'll gladly add some more information.
I did some investigation with the Parse + react-native combination and have it working.
You have to add the Parse SDK (follow the guide) to your project, and link all the necessary libraries.
Don't forget to add the steps on point 5: https://parse.com/tutorials/ios-push-notifications.
Then add RCTPushNotificationManager.h + m (from react-native/Libraries) to your project. After that, add the following in AppDelegate.m:
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
[[NSNotificationCenter defaultCenter] postNotificationName:#"RemoteNotificationReceived"
object:self
userInfo:userInfo];
}
That should do it.
The official PushNotificationIOS has register event, which we can obtain token from. So, with having #MrMuetze's REST API, I could install the device to Parse.
PushNotificationIOS.addEventListener('register', function(token){
registerInstallation({
"deviceType": "ios",
"deviceToken": token,
"channels": ["global"]
})
});
What is the best practise for telling your application to close when hosting it with Trigger.IO?
I want a button on the front to exit the application... I heard that for Android navigator.app.exitApp(); works, but got an error saying exitApp() didnt exit, but am hoping there is a more cross browser solution.
You can use forge.event.backPressed to listen for back button presses, and optionally quit the app there. E.g.:
forge.event.backPressed.preventDefault(function () {
forge.event.backPressed.addListener(function (closeMe) {
closeMe(); // this closes the app
});
});
James posted the documented method of closing the app, but the internal method can also be called like this:
forge.internal.call('event.backPressed_closeApplication');
This method is confirmed to work on Android, unsure whether it will work on iOS.