Skip to content

Web App Manifest

Weston Ruter edited this page Mar 28, 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.

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()

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

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

Clone this wiki locally