What I am doing
I am creating a web form that is being used as a QR code to open an application installed in an android / IOS phone. When the user scans the QR code the phone shall run the web form and the web form will check if the application is installed inside the phone, if the application is installed, the web form will open the application, if not it will open the google play store/app store web page based on which OS system is being used.
My problem
Right now my problem is that I do not know what is the name/id of the application to trigger/open it, the only thing I about the app know is that it is called Rymtime inside the setting and also the home screen. The application's google play store link is at here and here for the app store.
PS. I do not own/create the application and do not have any access to modify its code.
What I have tried
I have tried to put its name directly into the code:
window.location = "Rymtime://";
I have also tried to put the "id" thingy found inside its google play store website "www...id=com.time2clock.wai.timeemployee"
window.location = "com.time2clock.wai.timeemployee://";
My Code
I created my code based on this stack overflow question.
Below is my code:
<body>
...
<button name="data1" type="button" onclick="getOS()">Click</button> //I use button to test out the function
...
</body>
<script type="text/javascript">
function getOS() {
var userAgent = window.navigator.userAgent,
platform = window.navigator.platform,
windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'], //as I do not own an Iphone I use this to test out the IOS part
iosPlatforms = ['iPhone', 'iPad', 'iPod'],
os = null;
if (iosPlatforms.indexOf(platform) !== -1) {
ios();
} else if (windowsPlatforms.indexOf(platform) !== -1) {
ios(); //as I do not own an Iphone I use this to test out the IOS part
} else if (/Android/.test(userAgent)) {
android();
}
}
function ios() {
setTimeout(function () { window.location = "https://apps.apple.com/my/app/rymtime/id1447217174"; }, 25);
window.location = "Rymtime://"; //I do not test this part because I do not own an Iphone an I am using window to see if the code is being executed, I only check if the website above is runned
}
function android() {
setTimeout(function () { window.location = "https://play.google.com/store/apps/details?id=com.time2clock.wai.timeemployee"; }, 25);
window.location = "Rymtime://"; //The application is not executed thus it redirect to the play store page.
}
</script>
Btw is the location of an application installed inside a phone the same as the others? Like this:
somefile\somefile\packageName
Or something like this:
Username(differ)\somefile\somefile\packageName
Thanks.
I am not sure what it is for IOS but I found out that I can just add &launch=true at the end of the URL of the application's google play store page to launch the app if it is installed.
We're developing an app using AngularJS, and when we're targeting Windows 8 I noticed that the generated Visual Studio project included WinJS as a reference. Since we're not using WinJS I simply removed the reference from the project.
Then I noticed that removing WinJS caused benign script load errors in the console when running the app. Further investigation showed that cordova.js automatically checks for WinJS, and if not included tries to include it (!). Here's the relevant code:
var onWinJSReady = function () {
var app = WinJS.Application;
var checkpointHandler = function checkpointHandler() {
cordova.fireDocumentEvent('pause',null,true);
};
var resumingHandler = function resumingHandler() {
cordova.fireDocumentEvent('resume',null,true);
};
app.addEventListener("checkpoint", checkpointHandler);
Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", resumingHandler, false);
app.start();
};
if (!window.WinJS) {
var scriptElem = document.createElement("script");
if (navigator.appVersion.indexOf("Windows Phone 8.1;") !== -1) {
// windows phone 8.1 + Mobile IE 11
scriptElem.src = "//Microsoft.Phone.WinJS.2.1/js/base.js";
} else if (navigator.appVersion.indexOf("MSAppHost/2.0;") !== -1) {
// windows 8.1 + IE 11
scriptElem.src = "//Microsoft.WinJS.2.0/js/base.js";
} else {
// windows 8.0 + IE 10
scriptElem.src = "//Microsoft.WinJS.1.0/js/base.js";
}
scriptElem.addEventListener("load", onWinJSReady);
document.head.appendChild(scriptElem);
}
else {
onWinJSReady();
}
I guess my main question is, should I just leave the WinJS reference "as is" and let Cordova load and initialize WinJS?
Could it potentially conflict with AngularJS or reduce the performance of the app in any way?
(I guess var app = WinJS.Application and app.start() in onWinJSReady makes me a bit worried).
Since the app seems to work fine without the WinJS script files, why is cordova.js so insistent on trying to include it?
cordova (and some cordova plugins, particularly the FileSystem plugin) use some features of WinJS, such as Promises and Ajax calls. We ended up forking cordova.js and stripping out all the WinJS stuff... makes the app load a lot faster!
We are stuck with an Adobe DPS project. We cant get our DPS android app to do Entitlement for our print subscribers and we were wondering if anyone out there has managed to get this right.
We've used Adobe's tutorial here:
http://www.adobe.com/devnet/digitalpublishingsuite/articles/library-store-combined-template.html, with isEntitlementViewer set to true.
The code asks for a username and password and then via Adobe's API AdobeLibraryAPI.js, it authenticates a user via our own API. the very same code is working 100% in the iPad version of the app.
The file that actually processes the login (called LoginDialog.js) contains the following code within a function called clickHandler (we’ve added a few javascript alerts to try debug the login process)
// Login using the authenticationService.
var transaction = adobeDPS.authenticationService.login($username.val(), $password.val());
alert("1: "+transaction.state ); //returns “1: 0”
transaction.completedSignal.addOnce(function(transaction) {
alert("2: "+transaction.state ); //never returns
var transactionStates = adobeDPS.transactionManager.transactionStates;
if (transaction.state == transactionStates.FAILED) {
$("#login .error").html("Authentication Failed.")
} else if (transaction.state == transactionStates.FINISHED){
this.$el.trigger("loginSuccess");
this.close();
}
alert("3: "+transaction.state ); //never returns
}, this);
alert("4: "+transaction.error ); //never returns
Anyone out there with some DPS/android/Entitlement experience?
Android Entitlement only works after an integrator ID is registered with Adobe, as the android viewers service routes are only configured via the integrator ID.
If you do not have an integrator ID, you need to acquire one from Adobe Support.
Also it is worth mentioning, that in contrary to iOS, Android DPS viewers only support one base Route/URL for Authentication and Entitlements.
For Example whereas in iOS you can have the login been done via the first URL:
https://example.com/api/v1/SignInWithCredentials
The second URL for entitlements can be on a different URL:
http://server2.example.com/v1/api/entitlements
In android both URLs have to be the same, e.g.:
https://example.com/api/v1/SignInWithCredentials and
https://example.com/api/v1/entitlements
I have a cordova ios app. I use the UUID frequently in my app but now its not working it gets stuck at the alert that displays it.
onDeviceReady: function() {
alert("On device Ready"); // Hits this and thats it
alert(device.window.uuid); //does not display this and does not go on
app.receivedEvent('deviceready');
},
as well as when I do:
alert(device.window.uuid);
var pushNotification = window.plugins.pushNotification;
Try this:
alert(device.uuid);
http://docs.phonegap.com/en/3.3.0/cordova_device_device.md.html#device.uuid
If that doesn't work and you are building locally, make sure to run:
cordova plugin add org.apache.cordova.device
Is it possible to detect if the user is accessing through the browser or application using JavaScript?
I'm developing a hybrid application to several mobile OS through a web page and a PhoneGap application and the goal would be to:
Use the same code independently of the deployment target
Add PhoneGap.js file only when the user agent is an application
You could check if the current URL contains http protocol.
var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
// PhoneGap application
} else {
// Web page
}
Quick solution comes to mind is,
onDeviceReady
shall help you. As this JS call is invoked only by the Native bridge (objC or Java), the safari mobile browser will fail to detect this. So your on device app(phone gap) source base will initiate from onDeviceReady.
And if any of the Phonegap's JS calls like Device.platform or Device.name is NaN or null then its obviously a mobile web call.
Please check and let me know the results.
I figured out a way to do this and not rely on deviceready events thus, keeping the web codebase intact...
The current problem with using the built in deviceready event, is that when the page is loaded, you have no way of telling the app: "Hey this is NOT running on an mobile device, there's no need to wait for the device to be ready to start".
1.- In the native portion of the code, for example for iOS, in MainViewController.m there's a method viewDidLoad, I am sending a javascript variable that I later check for in the web code, if that variable is around, I will wait to start the code for my page until everything is ready (for example, navigator geolocation)
Under MainViewController.m:
- (void) viewDidLoad
{
[super viewDidLoad];
NSString* jsString = [NSString stringWithFormat:#"isAppNative = true;"];
[self.webView stringByEvaluatingJavaScriptFromString:jsString];
}
2.- index.html the code goes like this:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){;
myApp.run();
}
try{
if(isAppNative!=undefined);
}catch(err){
$(document).ready(function(){
myApp.run();
});
}
PhoneGap has window.PhoneGap (or in Cordova, it's window.cordova or window.Cordova) object set. Check whether that object exists and do the magic.
Inside the native call where the url for the phonegap app is loaded you add a parameter target with value phonegap. So the call for android becomes something like this.
super.loadUrl("file:///android_asset/www/index.html?target=phonegap");
Your website using this code won't be called with the extra parameter, so we now have something different between the two deploying platforms.
Inside the javascript we check if the parameter exists and if so we add the script tag for phonegap/cordova.
var urlVars = window.location.href.split('?');
if(urlVars.length > 1 && urlVars[1].search('target=phonegap') != -1){
//phonegap was used for the call
$('head').append('<script src="cordova.js"></script>');
}
A small caveat: this method requires to change the call to index.html in phonegap for each different targeted mobile platform. I am unfamiliar where to do this for most platforms.
what if you try following :
if(window._cordovaNative) {
alert("loading cordova");
requirejs(["...path/to/cordova.js"], function () {
alert("Finished loading cordova");
});
}
I am using the same code for both phonegap app and our web client. Here is the code that I use to detect if phonegap is available:
window.phonegap = false;
$.getScript("cordova-1.7.0.js", function(){
window.phonegap = true;
});
Keep in mind that phonegap js file is loaded asynchronously. You can load it synchronously by setting the correct option of a nifty jquery $.getScript function.
Note that approach does make an extra GET request to grab phonegap js file even in your webclient. In my case, it did not affect the performance of my webclient; so it ended up being a nice/clean way to do this.Well at least until someone else finds a quick one-line solution :)
It sounds like you are loading another webpage once the webview starts in the Phonegap app, is that correct? If that's true then you could add a param to the request url based on configuration.
For example, assuming PHP,
App.Config = {
target: "phonegap"
};
<body onload="onbodyload()">
var onbodyload = function () {
var target = App.Config.target;
document.location = "/home?target=" + target;
};
Then on the server side, include the phonegap js if the target is phonegap.
There is no way to detect the difference using the user agent.
The way I'm doing it with is using a global variable that is overwritten by a browser-only version of cordova.js. In your main html file (usually index.html) I have the following scripts that are order-dependent:
<script>
var __cordovaRunningOnBrowser__ = false
</script>
<script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
<script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->
And inside cordova.js I have simply:
__cordovaRunningOnBrowser__ = true
When building for a mobile device, the cordova.js will not be used (and instead the platform-specific cordova.js file will be used), so this method has the benefit of being 100% correct regardless of protocols, userAgents, or library variables (which may change). There may be other things I should include in cordova.js, but I don't know what they are yet.
Ive ben struggling with this aswell, and i know this is an old thread, but i havent seen my approach anywhere, so thought id share incase itll help someone.
i set a custom useragent after the actual useragent :
String useragent = settings.getUserAgentString();
settings.setUserAgentString(useragent + ";phonegap");
that just adds the phonegap string so other sites relying on detecting your mobile useragent still works.
Then you can load phonegap like this:
if( /phonegap/i.test(navigator.userAgent) )
{
//you are on a phonegap app, $getScript etc
} else {
alert("not phonegap");
}
To my mind you try to make issue for self. You didn't mentioned your development platform but most of them have different deployment configuration. You can define two configurations. And set variable that indicates in which way code was deployed.
In this case you don't need to care about devices where you deployed your app.
Short and effective:
if (document.location.protocol == 'file:') { //Phonegap is present }
Similar to B T's solution, but simpler:
I have an empty cordova.js in my www folder, which gets overwritten by Cordova when building. Don't forget to include cordova.js before your app script file (it took my one hour to find out that I had them in wrong order...).
You can then check for the Cordova object:
document.addEventListener('DOMContentLoaded', function(){
if (window.Cordova) {
document.addEventListener('DeviceReady', bootstrap);
} else {
bootstrap();
}
});
function bootstrap() {
do_something()
}
New solution:
var isPhoneGapWebView = location.href.match(/^file:/); // returns true for PhoneGap app
Old solution:
Use jQuery, run like this
$(document).ready(function(){
alert(window.innerHeight);
});
Take iPhone as example for your mobile application,
When using PhoneGap or Cordova, you'll get 460px of WebView, but in safari, you'll lose some height because of browser's default header and footer.
If window.innerHeight is equal to 460, you can load phonegap.js, and call onDeviceReady function
Nobody mentioned this yet, but it seems Cordova now supports adding the browser as a platform:
cordova platforms add browser
This will automatically add cordova.js during run-time, which features the onDeviceReady event, so that you do not need to fake it. Also, many plugins have browser support, so no more browser hacks in your code.
To use your app in the browser, you should use cordova run browser. If you want to deploy it, you can do so using the same commands as the other platforms.
EDIT: forgot to mention my source.
Solution: Patch index.html in Cordova and add cordova-platform="android" to <html> tag, so that cordova-platform attribute will be only present in Cordova build and missing from original index.html used for web outside of Cordova.
Pros: Not rely on user agent, url schema or cordova API. Does not need to wait for deviceready event. Can be extended in various ways, for example cordova-platform="browser" may be included or not, in order to distinguish between web app outside of Cordova with Cordova's browser platform build.
Merge with config.xml
<platform name="android">
<hook src="scripts/patch-android-index.js" type="after_prepare" />
</platform>
Add file scripts/patch-android-index.js
module.exports = function(ctx) {
var fs = ctx.requireCordovaModule('fs');
var path = ctx.requireCordovaModule('path');
var platformRoot = path.join(ctx.opts.projectRoot, 'platforms/android');
var indexPath = platformRoot + '/app/src/main/assets/www/index.html';
var indexSource = fs.readFileSync(indexPath, 'utf-8');
indexSource = indexSource.replace('<html', '<html cordova-platform="android"');
fs.writeFileSync(indexPath, indexSource, 'utf-8');
}
Notes: For other than android, the paths platforms/android and /app/src/main/assets/www/index.html should be adjusted.
App can check for cordova-platform with
if (! document.documentElement.getAttribute('cordova-platform')) {
// Not in Cordova
}
or
if (document.documentElement.getAttribute('cordova-platform') === 'android') {
// Cordova, Android
}