Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I know that the mobile bookmark bubble might sort of work for iOS, but it isn't going in the same section. And for Android, bookmarking is really not going to cut it for a mobile HTML5 application install since users just don't think to go to their bookmarks and that bookmark process takes two or three steps.

To me this issue of getting the application (bookmark) installed pretty much makes the rest of the HTML 5 features aimed at mobile HTML much less useful. I can't realistically expect users to prefer the bookmark install and launch process over regular apps, so I can realistically expect them to ignore my mobile HTML5 application and use a native app.

The groups behind mobile HTML 5 features do seem to be pushing for HTML 5 apps adoption with things like Application Cache etc. To me it seems obvious that the bookmark bubble is not going to cut it. Someone please tell me they have addressed this or at least are working on it?

share|improve this question
    
Hi Jason, welcome to the site. Since this question is specific to particular technologies it will probably be moved to StackOverflow (where you'll get better answers for it). If you haven't already, have a read through the FAQs programmers.stackexchange.com/faq to make sure you're asking the right sorts of questions so you don't get disheartened by migrated/closed questions. –  StuperUser Nov 15 '11 at 11:39
2  
I have a feeling Stack Overflow will just delete it if someone moves it there. Actually seems like good questions on Stack Exchange just get shifted around or deleted. –  Jason Livesay Nov 15 '11 at 11:43
    
Well, I hope this will never be a functionnality of HTML5. –  deadalnix Nov 15 '11 at 11:46
    
@Jason, perhaps this belongs to the superuser SE site. :-) –  Danny Varod Nov 15 '11 at 15:56

4 Answers 4

up vote 4 down vote accepted

Updated

Depending on the iOS version, you need either 72*72 or 114*114 icons. Also, you can specify the icon is precomposed (iOS just adds arounded corners) or not (it also adds a shine effect on top of it).

However Android (2.1+) can only handle precomposed icons.

So if you're looking for a one-code-fits-most, use this snipplet:

<!-- For iPhone 4 with high-resolution Retina display -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For first-generation iPad -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Android and iOS 4.1 use the last icon in that list, that's why the link without sizes ais at the end.

However, both iOS and Android will add the link only if the user chooses to create the link, there is no way to do it without user interaction currently, nor is there anything in HTML5 to introduce such a feature yet.


And if you're making web application, make sure to add this tag (the webpage will be opened fullscreen on iOS):

<meta name="apple-mobile-web-app-capable" content="yes" />

and furthemore, you can specify a loading screen for iOS:

<!-- 320x460 for iPhone 3GS -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone.png">

<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone4.png">

<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="startup-iPad-portrait.png">

<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="startup-iPad-landscape.png"> 
share|improve this answer
    
Of course I don't want to do it without user interaction. I just want a way to "install" an app that is as convenient as the normal app install process both during the install and when the user wants to launch. –  Jason Livesay Nov 23 '11 at 3:49

HTML 5 is not an app language, but rather a webpage language.

You can of course use it as a client side for web apps, however, I think someone would have to write a real app per mobile platform for wrapping the links with an wrapper app that can be installed, or the OS providers could enable pseudo-installing links.

share|improve this answer
    
Thanks.. I guess the "pseudo-installing links" sounds like what I was hoping someone would say was in the planning stages at least.. –  Jason Livesay Nov 15 '11 at 11:39
    
@Jason, that would have to be done by the OS (iOS/Android), not HTML5. Also, I doubt Apple would put it in iOS, as they cannot control web apps like they can native apps (hello Amazon!), so they have no incentive to make web apps easier to access –  Dan McGrath Nov 15 '11 at 14:25
    
As Dan clarified, this isn't an HTML 5 issue - it is an OS issue. Windows and Android DO support putting links/bookmarks/favorites on the desktop/springboard. –  Danny Varod Nov 15 '11 at 15:37

I don't think they are planning to add it. This is more of an OS thing; in iOS, a bookmark can be saved within an application wrapper and launched from the Springboard. I assume Android will eventually adopt the same technique -- or it won't, in which case you'll have to develop a workaround on your own.

share|improve this answer

You don't make HTML5 itself worry about it -- it isn't a concern for the protocol. In 2011, you launch your HTML5 web app by making a small native app that can perhaps push some alerts, provide contact us info and, last but not least, launch your HTML5 app.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.