My question may sound like "already asked", but I cannot find any answer. My problem is :
I have a phonegap app that only display a remote website (that website is responsive and work perfectly on mobile device). So the app is very simple :
function onBodyLoad() {
document.addEventListener("deviceready", function(){
location.href = "http://www.mydomain.com/";
}, true);
}
As you can see this I just a redirection when that app starts. With that method I have no access to phonegap API after the redirection (am I right?).
My question(s) is: is that method the right method? How can I display/hide element on a webpage depending on the webpage is accessed by the app or by mobile browsers?
Thank you so much
Greg
Just be aware that you are not allowed to do this from Apple.
From the App Store Review Guideline
2.12 Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may
be rejected
Related
After open webpage in app browser where phone number is set I need get phone number in popup for call.
Any plugin for phonegap?
GL
Not sure what your question means, but as far as I understand you need to make a call to the number on button click. Try the following in your HTML file:
<a class="button" href="tel://123456">1234563</a>
If you are getting the number from controller, use:
<a class="button" href="tel://{{number}}">123456</a>
Today I came across a feature request that I had not done before – dialing a number from within an app. Some quick research shows that its possible using a specific URI scheme.
What are URI schemes? Honestly Wikipedia does a better job than I ever could in describing them but I think of them as something that allows a specific piece of functionality to happen over the internet, and thus they are usually referred to as protocols. You probably have already seen them – the most common ones are http: and https: (for web browsing), and ftp:, among others. Some are unique to an application and really don’t qualify as schemes and are definitely not a “protocol”, such as mailto: (to open up the mail client on a person’s computer), javascript: or about: – in fact, try typing about: in the address bar of your browser and hit “enter” on your keyboard, notice what happens…
In our case where we want to dial a number from within our app we need a way of telling the mobile phone that we want to make a call. There is a scheme for this purpose called tel:. A sample number using this scheme would look like this: “tel:+1-800-555-1234”. If you wanted a number to work around the world you would use an international number which includes the country code.
Implementing this is simple, we could do this within our mobile html5 app like so:
...
call this number
...
Ideally though we would delegate the event and fire a function to call our mythical phone number. To send the url (the “tel” url) to the browser we would write the following:
...
document.location.href = 'tel:+1-800-555-1234';
...
As of PhoneGap 3.6 all schemes are subject to whitelists. This means you have to add the tel scheme to a second whitelist that will allow your app to launch external applications. To do this you need to edit your config.XML to include the following (a mailto example is included):
Go here for more information: Cordova 3.6.0 Whitelist Guide.
Of interest to this topic is getting Android to treat phone numbers (as well as URLs and mailto schemes) as clickable links in text fields. I’ve not tested it but try adding the following to your config.xml.
Additional information on this can be found here: http://developer.android.com/reference/android/widget/TextView.html#attr_android:autoLink.
[EDIT: Note that what follows no longer applies but remains here for historical purposes.]
When we run the above code in Android 2.3.6 the phone dialer appears and does so with our number pre-populated ready to be dialed. Unfortunately on iOS 5 this doesn’t happen. A quick review of iOS documentation implies that it should work – so I suppose its just broken.
No need to panic, there is a PhoneGap plugin available which will take care of things. The plugin can be downloaded from here:
Click here to download the iOS Phone Dialer PhoneGap plugin
Its simple to install – just drag and drop the “m” and “h” files on to the classes folder of your xcode project. When you do this a dialog will appear with some options – be sure to click the radio button for copying “…files if needed..”.
Next, update the PhoneGap.plist file to reflect that you are adding a new plugin. The link for downloading the plugin explains the plist values as being “phonedialer > PhoneDialer”… but I think its easier to explain with an image:
The final step is to place the “PhoneDialer.js” javascript file somewhere within the root of your project and then to add it to your index.html file via a script tag.
Now that the Phone Dialer plugin is installed you’ll naturally want to know how to use it:
...
window.plugins.phoneDialer.dial('1-800-555-1234');
...
All in all pretty easy and straight forward, however now you have two methods of dialing a number within a single project. What you want is to use the tel: url scheme in Android and the Phone Dialer plugin in iOS.
Within Sencha Touch we have something called the Ext.is object whose attributes reflect everything that you could possibly want to know about the environment that your mobile app is living within.
For our purposes all we want to know is if we are in iOS or if we are in Android. These two lines provide us the answer:
...
Ext.is.Android // boolean, "true" for android, false otherwise
Ext.is.iOS // boolean, "true" for iOS, false otherwise
...
Thats all we need to impliment phone dialing across the two platforms within our mobile app. Lets build a function that makes use of one of the above (we don’t need both) and we should also give the user a choice in the matter, so the code below includes a message to the user to see if they really do want to suspend the app in favor of the device’s phone dialer:
...
function callSomeone(){
var msg = Ext.Msg.confirm('Please Confirm','Are you sure you want to make a phone call?',
function(r){
if (r == 'yes'){
if (Ext.is.Android){
document.location.href = 'tel:+1-800-555-1234';
} else { // we assume the device is running iOS
window.plugins.phoneDialer.dial('1-800-555-1234');
}
}
});
msg.doComponentLayout();
}
...
All done… I suppose the very last thing to do here is to provide a complete working Sencha Touch example, and some screen captures…
...
Ext.setup({
onReady: function(){
var rootPanel = new Ext.form.FormPanel({
fullscreen: true,
items: [
{
xtype:'button',
text:'Call 1-800-555-1234',
scope:this,
handler: callSomeone
}
],
dockedItems:[
{
xtype:'toolbar',
dock:'top',
title:'Phone Dialer Example'
}
]
}
);
function callSomeone(){
var msg = Ext.Msg.confirm('Please Confirm','Are you sure you want to make a phone call?',
function(r){
if (r == 'yes'){
if (Ext.is.Android){
document.location.href = 'tel:+1-800-555-1234';
} else { // we assume the device is running iOS
window.plugins.phoneDialer.dial('1-800-555-1234');
}
}
}
);
msg.doComponentLayout();
}
}
});
...
From http://rickluna.com/wp/2012/02/making-a-phone-call-from-within-phonegap-in-android-and-ios/
I'm reading about Flask. Given its tight integration with Jinja2 and WTF-forms, what happens when I start writing a native mobile version of my website? I usually write a bunch of backend API that work independent of the frontend and then code up the frontend using JS. This way, if I have to implement a native mobile app, I can seemlessly use the backend APIs. With Flask's (or some other framework's) tight integration with template engines, how should I design my application?
For example, let us take an example from here, the author advocates that the login function be written like this:
from flask import render_template, flash, redirect
from app import app
from forms import LoginForm
# index view function suppressed for brevity
#app.route('/login', methods = ['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
return redirect('/index')
return render_template('login.html',
title = 'Sign In',
form = form)
However, when I am building a native Android/iOS app, I'm assuming that the backend should expose a bunch of API calls that validate the input and do the login for you. And given that mobile is agnostic to Jinga2 or some other templating (because everything is implemented native), all this code is useless in the context of native mobile apps. This means, I will have to refactor the "real-world" Flask code to be compatible with a mobile app. Is this the case or am I missing the higher-level point?
My specific question is: What is the design pattern I should follow in Flask to ensure that my site is web and mobile friendly?
I think there are 2 issues here:
Writing a web client that is web and mobile friendly
Designing an application with web and mobile components
Issue 1 would involve a responsive web design that formats the webpage in a manner friendly to both desktop web browsers and mobile web browsers. There are CSS techniques to use different style sheets and templates depending on the browser viewport size. This would be where different jinja2 templates could be used for mobile vs. web clients. Or there are "responsive designs" that adjust according to viewport size.
Issue 2 speaks to how you architect your services and clients. You could do like you said and have a backend API (could be a Flask application or not. Flask-Classy or Flask-Restful are Flask extensions that assist in developing REST API with Flask) independent of any frontend. Then you could code a native mobile app that uses the backend API. And you could code a Flask web application that also uses the backend. There wouldn't be any dependencies between the mobile app and the Flask app. They're just two distinct clients that both access the same backend API.
The example you linked to is creating a monolithic web application. It's an excellent tutorial if that's what you're looking to create. But it wouldn't apply in its entirety if you want a set of services that can be used by both mobile apps and web clients.
Well there is a crude way to go about this issue which I used successfully in my application. So every time a request is made from the web application or the android application I add a field in the request called "device" and set its value to "web" or "android" accordingly.
On the front-end:
<form id="test" action="test" method="get">
<input type="hidden" name="device" value="web"/>
<input type="submit" value="Submit"/>
</form>
Similarly I do the same from my Android Application.
Now at the Flask Server I read the value of this field and handle the request accordingly.
#app.route('/test', methods=['GET'])
def test():
device = request.args.get('device')
if device is "web":
return render_template('test.html', data='Hello Word')
else:
# Return data to Android Application
return json.dumps({'data':'Hello World'})
I am pretty sure there must be a much better way to deal with this, but this one works perfectly fine. Hope it helps :)
#Bahul Jain You can get that using the following code. Not sure is this right way or wrong. But you can check platform in your if condition.
from user_agents import parse
browser = request.user_agent.browser
version = request.user_agent.version and int(request.user_agent.version.split('.')[0])
platform = request.user_agent.platform
uas = request.user_agent.string
print('---browser-{}-----version---{}-'.format(browser, version))
print('---platform-{}-------uas-{}---'.format(platform, version))
I am developing a Sencha-Touch + PhoneGap application for Android and I am facing an issue that the web-view gets reloaded if the app was minimized for a long time.
The same thing happened when we run any memory cleaner apps on the device(Like Android Assistant,Clean Master etc..)
There is a login functionality in my app.So if the memory is cleared, the user needs to re-login to the app and the data inside the app will also be lost.(Please note that the data is very important)
How to prevent reload on android web-view when the app comes to foreground?
Or please suggest an alternative solution for retaining the user data.
Please note that I am using cordova 2.3 and sencha touch 2.3
Thanks in advance.
I think you need a client side data storage solution. Sencha Touch offer two solutions that may help you with this issue.
localstorage - http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage
Specify a proxy on your store to use local storage
proxy: {
type: 'localstorage',
id : 'important-data'
}
sql storage - http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.Sql
Specify a proxy on your store.
proxy: {
type: "sql"
}
With either of the above solutions your data will be available client side independent of the webview being reloaded.
Not really sure how to correctly describe this so hopefully some of you know what I mean.
Our client is getting a mobile app for thier site, hopefully soon, and I have noticed on android devices and sure they probably exist on iphones too, a popup to inform you that said site has an app. I have seen it on forums that support tapatalk as well as the sammobile.com website. Its a small message and an "ok" and "cancel" button, ok takes you to the app in the market.
Googles only really helpful when you know or at least can correctly describe what you are looking for.
Does anyone know
A) Do iPhones also have this feature and
B) how would I go about triggering such a popup/notification?
Using some infor from a java push trigger as well as a few other Stacks I put this together.
if (/Android|iPhone|BlackBerry/i.test(navigator.userAgent)) {
var url = confirm("Would you like to download our mobile application?");
if (url === true) {
var url = window.location.href = 'http://www.google.com';
url.show();
}
}
Will test for the 3 devices mentioned, if so will create a confirmation box for which confirmation will direct the user to another url.
I have currently built an application using phone gap targeting the android and blackberry platforms.
I use a combination of Jquery mobile and Phonegap for my application, since both are open source frameworks and improvements as well as bug fixes keep happening I wanted to know what would be a good solution for alerting my users to update their application when I upgrade the above frameworks in my application.
One solution I had in mind is maintain a version numbering on my server for the apps, when the app is loaded on the users device we can make an ajax call to check for version update and then alert the user to upgrade their application.
Android market also has an auto update feature how does that work! How do I go about this what would be a good approach.
If you are planning to build "native", in this case localy installed apps. You don't have to worry about informing the user. As soon as you uplad the new versions to the Android market or App World the App market systems will let the users know automatically.
I think (in most cases) it is not necessary to let the user know about updates within the app. Some apps do that but I see it less often since it really does not make much sense.
But in case you want to build such a feature, I would store a version number somwhere in the code and make a server request eg. when the app starts which then compares the latest version number of your app stored on your server.
Eg.
Client:
$.ajax({
url: webservice_host + '&callback=?',
dataType: 'jsonp',
success: function (data) {
//data -> remote version
var local_version;
if (local_version < data ){
alert("There is a newer version available");
}
}
});
Server (php in this case):
<?php
print mysql_real_escape_string($_GET['callback']). '( 1.1 )';
?>
I didn't test the code for typos etc. But this should do the trick.