---
url: /guide/pwa-minimal-requirements.md
---
# PWA Minimal Requirements
Previous steps in this guide, are the minimal requirements and configuration to create the [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/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](/assets-generator/#pwa-minimal-icons-requirements) page in the [PWA Assets Generator](/assets-generator/) section.
## Entry Point
Your application entry point (usually `index.html`) **must** have the following entries in the `` 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
My Awesome App
```
## Web App Manifest
Your application [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/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](https://developer.mozilla.org/en-US/docs/Web/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):
```ts
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](/assets-generator/) to generate all the icons and images required for your PWA application.
You can also use [PWA Builder Image Generator](https://www.pwabuilder.com/imageGenerator) 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:
* [PWA Assets Generator](/assets-generator/) (recommended).
* [Favicon InBrowser.App](https://favicon.inbrowser.app/tools/favicon-generator) (recommended).
* [Favicon Generator](https://realfavicongenerator.net/).
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:
```ts
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](/deployment/) section.