Web manifest customization

One of the benefits of Progressive web apps (PWAs) is the ability to be installed to the home screen without an app store similar to a native application.

The web app manifest provides information about your application that is necessary for the app to the installed to the home screen of your device.

Learn more about Web app manifests here.

To customize web manifest settings:

  1. On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.

  2. In the panel on the left under ScandiPWA, choose Webmanifest customization.

  3. Configure the following fields:

Name

Represents the name of the web application as it is usually displayed to the user

Short Name

Represents the name of the web application displayed to the user if there is not enough space to display name

Description

The description member is a string in which developers can explain what the application does

Language

Specifies the primary language for the values of the manifest's directionality-capable members

Theme Color

Defines the default theme color for the application. This sometimes affects how the OS displays the site (e.g., on Android's task switcher, the theme color surrounds the site).

Background Color

Defines a placeholder background color for the application page to display before its stylesheet is loaded.

Start URL

Represents the start URL of the web application — the prefered URL that should be loaded when the user launches the web application

Orientation

Defines the default orientation for all the website's top-level browsing contexts.

Display

Determines the developers’ preferred display mode for the website

International Age Rating Coalition (IARC) ID

Represents the International Age Rating Coalition (IARC) certification code of the web application. It is intended to be used to determine which ages the web application is appropriate for.

Scope

Defines the navigation scope of this web application's application context

4. When finished, click Save

5. On the Admin sidebar, tap Stores. Then under System, choose Cache Management.

6. Refresh invalidated cache types.

NOTE! The settings above are not supported on all browsers. If you do not see the changes on your browser after customizing web manifest, please check browser compatibility. Otherwise, add an issue here.

Last updated