Forum | Appery.io

I have a toggle control for subscribing to push notifications and I want to only display it if the user is running the native mobile app.

I have tried the following:

code
if (typeof cordova == "undefined") {
Apperyio("tglSubscribe").hide();
}
/code

and (with the toggle control set to not visible):

code
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
Apperyio("tglSubscribe").show();
} else {
Apperyio("tglSubscribe").hide();
}
/code

here's logic I use to determine if a device is mobile - it mostly works:

function fisMobile() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}

and then -

if ( fisMobile() ) { do something } else { do something else }

Thanks Bruce, I'll give this a go.

This doesn't seem to work for me I'm afraid. What I've done is to set the toggle control to be hidden (visible unchecked) in the design view. Then in a page show event I tried Bruce's code as follows:

code
function fisMobile() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}

if ( fisMobile() ) {
Apperyio("tglSubscribe").show(); }
/code

Hello Louis,

First please add this at init() of the page:
pre$scope.isRunningOn = new DeviceChecker();

function DeviceChecker() {

 function Android() { 
     return navigator.userAgent.match(/Android/i); 
 } 

 function BlackBerry() { 
     return navigator.userAgent.match(/BlackBerry/i); 
 } 

 function iOS() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
 } 

 function Any() { 
     return (!Android() || !BlackBerry() || !iOS()); 
 } 

 return { 
     android: Android, 
     blackberry: BlackBerry, 
     ios: iOS, 
     any: Any, 
 }; 

}/pre
And on the targeting control add: pre{ ng-if = isRunningOn.android(); // or whatever device you want./pre

Thanks. Forgive my ignorance Evgene, but:

1. When you say add at the init() of the page, what do you mean? I thought perhaps you meant an initialise event but I can't find one in the list of events.

2. When you say add ng-if ... on the targeting control, do you mean on the control that I want to make visible only on mobile and is ng-if = isRunningOn.android(); all that I need to do there?

3. Can I do ng-if = isRunningOn.Any(); so that it works for any mobile app?

4. Do I need to make the control invisible by default (in design mode)?

   Sorry for all the questions - it's because I don't understand the code I guess.

   Thanks again.

Hello Louis,

Do you use JQM or AngularJS project?

1. This is function which is set in the ng-init attribute
2. Yes, it would be visible if function returns true
   3.Yes, tou can. Just add function Any, which returns "true" value
3. No, you don't need

Sergiy, my app is a JQM app. Does Evgene's answer apply to a JQM app or just to ANgularJS?

Evgen gave you an answer about AngularJS.

Please use the simplest solution to detect, is it a native app, or a web app:

prevar isPhoneGapApp = function() {
return (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1);
};/pre

This function returns true if it is a native app.

Thanks Sergiy. I assume I should then be able to do "If isPhoneGapApp = true ..."