What is Web App Manifest? What are its main properties and configurations?

Web App Manifest is a JSON file used to define PWA metadata and installation information. It allows web applications to be installed on devices like native applications.

Basic Structure of Manifest File

json
{
  "name": "My PWA App",
  "short_name": "MyPWA",
  "description": "This is a PWA app example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Main Properties of Manifest

1. Application Names

• name: Full application name
• short_name: Short application name (displayed below home screen icon)

2. Launch Configuration

• start_url: URL when application starts
• scope: Application scope range
• orientation: Screen orientation (portrait, landscape, etc.)

3. Display Mode

• display: Defines how the application is displayed
  • fullscreen: Full screen display
  • standalone: Standalone application mode (recommended)
  • minimal-ui: Minimal UI
  • browser: Browser mode

4. Visual Configuration

• background_color: Splash screen background color
• theme_color: Application theme color (affects browser UI)
• icons: Application icon array

5. Other Properties

• description: Application description
• dir: Text direction (ltr, rtl)
• lang: Application language
• categories: Application category array
• screenshots: Application screenshot array

Icon Requirements

Icon Sizes

• 192x192: For Android devices
• 512x512: For iOS devices and some Android devices
• Recommend providing multiple sizes to adapt to different devices

Icon Formats

• Supports PNG, WebP, ICO and other formats
• Recommend using PNG format for best compatibility

Icon Purposes

• purpose property can specify icon usage:
  • any: General purpose icon
  • maskable: Maskable icon (adapts to different shapes)
  • monochrome: Monochrome icon

Referencing Manifest

Reference Manifest in HTML:

html
<link rel="manifest" href="/manifest.json">

Role of Manifest

1. Installation Prompt: Browser displays installation prompt when Manifest is detected
2. Home Screen Icon: Defines icon and name displayed on home screen
3. Splash Screen: Defines background color and icon of splash screen
4. Display Mode: Controls how application is displayed (full screen, standalone, etc.)
5. Theme Color: Affects browser address bar and status bar colors
6. Application Metadata: Provides application name, description and other information

Best Practices

1. Provide Complete Information: Fill in all necessary properties
2. Optimize Icons: Provide icons of multiple sizes and purposes
3. Set Theme Color: Use brand color as theme color
4. Configure Display Mode: Choose appropriate display mode based on application type
5. Test Installation: Test installation experience on different devices
6. SEO Optimization: Add description and categories properties
7. Version Control: Add version number to Manifest for easier updates

Browser Compatibility

• Chrome, Edge, Firefox: Full support
• Safari: Partial support (iOS 11.3+)
• Must be used with HTTPS

Debugging and Validation

Use Chrome DevTools to validate Manifest:

1. Open Application panel
2. View Manifest tab
3. Check for errors or warnings
4. Test "Add to home screen" functionality