Web App Manifest

As noted in a Google guide:

The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the users mobile device or desktop.

The plugin exposes the web app manifest via the REST API at /wp-json/wp/v2/web-app-manifest. A response looks like:

{
    "name": "WordPress Develop",
    "short_name": "WordPress",
    "description": "Just another WordPress site",
    "lang": "en-US",
    "dir": "ltr",
    "start_url": "https://example.com",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "minimal-ui",
    "icons": [
        {
            "sizes": "192x192",
            "src": "https://example.com/wp-content/uploads/2018/05/example-192x192.png",
            "type": "image/png"
        },
        {
            "sizes": "512x512",
            "src": "https://example.com/wp-content/uploads/2018/05/example.png",
            "type": "image/png"
        }
    ]
}

A rel=manifest link to this endpoint is added at wp_head.

Properties

The manifest is populated with default values including:

• name: the site title from get_option('blogname')
• short_name: copied from site title if not greater than 12 characters
• description: the site tagline from get_option('blogdescription')
• lang: the site language from get_bloginfo( 'language' )
• dir: the site language direction from is_rtl()
• start_url: the home URL from get_home_url()
• theme_color: a theme's custom background via get_background_color()
• background_color: also populated with theme's custom background
• display: minimal-ui is used as the default.
• icons: the site icon via get_site_icon_url()

Filtering

There is a web_app_manifest filter which is passed the above array so that plugins and themes can customize the manifest.

Short Name

If your site title is longer than 12 characters, you can supply a short name via a filter in PHP (see issue for adding a UI for this, and see also the mini plugin that implements this):

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['short_name'] = 'Shortness';
    return $manifest;
} );

Theme Color

If your theme theme does not have a background color setting to derive the theme_color from, you can also specify it yourself also via a filter:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['theme_color'] = '#0073AA';
    return $manifest;
} );

Icon

If you want to indicate that your selected Site Icon is maskable (see also #304):

add_filter( 'web_app_manifest', static function ( $manifest ) {
	$manifest['icons'] = array_map(
		static function ( $icon ) {
			$icon['purpose'] = 'any maskable';
			return $icon;
		},
		$manifest['icons']
	);
	return $manifest;
} );

Or if you want to override the icon to be totally different from the Site Icon:

add_filter( 'web_app_manifest', static function ( $manifest ) {
	$manifest['icons'] = array(
		array(
			'src'     => home_url( '/icon-192x192.png' ),
			'sizes'   => '192x192',
			'type'    => 'image/png',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/icon-maskable-192x192.png' ),
			'sizes'   => '192x192',
			'type'    => 'image/png',
			'purpose' => 'maskable',
		),
		array(
			'src'     => home_url( '/icon-512x512.png' ),
			'sizes'   => '512x512',
			'type'    => 'image/png',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/icon-maskable-512x512.png' ),
			'sizes'   => '512x512',
			'type'    => 'image/png',
			'purpose' => 'maskable',
		),
	);
	return $manifest;
} );

Display

By default a minimal-ui is used for the display. This can be filtered to be fullscreen, standalone, or browser as follows:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['display'] = 'fullscreen';
    return $manifest;
} );

---

See labeled GitHub issues and see WordPress core tracking ticket #43328.