How to launch mobile app on mobile site - html

I am designing my first mobile site for a small local business.
The most two most important features were a built in 'call us' button and a map function.
The phone call part was pretty easy. But the part that I'm confused about is how to get the maps part to work with both iphone and android users. I can find how to do each one specifically, but how do I cause the button to open up the map app for both iphone and android users?

Related

exporting .vcf contact in mobile web app capable aka HomeScreen app

I suspect this must be intentional on Apples part but I will ask anyway because it works from both mobile and desktop safari.
I create a simple .vcf contact from inside my web app and try to download (aka export) it.
This creates a .vcf file in desktop Safari that is actually downloaded where the user actually has to click that to get it into contacts. And in the mobile safari version (without saving to home screen), the exact same code will pop up a warning screen mobile .vcf warning which at least gives the user the opportunity to import the .vcf into contacts.
Admittedly neither the desktop or mobile safari use case it a good user experience but at least they work.
Whereas, the exact same code saved as a homescreen mobile app simply fails without error on an iphone (i.e
)
I have tried multiple ways to export from the app (most of which work from safari mobile or desktop browsers if NOT web app capable)
as a blob from base64 text/vcard
as base64 text/vcard
using window.open(vcftxt); // where vcftext is base64 text/vcard
using location.href = vcftxt; // where vcftext is base64 text/vcard
using an a tag with download= and href= vcftxt url
All the above work..just not in a homescreen app that appears native
code example (run on iphone safari...not tested on android)
https://www.airbridgelabs.com/s/0/app3.html?sd=100 - Click on contacts logo at the bottom when this page opens in safari and you will see the warning which still allows the user to open the .vcf in contacts
https://www.airbridgelabs.com/s/0/app3.html?sd=100&tm2=100 - This will walk you thru saving to home screen or you can simply save to home screen manually without the tm2 parm. click on the contacts logo at the bottom when this page opens in safari and you will see nothing. Safari developer remote console shows no errors or warnings...simply does not work.
I figure I can probably pass the created .vcf to a page on my server which in turn opens the .vcf which will likely then export it to mobile contacts..but that is a lame solution which still requires the user to be online to save an embedded contact.
And please don't use the argument that this is about security. If it was about security then you wouldn't be allowed to do the exact same thing from a desktop page, or mobile safari page or hybrid native app...and you can. This looks like Apple simply reducing the value of mobile web apps that look native.
What I am looking for is an offline work around to simply save a mobile contact already coded into the mobile web app capable content the user intentionally created.

HTML5 mobile web app camera access

I am developing web application for mobiles for iOS and Android. As per requirements, I need to access mobile camera and take photos (more than one).
Then the photos should be stored in localStorage and then uploaded when user clicks on upload.
I am developing a web apps. It is not native app. I dont want to use phonegap or similar to phonegap.
It should be like normal button. not like choose file button.
have a read: here but it will not be supported on all devices.

Open Google Maps or Apple Maps in iPhone or Other Mobile Device via Browser

I have links that go to Google Maps, but now since Apple updated to their own service my iPhone goes to the Google Maps website. Is there a way in HTML to show the Apple Maps link, when it's iOS6, and show the Google Maps link for all other devices. I am using ASP.NET MVC.
The solution is even easier than that and won't require any conditional statements:
When clicked from an iOS6 device, links to
maps.apple.com/maps?q=cupertino are opened in Apple's native
mapping application.
But on other mobile devices and computers, it redirects to Google
Maps (at maps.google.com/maps?q=cupertino) instead.
So at this point, all you need to do is include the Apple Maps link and it should work as expected on non-iOS devices.
I mentioned this in a recent post that also touches on whether the same parameters can be used.

A universal cross-platform way (mobile) to show alerts to a user

I have a task to create a client application which can show notifications to a user with a high probability of notifications being noticed.
The application should work on Android (2.0+)/iOS/WP.
Here is the use case:
The user starts the Application and performs some Action. Then he switches to the home screen/another application.
The response to the Action makes the Application to issue a notification. The notification is noticed by the user disregarding of what another application (or home screen) he uses on his mobile device at the moment.
There is no requirement for the application to be a native app or to be a web browser-based mobile app. The notification could be a sound or a vibration on the device, but I know that accessing the vibrations from within a browser is still tricky.
Here are my research results of making universal sound/vibro notification mechanism so far:
it seems that making a mobile device vibrate from a browser works only in mobile Firefox (no iOS, no WP);
the support of the audio html5 tag is still experimental, it doesn't work on each and every browser/device;
the sound alert from this example works only in mobile Firefox (asks for a plugin to play an mp3 sound), the Android browser just remains silent.
So, the question is:
Is there any way to force a user of a mobile device (Android 2.0+/iOS/WP) to view a notification from a mobile application? Is the only way to do this is to write a native app for each mobile platform?
I would propose PhoneGap for that particular problem.
Among other things it features cross-platform alert, sound and vibrator notifications.
Only quirk for Windows Phone 7 is that the Cordova lib includes a generic beep file that is used. You should consult the Notification reference page to make sure if it can help you.

How to detect phone function

I am building an html5 web-app which will hopefully be mainly run from a mobile device. The app has a phone number which when clicked, calls the number displayed.
This works great if the user is using an iPhone or Android etc, but what if the user is using an iPod Touch or iPad with no phone capabilities? On the iPhone simulator in XCode, i get an error message saying that safari cannot open the page.
Is it possible to detect if the device has a phone, and if not, disable the link
Thanks