PWA Minimal Requirements

Previous steps in this guide, are the minimal requirements and configuration to create the Web App Manifest and the service worker when you build your application, but you'll need to include more options to meet PWA Minimal Requirements.

Your application must meet the PWA Minimal Requirements before deploying it to production or when testing your build on local: for example, when testing your PWA application on local using LightHouse.

To make your PWA application installable (one of the requirements), you will need to modify your application entry point, add some minimal entries to your Web App Manifest, allow search engines to crawl all your application pages and configure your server properly (only for production, on local you can use https-localhost dependency and node).

Check also the new PWA Minimal Requirements page in the PWA Assets Generator section.

Entry Point

Your application entry point (usually index.html) must have the following entries in the <head> section:

mobile viewport configuration
a title
a description
a favicon, check the following pages: https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 and this old one https://www.leereamsnyder.com/blog/favicons-in-2021
a link for apple-touch-icon
a link for mask-icon (right now there is no need to provide a mask-icon)
a meta entry for theme-color

For example, a minimal configuration (you must provide all the icons and images):

html

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>My Awesome App</title>
  <meta name="description" content="My Awesome App description">
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
  <meta name="theme-color" content="#ffffff">
</head>

Web App Manifest

Your application Web App Manifest must have the following entries:

a scope: omitted here for simplicity, the vite-plugin-pwa plugin will use the Vite base option to configure it (default is /)
a name
a short description
a description
a theme_color: must match the configured one on Entry Point theme-color
an icon with 192x192 size
an icon with 512x512 size

To configure the Web App Manifest, add the manifest entry to the vite-plugin-pwa plugin options.

Following with the example, here a minimal configuration (you must provide all the icons and images):

import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
      manifest: {
        name: 'My Awesome App',
        short_name: 'MyApp',
        description: 'My Awesome App description',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

You can also specify manifest: false to disable the Web App Manifest generation adding your own manifest.webmanifest/manifest.json file to the public folder on your application.

The vite-plugin-pwa has the full definition of the Web App Manifest options, if you want to have DX support when using your own web manifest, add the following entry to your custom web manifest (VSCode and JetBrains IDEs will use it to provide DX support):

json

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json"
}

Icons / Images

TIP

Check out the PWA Assets Generator to generate all the icons and images required for your PWA application.

You can also use PWA Builder Image Generator to generate all your PWA application's icons.

For manifest icons entry, you will need to create pwa-192x192.png, and pwa-512x512.png icons. The icons specified above are the minimum required to meet PWA, that is, icons with 192x192 and 512x512 resolutions.

We suggest creating a svg or png icon (if it is a png icon, with the maximum resolution possible) for your application and use it to generate your PWA icons:

For mask-icon in the entry point, use the svg or the png used to generate the favicon package.

Once generated, download the ZIP and use android-* icons for pwa-*:

use android-chrome-192x192.png for pwa-192x192.png
use android-chrome-512x512.png for pwa-512x512.png
apple-touch-icon.png is apple-touch-icon.png
favicon.ico is favicon.ico

If you want you can add the purpose: 'any maskable' icon to the Web App Manifest, but it is better to add 2 icons with any and maskable purposes:

icons: [
  {
    src: 'pwa-192x192.png',
    sizes: '192x192',
    type: 'image/png'
  },
  {
    src: 'pwa-512x512.png',
    sizes: '512x512',
    type: 'image/png'
  },
  {
    src: 'pwa-512x512.png',
    sizes: '512x512',
    type: 'image/png',
    purpose: 'any'
  },
  {
    src: 'pwa-512x512.png',
    sizes: '512x512',
    type: 'image/png',
    purpose: 'maskable'
  }
]

Search Engines

You must add a robots.txt file to allow search engines to crawl all your application pages, just add robots.txt to the public folder on your application:

txt

User-agent: *
Allow: /

WARNING

public folder must be on the root folder of your application, not inside the src folder.

Server Configuration

You can use the server you want, but your server must:

serve manifest.webmanifest with application/manifest+json mime type
serve your application over https
redirect from http to https

You can find more information in the Deploy section.

PWA Minimal Requirements ​

Entry Point ​

Web App Manifest ​

Icons / Images ​

Search Engines ​

Server Configuration ​