PWA Web App Manifest

When the @PWA annotation is found, Vaadin automatically generates a web app manifest file, named manifest.webmanifest.

Here is a list of properties in the file that you can customize. With the exception of scope, all properties can be set in the @PWA annotation.

  • name: The name of the application. Set this property in the name parameter in the @PWA annotation.

  • short_name: The short name of the application. This should not exceed 12 characters. It is used on the device home screen, where there is a limited amount of space. Set this property in the shortName parameter in the @PWA annotation.

  • description: The description of the application. The default value is an empty string. Set this property in the description parameter in the @PWA annotation.

  • display: Defines the preferred display mode for the application. The default value is standalone. Set this property in the display parameter in the @PWA annotation.

  • background_color: The background color of the application. The default value is #f2f2f2 (gray). Set this property in the backgroundColor parameter in the @PWA annotation.

  • theme_color: The theme color of application. The default value is #ffffff (white). Set this property in the backgroundColor parameter in the @PWA annotation.

  • scope: Defines the navigation scope of the website’s context. This restricts the web pages that can be viewed while the manifest is applied. The value is set to the context path of application. You cannot change this property in the @PWA annotation.

  • start_url: The start URL that is navigated to when the application is launched from the installed app (home screen). The default value is an empty string "" that points to the default route target for the application (marked with @Route("")). Set this property in the startPath parameter in the @PWA annotation.

  • icons: Automatically created from icon resources.

Note
For more information about these properties, see Web App Manifest in the MDN web docs.

Renaming the Manifest

You can change the default name (manifest.webmanifest) of the web app manifest, using the manifestPath parameter in the @PWA annotation.

Example: Setting the manifestPath parameter in the @PWA annotation.

@PWA(name = "My Progressive Web Application",
     shortName = "MyPWA",
     manifestPath = "manifest.json")

Overriding the Generated Manifest

You can override the generated manifest file with a custom manifest.

To override the generated web app manifest file:

  1. Create a custom manifest file and name it to match the file name set in the manifestPath parameter in the @PWA annotation, for example manifest.webmanifest.

  2. Add the file to your src/main/webapp/ folder.