I have created a phone gap app by just passing the url of my developed website into my PhoneGap project but in the app addressbar is coming want to remove that
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open('http://hitchmeright.com', '_self ', 'location=yes');
}
</script>
Your app is likely opening the url in the InAppBrowser. From the InAppBrowser docs:
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
So you need to whitelist your url.
Now that said, this is not a good design for a PhoneGap application, and will likely provide a terrible user experience. You're treating PhoneGap as a browser rather than a hybrid app. You should build your PhoneGap app properly (package your web assets and load them locally), and only load data from the server as needed. I'd recommend doing a bit more research and checking out some example apps.
Related
We share the App deeplinks (Universal links) with our users over email, sometimes they get wrapped by email service providers for safety.
When user taps on these wrapped deeplinks, instead of opening the App directly it opens the url in Safari.
We have a page hosted on that url. We capture the deeplink there and try to open the App using Custom URL scheme (myurlscheme://). But if the App is not installed, we try to redirect the user to the App Store page.
It all worked okay until now, but seems like Apple made some changes in Safari in the new versions of iOS (>12.3).
What’s happening now is, if the App is installed and we open the App from Safari (from Custom URL), the App Store page opens in a split second after opening our App.
This is the Javascript code that we are using:
window.location.href = 'myurlscheme://';
setTimeout(function() {
window.location.href = "https://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
}, 500);
Is anyone else experiencing this. If yes, were you able to find any solution?
Update:
If we set the timeout to 4000 (i.e. 4 seconds), then it does not redirect to the App Store after launching the App.
I am using cordova-plugin-wkwebview-engine in a phonegap app to open a web page:
ref = window.open(url, '_self', 'location=no,toolbar=no');
All is working fine thus far, page displays properly, iOS log says the app is using wkWebView, and the display is much faster than when using UIWebView.
I want to send a postmessage from the page in the WkWebView and handle the message in my index.js running on the device. From the WkWebView issues pages, I copied the following code into the webpage:
<button type="button" name="button" onclick="sayHello()">Say hello</button>
<script type="text/javascript">
window.addEventListener("message",function(event){
console.log("IFRAME");
console.log(event);
}, false);
function sayHello(){
parent.postMessage("Hello!","*")
}
</script>
I compile/install the app and run. I tap the button and the debugger says that parent.postMessage executes. So now I'm ready to code the message handler on the device side.
The copied code obviously assumes that it is running inside an iframe on what I assume is the main index.html launched by Phonegap.
Before I try the iframe approach, I want to know: Has anyone has found a way to use postmessage to communicate between index.js and the WkWebView WITHOUT resorting to iframes?
For example, my window.open creates object 'ref'. Can I simply add an event listener on 'ref' to capture the message? If so, then I suspect I'll need to use something other than 'parent' when calling 'parent.postmessage'. What would that be?
Suggestions are good, examples are better.
Note that this app has not yet required delving into native code... Phonegap Build has been doing just fine to create my installables. I'd like to keep it that way if possible.
I am implementing Smart Banner for ios >=6.
When the user is on my website and click on the smart banner to open my phonegap application, I want to redirect him to the correct PATH of my application
According to the ios documentation, i need to use app-argument:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
How to intercept myURL in my phonegap application ? I can only find example in Obj-C
You have the full url in handleOpenUrl js function, native side of cordova in ios sends the url to this function. So, basically in your index.html file, try this before referencing cordova.js:
<script type="text/javascript">
function handleOpenURL(url) {
console.log("received url: " + url);
}
</script>
You must also define the scheme (myapp in above example) in your ios app xcode settings.
Note that you have to configure your web site properly to call your app with the correct scheme (i.e myapp://...). You can read more about deep linking here: https://developers.google.com/app-indexing/webmasters/
Following plugin can help a lot, and supports both ios and android.
https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin
Is there a way to check iOS to see if another app has been installed and then launched? If memory serves me this was not possible in early versions but has this been changed?
Doable, but tricky.
Launching installed apps, like the FB or Twitter apps, is done using the Custom URL Scheme. These can be used both in other apps as well as on web sites.
Here's an article about how to do this with your own app.
Seeing if the URL is there, though, can be tricky. A good example of an app that detects installed apps is Boxcar. The thing here is that Boxcar has advanced knowledge of the custom URL's. I'm fairly (99%) certain that there is a canOpenURL:, so knowing the custom scheme of the app you want to target ahead of time makes this simple to implement.
Here's a partial list of some of the more popular URL's you can check against.
There is a way to find out the custom app URL : https://www.amerhukic.com/finding-the-custom-url-scheme-of-an-ios-app
But if you want to scan for apps and deduce their URL's, it can't be done on a non-JB device.
Here's a blog post talking about how the folks at Bump handled the problem.
There is a script like the following.
<script type="text/javascript">
function startMyApp()
{
document.location = 'yourAppScheme://';
setTimeout( function()
{
if( confirm( 'You do not seem to have Your App installed, do you want to go download it now?'))
{
document.location = 'http://itunes.apple.com/us/app/yourAppId';
}
}, 300);
}
</script>
Calling this script from the web (Try to start MyApp), you can determine if your app with scheme "yourAppScheme" is installed on the device or not.
The App will launch if it is installed on the device and "yourAppScheme" is registered in it.
If the app is not installed you can suggest the user to install this app from iTunes.
To check if an app is installed (e.g. Clear):
BOOL installed = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:#"clearapp://"]];
To open that app:
BOOL success = [[UIApplication sharedApplication] openURL:[NSURL URLWithString:#"clearapp://"]];
Hides the error message if the app is not installed
At Branch we use a form of the code below--note that the iframe works on more browsers. Simply substitute in your app's URI and your App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
There's a second possibility that relies on cookies first and the javascript redirect only as a fallback. Here's the logic:
When a user without the app first taps on a link to your app, he or she is redirected straight to the App Store. This is accomplished by a link to your app actually being a dynamically-generated page on your servers with the redirect. You create a cookie and log a "digital fingerprint" of IP address, OS, OS version, etc. on your backend.
When the user installs the app and opens it, you collect and send another "digital fingerprint" to your backend. Now your backend knows the link is installed On any subsequent visits to links associated with your app, your servers make sure that the dynamically-generated redirect page leads to the app, not the App Store, based on the cookie sent up with the request.
This avoids the ugly redirect but involves a ton more work.
To my understanding, because of privacy issues, you can't see if an app is installed on the device. The way around this is to try and launch the app and if it doesn't launch to have the user hit the fall back url. To prevent the mobile safari error from occurring I found that placing it in an iframe helps resolve the issue.
Here's a snippet of code that I used.
<form name="mobileForm" action="mobile_landing.php" method="post">
<input type="hidden" name="url" value="<?=$web_client_url?>">
<input type="hidden" name="mobile_app" value="<?=$mobile_app?>">
<input type="hidden" name="device_os" value="<?=$device_os?>">
</form>
<script type="text/javascript">
var device_os = '<? echo $device_os; ?>';
if (device_os == 'ios'){
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100)
return;
document.forms[0].submit(); }, 5);
var redirect = function (location) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', location);
iframe.setAttribute('width', '1px');
iframe.setAttribute('height', '1px');
iframe.setAttribute('position', 'absolute');
iframe.setAttribute('top', '0');
iframe.setAttribute('left', '0');
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
};
setTimeout(function(){
window.close()
}, 150 );
redirect("AppScheme");
I struggled with this recently, and here is the solution I came up with. Notice that there is still no surefire way to detect whether the app launched or not.
I serve a page from my server which redirects to an iPhone-specific variant upon detecting the User-Agent. Links to that page can only be shared via email / SMS or Facebook.
The page renders a minimal version of the referenced document, but then automatically tries to open the app as soon as it loads, using a hidden <iframe> (AJAX always fails in this situation -- you can't use jQuery or XMLHttpRequest for this).
If the URL scheme is registered, the app will open and the user will be able to do everything they need. Either way, the page displays a message like this at the bottom: "Did the app launch? If not, you probably haven't installed it yet .... " with a link to the store.
We have a mobile web app hosted on a server. We want to convert it into a hybrid app using Phonegap, but we do not want to embed the html and other code in the www folder in the hybrid app. We want the pages to remain remote so that updating them can be independent of the app. This is an internal iOS app and we are not planning on submitting it to Apple.
This mobile web app makes some webservice calls which return back some json response. In the hybrid app, we want to save the json response on the iOS device filesystem. I know if we would embed the web app in the www folder of hybrid app, we can easily do so using plugins. But since the web app is remotely hosted, will it still be possible for phonegap plugins to talk to the javascript code and get the webservice response and save to the device?
Yes you can use the File plugin to write, read, delete, upload and download files.
http://docs.phonegap.com/en/3.3.0/cordova_file_file.md.html#File
Example code for communicating with the plugin from your HTML in JS:
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.write("some sample text");
}
For communicating with a web service from your app, you will have to update your config.xml with <access origin="*" />. jQuery Ajax works well for retrieving JSONs.