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

Be Careful Using SASS @extend, CSS3 Selectors, and IE8

I recently ran into a situation where some of my styles were broken in Internet Explorer 8. What makes this different from all the other times my styles broke in IE8 was that, as far as I could tell, it was correct. Consider the following code: %highlighted { background-color: #ff0; color: #333; } .keyword.is-active { @extend %highlighted; padding: 10px; text-transform: uppercase; } No problem, right? Then why isn't it working? I wasn't sure, until I looked at the compiled CSS and saw something like this: .some-list:nth-child(2n), .is-highlighted, .keyword.is-active { background-color: #ff0; color: #333; } .keyword.is-active { padding: 10px; text-transform: uppercase; } Since IE8 doesn't support the css selector nth-child , it ignores the entire rule . Without looking at the final output, there's no way of knowing if this will happen ahead of time. So what can you do? Well,...
Post a Comment
Read more

SASS Converts Zero Opacity 'rgba' To 'transparent'

I recently had a strange problem after updating SASS. I have a modal dialog with a semi-transparent overlay behind it. For modern browsers, I'm using a CSS transition from rgba(0,0,0,0) to rgba(0,0,0,.5) For older browsers (namely IE8), I'm using some JavaScript to apply the transparency and animate the transition. To make sure the background gets set correctly, I'm using the standard fallback strategy of defining the background as background: rgb(0,0,0); right before the rgba line. This worked fine, until SASS optimized my code by changing background: rgba(0,0,0,0); to background: transparent; The reason? It's 2 characters shorter. Yes, we've now saved 2 bytes of easily compressible text in exchange for breaking my code. Why did it break? Well, if you haven't already figured it out, normally a browser that doesn't support rgba will simply skip that property and move on. But transparent is supported. So now, instead of h...
Post a Comment
Read more

SASS Mixin for Creating CSS Triangles

I feel like one of the most common shapes that we can reliably create with CSS vs images is the triangle. One of the reasons for this is that it works as far back as IE7 (IE6 works, but doesn't support background-color: transparent ). Another is how frequently a little triangle icon can be used (e.g., ascending/descending buttons, expanding menus, open/close state, etc.) I'm not going to cover the techniques of creating triangles with CSS . That's been done already , and probably better than I would do it. What I'm going to share with you, is a little SASS mixin that I've been using to generate triangles. See the Pen SASS Triangles by Thomas Pietrosanti ( @Rykus0 ) on CodePen . I'm using a SASS placeholder ( %triangle-base ) as a base to contain the common styles. This makes it easy to extend without generating tons of extra code each time I want to make a triangle. When this compiles, it creates a rule that applies to all of th...
Post a Comment
Read more