Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

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
<link rel="manifest" href="/manifest.json">


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'.

IMG_8898.jpeg IMG_8899.jpeg IMG_8900.jpeg


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.

IMG_8901.jpeg IMG_8902.jpeg


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

Skip down to comments...
A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. If you spot something out of place, please do let me know.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
 
comments powered by Disqus
Other posts you may like...