.WEBMANIFEST File Extension

PWAs are web applications that can be installed to a device, usually on the device's desktop or home screen. This allows users to access the web application just as they'd access a native OS application.

For example, in Google Chrome, users can navigate to app.starbucks.com, open Google Chrome's Settings menu, and then select Install Starbucks to install the Starbucks PWA. This creates a Starbucks application that users can open and use to place orders through app.starbucks.com.

Each PWA includes a WEBMANIFEST file, which is a JSON file that specifies the app's name, start URL (the URL used to load the app's primary screen), application icons, and many other settings. Each WEBMANIFEST file may include the following JSON objects:

• background_color: Defines the background color of the PWA's load screen
• categories: Defines the category or categories the PWA belongs to
• description: Explains the app's purpose
• dir: Defines the default direction in which the PWA displays text (left-to-right or right-to-left)
• display:Defines the PWA's preferred display mode; can be set to fullscreen, standalone, minimal-ui, or browser
• iarc_rating_id: Contains the PWA's International Age Rating Coalition certification code
• icons: Specifies the images used as the PWA's icons
• lang: Specifies the PWA's primary language
• name: Specifies the PWA's name
• orientation Specifies the PWA's default orientation; can be set to any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, or portrait-secondary
• prefer_related_applications: Specifies whether the app(s) listed in the related_applications object should be preferred and opened instead of the PWA
• protocol_handlers: Lists the protocols the PWA can register and handle
• related_applications: Lists native applications that an OS can run instead of the PWA
• scope: Restricts what webpages can be viewed within the PWA
• screenshots: Specifies the images to be used as the PWA's screenshots in PWA stores
• short_name: Defines the PWA's short name for cases in which the full name cannot be shown
• shortcuts: Defines URLs used as links to key tasks or pages included in the PWA; used to assemble a context menu
• start_url: The URL to be loaded by default when the user opens the PWA
• theme_color: Defines the PWA's default theme color

Most WEBMANIFEST files include only some of the above settings. Developers typically link to WEBMANIFEST files within a PWA's primary .HTML file.