Example of a full manifest.json file that I use on one of my PWAs

3. Displaying an A2HS guideline

Google Chrome automatically detects a PWA on Android systems and if the site meets the add to home screen criteria, it shows an install banner or mini info bar to the user to allow them adding it to their home screen.

Add to Home Screen dialog on Android

💡 TIP — short_name field in your manifest.json will represent your PWA’s name when it’s added to a home screen. Additionally, name field will be used on Add to Home Screen prompt on Android!

Such functionality does not exist on iOS. But, luckily we can build our own UX to guide users towards the required taps to help them add your app to their home screens.

It can be a good old popup;

A popup to guide users —Source: https://dockyard.com/blog/2017/09/27/encouraging-pwa-installation-on-ios

Or, even better; a mini-info bar which mimics Chrome’s behaviour on Android platforms to create a uniform experience across platforms.

A mini-info bar like guidance — Source: https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

For example, I used a bit of code on one of my PWAs to introduce this behaviour.

import { get, set } from 'idb-keyval';

import { ToastController } from '@ionic/angular'; async showIosInstallBanner() {

// Detects if device is on iOS

const isIos = () => {

const userAgent = window.navigator.userAgent.toLowerCase();

return /iphone|ipad|ipod/.test(userAgent);

}; // Detects if device is in standalone mode

const isInStandaloneMode = () => ('standalone' in window.navigator) && window.navigator.standalone;



// Show the banner once

const isBannerShown = await get('isBannerShown');



// Checks if it should display install popup notification

if (isIos() && !isInStandaloneMode() && isBannerShown === undefined) {

const toast = await this.toastController.create({

showCloseButton: true,

closeButtonText: 'OK',

cssClass: 'custom-toast',

position: 'bottom',

message: `To install the app, tap "Share" icon below and select "Add to Home Screen".`,

});

toast.present();

set('isBannerShown', true);

}

}

4. Adding meta tags for platform optimisation

WebKit is the web browser engine used by Safari, Mail, App Store, and many other apps on macOS, iOS, and Linux — https://webkit.org/

Although many browsers adopted the Web App Manifest spec, WebKit (specifically, Mobile Safari on iOS) currently uses custom non-standards track meta tag implementations.

Because of that, Apple’s iOS doesn’t create a splash screen or an app icon for a PWA automatically the same way that Google’s Android does based on the app’s manifest file. This prevents your PWA to provide native-app-like experience.

💡 TIP — Keep an eye on WebKit Feature Status for tracking the progress of the implementation of web standards. For instance; once Web App Manifest specs is implemented on WebKit, you won’t need to use custom meta tags anymore. Track the progress here: https://webkit.org/status/#?search=manifest

Fortunately, there is a workaround to configure app icons, splash screens and status bar of your PWA on iOS platform. The workaround is adding custom meta tags to your app’s index.html file!

4.1 Adding meta tags for app icons on iOS

As discussed above, iOS does not recognize the app icons that you’ve put in your manifest file. That’s why you need to add meta tags to your index.html file to optimise your app and its icons for iOS.

The following example demonstrates specifying various sizes for most common iOS devices:

<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">

You can read more about this topic on Apple’s Safari Web Content Guide.

4.2 Adding meta tags for splash screens on iOS

In order to add splash screen to your PWA on iOS, you must add a meta tag that points out an image for a specific resolution. If the size of an image in the meta tag matches with the device’s resolution, iOS will show the image as a splash screen.

Apple uses a custom link with a rel called apple-touch-startup-image to support splash screens for an app added to iOS home screen, as you can see it here. You also need to set apple-mobile-web-app-capable meta in order to bring the support for splash screens.

<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="apple-touch-startup-image" href="/launch.png">

You need to create static images in different sizes for different devices. Here’s a list of devices and their resolutions:

Static launch screen images — Apple Human Interface Guidelines

This is an example of some of the meta tags I have in my PWAs index.html file:

<link href="/assets/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="/assets/splash/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="/assets/splash/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

💡 TIP — Use an automated tool to generate your images and their corresponding html codes. Here’s an open source library that I built just for this purpose: https://github.com/onderceylan/pwa-asset-generator

npx pwa-asset-generator https://github.com/onderceylan/pwa-asset-generator/blob/master/static/logo.png -b "linear-gradient(to right, #fa709a 0%, #fee140 100%)"

Generate splash screen and icon images and corresponding HTML tags automatically via pwa-asset-generator

4.3 Adding meta tags for the status bar on iOS

You can customize iOS status bar of your PWA by using apple-mobile-web-app-status-bar-style meta tag in your index.html file. This meta tag has no effect unless you specify full-screen mode aka standalone for your PWA.

<meta name="apple-mobile-web-app-status-bar-style" content="white">

View of the status bars; black-translucent, white, and black

Apple only supports 3 options for the content attribute of the meta tag with no further customisation possibility. The options are;

white — displays a white status bar with black text and symbols. default value has the same effect as white but I prefer white over that. It’s less confusing as default being non-default behaviour! 🤯

— displays a white status bar with black text and symbols. value has the same effect as but I prefer white over that. It’s less confusing as being non-default behaviour! 🤯 black — displays a black status bar and white text and symbols. This is the default behaviour of a PWA on iOS, when this meta tag is not in place.

— displays a black status bar and white text and symbols. This is the default behaviour of a PWA on iOS, when this meta tag is not in place. black-translucent — displays a white text and symbols, with status bar using the same background color of your app’s body element.

4.4 Meta tags for social share

Progressive Web Apps are accessible via web by nature. This means that you can just share a link to your PWA on social media or instant messaging services.

For the convenience of your users who shares your app with their network, I recommend creating a nice preview of your app by adding Open Graph Protocol meta tags to your PWA.

A preview of your app’s link on Twitter with the Open Graph meta tags provided

Here’s an example of required meta tags to provide a nice user experience: