Debugging Progressive Web Apps Made Easy
Chrome: Visualize Application Manifest
Use Chrome Dev Tools to visualise and debug Progressive Web Apps (PWA). The tool helps easily review manifest file content, identify issues and recommend best practices.
Progressive Web Apps (PWA) bridge the gap between native apps and web applications. They provide the ability to install a web application and cache request/responses.
Often it is difficult to identify issues with an installable web application. You may notice the PWA doesn’t show the install button. Not quite clear on why the application cannot be installed. Chrome Dev Tools to rescue- it not only helps identify issues, but also recommends best practices.
As we explore Chrome Dev Tools, notice the options described in this post are not only available for Google Chrome, but also for Microsoft Edge and Opera web browser. The Dev Tools are part of the open source Chromium project. You may find these options on browsers based on this project.
The Manifest File
A Web Manifest file is an important part of a PWA, which provides needed configuration for installing your application.
Let us explore the manifest file with Chrome Dev Tools. Launch Dev Tools ( Menu → More Tools → Developer Tools), navigate to Application tab and Select Manifest.
Notice a highlighted link in blue under the title App Manifest. The tool previews manifest with the help of a file manifest.webmanifest. Browsers support an extension “.webmanifest” or .json (manifest.json).
Next, let us preview various fields on the manifest file with the help of Chrome Dev Tools.
Name: Installed App name.
Short name: Where space is limited, short_name property in the manifest is used as an app name.
Description: A detailed description of the app
Computed App Id: Browsers use an id property in the manifest to uniquely identify the PWA. If the id matches, it uses the installed application. If the ids do not match, it creates a new PWA even if the URL is the same.
Start Url is defined by a property start_url in the manifest file. It configures the start point for the app when the installed app is launched.
Theme color is defined by a field theme_color. Specifies toolbar color, one of the preview colors in task switcher etc.
Background color is defined by background_color configures splash screen’s background color.
Display: The display property may have one of the following values
- fullscreen: Takes up the entire display area. Does not show browser UI.
- standalone: Hides standard browser elements. Opens in its own window.
- minimal-ui: Provides minimal navigation elements of the browser like reload and back buttons.
- browser: Launches the application in a typical browser window.
Icons: Various icons with multiple sizes and dimensions to be used by the app. Each icon is configured by the following fields,
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},- src: Configures location of the icon
- size: Configures dimension of the icon in pixels
- type: The image format
- purpose: a) Use a value any when masking is not supported. The image is expected to be full-size with no padding. b) Use a value maskable, which assumes padding on the image. Few platforms (eg. Android) crop image to a different shape and size. Padded images with masking enabled help crop out only the unimportant border on the image. It ensures the needed image or the actual content is not lost.
Debug Progressive Web Apps
The Chrome dev tool highlights errors and warnings, which help identify issues with Progressive Web Apps. Consider the following example.
- Notice, a warning on an icon with any maskable value for a property, purpose. Following configuration resulted in the warning. The warning indicates it is a good practice to either use any (no padding on the icon) or maskable; not both.
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},- The second warning is on installability. It indicates the service worker is unavailable or configured incorrectly. Verify service worker code to fix this issue.
