We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

App Center

How to make PWAs installable

In the last article, we read about how js13kPWA works offline thanks to its service worker, but we can even further and allow users to install the web app on supporting mobile browsers, just like it was a native app. This article explains how to achieve this, using the web manifest and a feature called add to home screen.

These technologies allow the app to be launched directly from the home screen instead of starting the browser manually and typing in the URL. Your web app can sit next to native applications as first class citizens. It makes them easier to access, and you can also specify that apps should run fullscreen without the surrounding browser chrome, making them feel even more like native.


To make the website installable, it needs the following things in place:

  • A web manifest, as discussed above, with the correct fields filled in.
  • The website to be served from a secure (HTTPS) domain
  • An icon to represent the app on the device
  • A service worker registered, to make the app work offline (this is only required by Chrome for Android currently)

The manifest file

The key element is a web manifest file, which lists all the information about the website in a JSON format.

It usually resides in the root folder of a web app. It contains useful information, such as the app’s title, paths to different sized icons that can be used to represent the app on a mobile OS (e.g. as the home screen icon), and a background color to use in loading or splash screens. This information is needed for the browser to present the web app properly when installing, and on the home screen.

The js13kpwa.webmanifest file of the js13kPWA web app is included in the <head> section of the index.html file via the following line of code:

<link rel="manifest" href="js13kpwa.webmanifest">

Note: There are a few common extensions that have been used for manifests in the past: manifest.webapp was popular in Firefox OS app manifests, and many use manifest.json for web manifests as the contents are organized in a JSON structure. However, the .webmanifest extension is explicitly mentioned in the W3C manifest specification, so let's stick to that.

The content of the file looks like this:

    "name": "js13kGames Progressive Web App",
    "short_name": "js13kPWA",
    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
    "icons": [
            "src": "icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        // ...
            "src": "icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
    "start_url": "/pwa-examples/js13kpwa/index.html",
    "display": "fullscreen",
    "theme_color": "#B12A34",
    "background_color": "#B12A34"

Most of the fields are self-explanatory, but let's break down the document and explain them in detail:

  • name: The name of your web app.
  • short_name: Short name to be shown on the home screen.
  • description: A sentence or two explaining what your app does.
  • icons: A bunch of icon information — source URLs, sizes, and types. Be sure to include at least a few, so the best fit will be chosen for the user's device.
  • start_url: The index document to launched when starting the app.
  • display: How the app is displayed; can be fullscreen, standalone, minimal-ui, or browser
  • theme_color: A primary color for the UI, used by operating system
  • background_color: A color for background, used during install and on the splash screen

The bare minimum requirement for a Web manifest is name and at least one icon (with src, size and type). The description, short_name, and start_url are recommended. There are even more fields you can use than listed above — be sure to check the Web App Manifest reference for details.

Add to home screen

"Add to home screen" (or a2hs for short) is a feature implemented by mobile browsers that takes the information found in an app's web manifest and uses them to represent the app on the device's home screen with an icon and name. This only works if the app meets all the necessary requirements (see above).

When the user visits the PWA with a supporting mobile browser, it should display a banner indicating that it's possible to install the app as a PWA.

After clicking it, the install banner will be shown. That banner will be automatically created based on the information from the manifest file — the name and icon will be visible on the prompt.

If you click on the button, there will be an extra step showing the user what it will look like.

When confirmed, the app will be installed on the home screen.

After that, you can launch it and start using it immediately. Notice that PWAs will sometimes (depending on the browser or mobile operating system you are using) have a small browser image on the bottom right corner of their icon to inform the user about their web nature.


Splash screen

In some browsers, a splash screen is also generated from the information in the manifest, which will be shown when the PWA is launched.

The icon and theme/background colors are used to create this.


In this article we learned about how we can make PWAs installable, using web manifest and Add to home screen.

For more information on Add to Home screen, be sure to read our Add to Home screen guide for more details. Browser support is currently limited to Firefox for Android 58+, Mobile Chrome and Android Webview 31+, and Opera for Android 32+, but this should improve in the near future.

Now let's move to the last piece of the PWA puzzle — re-engagement via push notifications.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,