Skip to main content

Standalone Web Apps on iOS

As more and more mobile OSes are released, that means apps have to developed for more and more platforms; multiplying the workload and the cost to both create and maintain any mobile app that you want to be available to anyone.

Luckily, the web offers us a more standardized platform. (And before you cite differences in browsers: browsers are free and much easier to change than hardware, and there may be some minor discrepancies but the base technology used for development is still the same across the board).

While there are obvious drawbacks (available data connection, bandwidth, integration with device-level features), many of those do not have that great of an impact for a lot of applications or can be circumvented with HTML5 APIs.

One hurdle that HTML5 doesn't solve (at least, not that I've seen) is to run a web app in a way that the user experience is the same as if they were running a native app; meaning the removal of the browser chrome (address bar, browser menu, etc; Not to be confused with the Google Chrome browser!).

While it may still be a device/vendor-specific solution: Apple offers us a simple mechanism to accomplish this.

From Safari, users can choose the "Add To Home Screen" option to bookmark your site to an icon on their home screen. When they then load the site by tapping this icon, with the right code on your page, it will run in standalone mode and appear to your users to be a native app.

To achieve this affect, just add the following meta tag to the head section of your HTML:

Then, on your page, you can detect if it's running in standalone mode with the following javascript: 

if (window.navigator.standalone) {
  /* app is running in standalone */
}else{
  /* app is running in the browser, or on a system that doesn't support the standalone flag */
}

You can specify a file using the following file names (just include them in the same folder as your web app). If the files aren't found, a screenshot of the web page will be used instead.

(exerpt: Everything you always wanted to know about touch icons)
  • apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non-Retina iPhone and iPod Touch
  • apple-touch-icon-72x72-precomposed.png or apple-touch-icon-72x72.png for the first- and second-generation iPad
  • apple-touch-icon-114x114-precomposed.png or apple-touch-icon-114x114.png for iPhone 4+ (with Retina Display)
  • apple-touch-icon-144x144-precomposed.png or apple-touch-icon-144x144.png for iPad 3+ (with Retina Display)
  • apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices)
Labels:

Comments

Post a Comment

Popular posts from this blog

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line...
Post a Comment
Read more

Naming Booleans

Naming conventions are one of those little things that can become a big thing when you multiply the scale of the project and/or people involved. I was just looking through some code yesterday, and I saw a variable with a fairly typical boolean name that followed the format isObjectState This felt awkward to me, and I took a moment to consider why this is. In Logic, a boolean is a statement that is either true or false . However, this variable name is written as a yes or no question. It is an easy misconception to equate true with yes and false with no , but though they are similar, they are not exactly the same, and, especially as programmers, we should not treat them as such. When we expand our variables into full sentences, the awkwardness becomes more apparent. Especially when we insert them into control structures. Let’s rename our variable to: is this menu item active? So our control blocks will read: if is this menu item active?, then highlight it. while is this men...
Post a Comment
Read more

Get width and height of a remote image with VB .NET

The Problem I wanted to grab the width and height of an image that was on a remote server. I've done this with PHP, but never in .NET. The Solution I did a little digging and came across this code (slightly modified for my own purposes). Dim request As HttpWebRequest = DirectCast(WebRequest.Create(URL), HttpWebRequest) request.Method = "GET" request.Accept = "image/*" Dim response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse) Dim s As Stream = response.GetResponseStream() Dim bmp As New Bitmap(s) Width = bmp.Width Height = bmp.Height
Post a Comment
Read more