I have downloaded the file structure of my JQuery Mobile app. I have done this to test running it from the local file system. The reason why is I want my app to run with Cordova. From my understanding cordova runs files under file://. Currently, my file structure looks like this:
index.html
account
register.html
reset.html
In index.html, I have a "sign up" button. When someone clicks it, I use the following code:
$.mobile.changePage("account/register.html", { transition: "slide" });
I've verified that register.html works fine if i put the complete path in the browser url. Oddly, I see "error loading page" when I click "sign up". Is there some problem with using changePage under file://. If so, how do I overcome this?
Thank you!
try this
$.mobile.changePage("../account/register.html", { transition: "slide" });
You can just leave .. links in the code and it will work fine. Unless you have a reason to explicitly call changePage.
This answer is specificly if you run into an issue running the PhoneGap app on iOS.
Be sure you set the $.mobile.allowCrossDomainPages = true; which is required for AJAX calls to inject pages.
In your PhoneGap app object definition:
var app = {
initialize: function() {
// setting required to use $.mobile.changePage()
// http://jquerymobile.com/demos/1.2.0/docs/pages/phonegap.html
$.mobile.allowCrossDomainPages = true;
},
};
So when you call app.initialize() in your index.html, this property will be set prior to any $.mobile.changePage() function calls.
This will save you hours of trying to figure out the issue as no error is returned via the Safari Web Inspector.
Related
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.
We are loading Extjs Web app from our existing web app. We done something like this below
<iframe width="100%" height="400px" src="http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/"></iframe>
When we open this localhost link iPad safari. iFrame is loaded fine, but when I click on buttons or links it is not responding.
If I replace iframe src link to something else, it works fine. Is it know Extjs issue or is there any workaround for this.
Thank you.
I got the same issue. Eventually, it turns out that this is an iOS iframe problem that doesn't pass "touchstart" event to iframe.
To solve problem put this code to the parent window :
function dummy() {
// console.log("A bug? Where?");
}
addEventListener("touchstart", dummy, false);
You can see original post from this link
Requirement:
I am trying to build a mobile app using Ionic, Apache Cordova, Angular Js and Parse. One of the functionalities of the app is- it is suppose to let user login using Facebook (either using native app or browser based login). User will click 'Login with Facebook' button on the 'Sign In' page and that is suppose to open either the native Facebook app (if installed) or browser to redirect to Facebook login page for authentication. Once authenticated user should be able to perform further actions within the app.
Issue:
I am getting the following error on clicking 'Login with Facebook' button in my app within Xcode simulator.
ReferenceError: Can't find variable: facebookConnectPlugin
What I have done so far?
1) Created necessary HTML files with login button, angular js controllers and services for authentication flow.
2) Followed the instructions mentioned in the link below for Facebook authentication part.
https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework
3) Based on the above article, cloned the plugin to the local directory and then installed the plugin to the app directory using cordova command.
As per the article, I got the plugin from this git URL.
https://github.com/Wizcorp/phonegap-facebook-plugin
4) Plugin installation seems successful. Didn't see any errors on the Terminal. I can also see the plugin folder but it seem to have a folder with name 'phonegap-facebook-plugin' instead of com.phonegap.plugins.facebookconnect. See comments in the above article if you couldn't figure out what I mean. Not sure if this has anything to do with my issue.
5) Build the application using ionic build ios command.
6) Opened the xcodeproj inside platforms/ios folder in Xcode and ran the application on Xcode simulator.
7) When I click on 'Login with Facebook' button, I am getting 'Can't find variable: facebookConnectPlugin' as mentioned in the issue section above.
8) Added following code in the run method in app.js.I have removed the actual parseid, fbids from below code for the sake of this post.
myApp.run(function ($ionicPlatform,$rootScope,$state) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
Parse.initialize("parseappid", "parsejskey");
if (!(ionic.Platform.isIOS() || ionic.Platform.isAndroid())) {
window.fbAsyncInit = function () {
Parse.FacebookUtils.init({
appId: 'fbappid',
version: 'v2.5',
xfbml: true
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
}
});
9) Added the following after body in index.html file.
<div id="fb-root"></div>
10) I even tried to manually add reference to facebookConnectPlugin.js (that was installed as a part of plugin installation) by copying this js file from plugin directory into my js directory (www\js) as some articles suggested in the internet but nothing seem to make it work.
Confusions I have?
1) Do I also need to reference cordova.js in my index.html? I have only referenced ng-cordova.js.
2) Is facebookConnectPlugin suppose to work in Xcode simulator?
Dev Environment I am using
Mac OS X Yesomite, Visual Studio Code, Safari/Chrome, Xcode (v7.1.1)
Mostly testing using Xcode simulator & from Safari Develop
I'm stuck in a similar situation , but I can redirect the user to the login page.
I don't know if this helps you but you take a look.
See Google Firebase: Handle the social login for further details on this.
I know it's from the guys of Firebase but there is one very important sentence in this article:
The best way to build a hybrid app is to deal with the underlying details of Cordova as little as possible. For this, Ionic is your best friend. Ionic abstracts the difficult parts of hybrid development into an easy to use SDK.
But, there still is one area of difficulty. Social login. Logging in with a social provider requires a popup or a redirect. The problem is, this doesn’t exist in the native world. It’s okay though, there’s another way, and it’s easy.
And the "easy way" is to handle the flow manually:
Facebook: Handling the login flow manually
I hope this helps you somehow even though you are using a social login plugin and I don't.
Note: Are you using an inapp-browser?.
Hope this helps
I have 2 phonegap applications installed in my iPhone. I want to open one app from the other one.
I am able to load other app when I click the button on the current application.
Open
But I want to open the other app without a user action. One has to automatically invoke other one when some event like document.ready fires,
$(document).ready(function() {
$("#btnopen").click();
});
But the above code doesn't work. How can I invoke the other app using script & without a user action?
Could resolve the issue with below code,
$(document).ready(function() {
$("#btnopen").click();
$("#btnopen").bind("click",function() {
window.location= "mycoolapp://" ;
});
});
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.