Skip to content

Web App Manifest

Weston Ruter edited this page Apr 4, 2020 · 13 revisions

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. For example, 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):

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

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;
} );

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

Clone this wiki locally