How to configure your website to act like a native app on iOS

I've been noticing a fair number of errors looking for apple-touch-icon-precomposed.png or apple-touch-icon.png in my Atari Gamer website's server logs. At first I thought that these errors were due to Safari or Mobile Safari looking for icons for my website and mostly ignored them, but then I decided to dig a little deeper and found that there's much more to the story.

Error

ERROR: Requested page does not exist Code: 500 Path: /apple-touch-icon-precomposed.png

ERROR: Requested page does not exist Code: 500 Path: /apple-touch-icon.png

What I ended up finding out is that it's possible to turn a website into something that feels more like a native web application - at least it gets its own launch icon in iOS. In reality this is just a web view with a basic application launcher, but it's still a neat thing to have and is next to no effort to implement.

This relies on the Web App Manifest W3C Specification which both iOS and Android appear to support by the way. There's also a handy Web App Manifest Generator available to make things easier for you and Apple has documentation on additional customisations that are possible.

So here's how it's done, first your website (in its <head> section) must contain a reference to the web manifest file, something like this...

HTML

The manifest file is a JSON file which can either be hand crafted or created via a generator such as Web App Manifest Generator. In my case this is what I ended up using...

manifest.json

{

"name": "Atari Gamer",

"short_name": "Atari Gamer",

"lang": "en-AU",

"start_url": "/",

"display": "fullscreen",

"theme_color": "#aa0000",

"icons": [

{

"src": "/img/apple-touch-icon.png"

}

"scope": "/"

}

The scope member is defined to address an issue with iOS Safari opening links in a new window when it shouldn't. The rest of the members should be fairly self explanatory.

Then to see this in action, it's a matter of opening the website in iOS Safari and clicking the 'Share' button, then clicking 'Add to Home Screen'. Then clicking 'Add'.

A new "App" icon will appear which will have the name of the website as specified in the manifest file, and tapping that app will open the website in a new screen.

This does not remove the need for creating a dedicated app, nor does it remove the need for making a responsive website for mobile devices, but it is a nice little extra to offer your users.

-i