Controlling the launch style

The manifest has properties which are used by the platform to know how to launch the application. The display property allows you to control how the Chrome browser is rendered. The default value is browser, which launches the PWA in a browser, with Chrome.

The minimal-ui option launches the PWA as an application, but with a minimal set of navigation UI.

standalone launches the PWA as a full screen application. The application takes up most of the screen, but some browser elements, like the status bar, may be rendered. Check the following code to understand the properties:

  "display": "fullscreen", 
  "orientation": "landscape", 

fullscreen mode launches the application in full screen and application mode without any browser elements. To the end user, it feels like they have opened a native app.

The values currently supported for the display are as follows:

• fullscreen: Launches the application in full screen.
• standalone: Similar to fullscreen, but may have a system UI visible.
• minimal-ui: Adds some minimal browser navigation UI components to the standalone view.
• browser: Opens the PWA as a regular web page in the browser.
• orientation: This property defines what angle the application renders. The primary choices are landscape and portrait. The values should be self-explanatory. No, you cannot render your app at a 45 degree tilt!
• The full set of orientation options are as follows:
  • any
  • natural
  • landscape
  • portrait
  • portrait-primary
  • portrait-secondary
  • landscape-primary
  • landscape-secondary

The theme_color and background_color are used to represent the app and provide the default background color. The difference between these two colors is in how they are applied:

  "background_color": "#fff", 
  "theme_color": "#f67c5f", 

The background color refers the default background color of the BODY elements. This is typically set in the site's CSS. If not, it defaults back to the browser's default. Today, the de facto background color is white, but in the early days, it was grey.

The theme_color defines what color the operating system uses to visualize the application. This includes the task switching experience. Each platform offers different user experiences related to how apps are presented, so application of the theme color will vary.

If your application uses a language that is right to left, you can specify that using the dir property. The direction is then applied to the name, short_name, and description fields.

The lang property relates to dir because it designates what language the site uses. It is also applied to the text properties. The value should be a standard language tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) consisting of a 2 or 3 character code followed by an optional subtag, for example, en-US or en-GB.

If you happen to have a native app available that provides functionality not available in your PWA, you can indicate its availability using the prefer_related_applications field and setting it as either true or false. Use this in conjunction with the related_applications value to hint at how to install the native app:

"related_applications": [ 
  { 
    "platform": "play", 
    "url": "https://play.google.com/store/apps/details?id=com.love2dev.2048", 
    "id": "com.love2dev.2048" 
  }, {

    "platform": "itunes", 
    "url": "https://itunes.apple.com/app/2048-pwa/id123456789" 
  }] 

Chrome recently added support for the manifest scope property, adding more control over how a PWA and the pages it links to are rendered. I will review how Chrome specifically uses this property within the concept of the WebAPK or improved add to homescreen experience section later.

The scope property defines the web application's context or range of URLs that are considered to be part of the progressive web application. Platforms can use this as they see fit, but the consensus is that if the user navigates within the scope, the browser will render PWA according to the manifest's display property. Any navigation outside of this scope results in the page being rendered with the full Chrome browser.