Making your PWA iOS web app capable

When Apple introduced iOS, the original app recommendation was to use HTML5, CSS3, and JavaScript to create rich client-side user experiences. Apple has not removed web app support and has enhanced some capabilities over time. The iOS web app experience is driven by custom metadata that's added to a web page's HEAD.

Much of the Apple meta data has served as a model for the modern web manifest specification. Before the web manifest specification was created, Chrome on Android integrated support for the Apple meta data to drive a similar experience.

The web app experience on iOS is triggered when your website contains Apple-specific META tags, corresponding icons, and when the user has added your site to their homescreen.

The first piece you need is a png file as the default homescreen icon. The file should be named apple-touch-icon.png and it should be present in your site's root folder.

Individual pages can have a unique icon with a link reference in the HEAD:

<link rel="apple-touch-icon" href="/custom_icon.png"> 

It is even better to specify icons for different screen sizes and densities. The platform will determine which icon works best for the device. If no icon is specified, the root folder is searched for icons with the apple-touch-icon prefix:

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> 
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> 

When the required meta data is supplied, you must then coax the user to initiate the iOS add to homescreen process. This starts when they press Safari's share icon:

This triggers the Safari share menu, which contains more than just options to share the URL: it contains icons to bookmarks and saves the site to the home screen, as shown in the following screenshot:

Similar to the home screen icon, the Launch screen image can be specified. Think of this as a splash screen. This is done with a LINK element and a reference to the startup image. If no image is specified, a screenshot of the last time the app was launched is used:

<link rel="apple-touch-startup-image" href="/ meta/apple-touch-startup-image-640x920.png">