StackCode

How to Create a Web App Manifest for Enhanced User Experience and Discoverability

Published in HTML5 Features 4 mins read

27

Creating a web app manifest is a crucial step in building a progressive web app (PWA) that offers a native-like experience to users. This document, written in JSON format, provides instructions to the browser on how to display and interact with your web app.

What Does a Web App Manifest Include?

The web app manifest defines key aspects of your web app, including:

  • Name: The name of your app, displayed in various contexts like the home screen and app launcher.
  • Short Name: A shorter version of the app name used in constrained spaces like the app launcher icon.
  • Icons: Various sizes of icons representing your app, used for different display environments.
  • Start URL: The initial page users are directed to when launching the app.
  • Display Mode: Controls the way the app is displayed, such as full-screen or as a standalone window.
  • Orientation: Specifies the preferred orientation of the app, such as portrait or landscape.
  • Background Color: The color used for the app's background when launching.
  • Theme Color: The color used for the browser's toolbar or status bar in the app.

Creating a Web App Manifest

  1. Create a manifest.json File:

    • Within the root directory of your web app, create a new file named manifest.json.

  2. Define Manifest Properties:

    • Open the manifest.json file and add the following code, filling in the values specific to your web app:
    {
  "name": "My Web App",
  "short_name": "My App",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

  3. Include Manifest in HTML:

    • Add the following line within the <head> section of your index.html file:
    <link rel="manifest" href="manifest.json">

  4. Test Your Manifest:

    • Open your web app in a browser that supports PWAs.
    • Right-click on the webpage and select "Inspect" or "Developer Tools."
    • Navigate to the "Application" tab and then to the "Manifest" section.
    • Verify that the manifest file is loaded correctly and that all the properties are displayed.

Advanced Manifest Features:

  • scope: Defines the URL paths that are included within the app's scope.
  • shortcuts: Enables adding shortcuts for specific features or pages within the app.
  • prefer_related_applications: Provides a way to suggest related web apps to users.

Important Considerations:

  • Icon Sizes: Ensure your icons are optimized for different screen sizes and resolutions.
  • Offline Capabilities: The manifest is crucial for enabling offline functionality for your PWA.
  • Service Workers: Pair your manifest with service workers to enhance offline capabilities and improve performance.

Example:

Let's say you're building a news app called "Daily News." You can create a manifest file like this:

{
  "name": "Daily News",
  "short_name": "News",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#f5f5f5",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Further Exploration:

For a deeper dive into the technical aspects of web app manifests, consult the official documentation: https://developer.mozilla.org/en-US/docs/Web/Manifest

Related Articles