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 :(
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.
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>
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.
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide