I currently build an in-house webapp (a telephone directory) with jQuery Mobile. I put the phone numbers in a link: call me
This works great. Once you hang up, you get back to the home screen (normal behavior for webapps). BUT: If you start the phone app, the iPhone crashes. The phone app does not open, the status bar will light up and everything is slowly increased. Sometimes the screen goes black and you must restart the iPhone. Workaround: double-clicking the homebutton and chose another multitask app. Then again, everything is normal.
After thousands of attempts, I've come to the conclusion that the problem appears ONLY on the fullscreen mode:
<meta name="apple-mobile-web-app-capable" content="yes" />
Leaving this off and opens the webapp with the Safari interface: no problems.
I've Been looking into the vastness of the internet for the problem, but somehow I seem to be the only one ...?
We tested on an iPhone 4 and an iPhone 4S. Both with the latest iOS version.
You can also try it out: www.gopeter.de/tel - put the app to your homescreen/springboard, phone 0000 and hang up immediately. Thereafter, the normal "phone" app stop working ...
Source code of this page is only:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Anrufen</title>
</head>
<body>
call me
</body>
</html>
Related
I want to make a simple webpage with a JavaScript game look like an app on the iPhone. I know I can save a bookmark to the homescreen and that looks like an app and I know I can set the apple-itouch-image for the thumbnail in my HTML. But when you click on the app on the homescreen, it's clear this is just a webpage. How can I get rid of the URL and search bar at the top like Google Reader does? It's fine to see that bar if you later scroll up.
Is it possible to dive right into full-screen mode when the webpage is clicked?
I'm not looking for anything like PhoneGap, I just want to make a simple webpage with JavaScript look like an app, I don't want it to actually be an app.
You can put some meta tags in your head block of the page. Try these:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
viewport sets width and controls scaling and zooming.
apple-mobile-web-app-capable informs the Apple iOS that the application can be installed to the users springboard so that it starts the Safari Mobile browser without a menu bar
apple-mobile-web-app-status-bar-style controls the look of the thin status bar at the top of the screen.
Another useful line is:
<link rel="apple-touch-icon-precomposed" href="myicon.png"/>
Which will give the app a custom icon once installed.
You need to define a few <meta> tags, most notably apple-mobile-web-app-capable. See a full tutorial here http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
Add
<meta name="apple-mobile-web-app-capable" content="yes" />
Then it should work after it was saved to homescreen.
I want my site not to display the address bar when viewed in iPhone's safari. From my research this metatag should do the trick, if only targeting iphone devices:
<meta name="apple-mobile-web-app-capable" content="yes" />
it doesnt seem to do the trick when I'm testing on 4S.
also tried
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width" />
Does anything else need to be done?
The apple-mobile-web-app-* meta tags you refer to in your question only apply when a user adds your web application to their home screen, after which they can click on the icon and it appears to be a native app (even though it is not).
As long as your application is being accessed inside Safari on the device, the Safari chrome will appear.
So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.
Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.
The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).
You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.
I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?
It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
To add an icon:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
To have a startup image:
<link rel="apple-touch-startup-image" href="/startup.png">
To hide the navigation bar:
<meta name="apple-mobile-web-app-capable" content="yes" />
To change the status bar appearnace:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403)
To change the status bar appearnace on iOS 15:
<meta name="theme-color" content="#ecd96f">
Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim
I have created a webapp using all of the recommended link and meta tags for safari, eg.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="/startup.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />
However, my issue is if the startup.png or any of the apple-touch-icon image files are updated on the webserver, it doesn't seem like a user's iphone or ipod will retreive the updated file once it has been saved to their home screen (I'm guessing it's cached somehow or something). It works to remove the webapp from the home screen and re-add it. But is there a way to let the application know it needs to refresh these images without requiring the user to delete and re-add it?
It's been a few years since this question was asked/answered and I'm here to report that this is now possible!
In newer iterations of iOS, the Apple Touch Icon that is displayed on the homescreen is cached just like any other piece of content from the website. By simply changing the name of the image, it will force the homescreen shortcut to refresh the icon the next time the shortcut is launched.
However, to keep in line with Apple's naming conventions, you can simply append URL variables to the reference whenever you want the icon to be redownloaded and continue to call the image apple-touch-icon.png.
What I have done to automate this issue (in PHP) is append the last modified date/time to the image. For example:
<link rel="apple-touch-icon" href="apple-touch-icon.png?m=<?php echo filemtime('apple-touch-icon.png'); ?>" />
This outputs:
<link rel="apple-touch-icon" href="apple-touch-icon.png?m=1415832495" />
Now, you don't have to do anything but literally overwrite the image and everything else will happen automatically. When you change the image, the modified time changes and doesn't match what the user has in cache anymore, so it forces a new download. Simple!
OLD ANSWER: I've done a ton of research into this trying to find a way. Unfortunately, it is not possible. It needs to be removed and re-added to the home screen for the new icon to be used.
I just tested a theory on the Iphone 5 and Ipad 2, and it worked for both. Similar to the favicon, you can force the new favicon to pull by changing the href.
Instead of href="/apple-touch-icon.png" I used href="/apple-touch-icon.png?ver=1.1" and it pulled the new icon when the site was visited (without deleting and re-adding to home screen).
will just add my small "work around". Have been tryied all kind of corrections to my website to get the icon to show up correctly in my bookmarks on my own IPAD. Later found out that on apple products there newer visited my site before, ICON showed up fine. All my visits to my site was as http://mysitename(ref).dk but when I added http://www.mysitename(ref).dk the IPAD finally discovered this as a new website and the apple ICON was located and presented correctly in my bookmarks. :-)
Jacob
I've seen icons get updated, but I don't think it's possible to affect this update in any way. I've noticed the updated icons after the phone was rebooted, but I haven't look enough into it to say anything conclusive.
Within my webapp if i just change the startup.png file with a new one, the first time a reload the app from the home screen it shows the old image. Closing and reopening the app shows the new startup.png image. iOS 4.2.1.
By the way, the same apllies for the icon.
Removing and re-adding the webpage/webapp to the homescreen may not even suffice.
I just tried to
delete the bookmark from homescreen
reload the page in safari
add the bookmark to homescreen
==> it still shows the old icon it seems to have cached somewhere :(