keyboard_backspace wifi_off

Installation

Progressive Web Apps can be installed to the home screen on mobile devices and desktop on laptops and desktop computers. On Chromium based browsers, the beforeinstallprompt event is fired when the web app is eligible to be installed. This event will display a native install dialog that includes a button to install the web app.

Demo

Click the "Install" button below to install this web app. In supporting browsers, the native install dialog will appear and in non-supporting browsers, a bottom sheet with instructions how to install this web app will be displayed.

add_to_home_screen

Experimental: Web Install API

The Web Install API allows web apps to be installed to the home screen of a device. It can be used to install the current web app or web apps from other domains. This enables installing web apps from app stores for example.

To install the current web app, use navigator.install();

To install a web app from another domain, use navigator.install('https://otherdomain.com', 'https://otherdomain.com/app-id'); where the second argument is the Computed app ID of the web app.

To find the Computed app ID, open the Application tab in the Chrome DevTools, click "Manifest" on the left, and look for the "Computed app ID" field in the right pane.

The Web Install API is supported in Chrome and Edge 143+ through an origin trial.

Demo

Click the button below to install the store.app and pwastore.io web apps from this PWA.

Experimental: HTMLInstallElement

The declarative <install> renders a button that allows web apps to be installed to the home screen of a device. Just like the Web Install API, it can be used to install the current web app or web apps from other domains.

The content and presentation of the button are controlled by the user agent.

When the app is not installed, it will show and install icon and the text "Install". When the app is installed, it will show a launch icon and the text "Launch".

When used without attributes, it will install the current web app:

<install></install>

With the attributes installurl and manifestid, it can be used to install web apps from other domains:

<install installurl="https://whatpwacando.today/" manifestid="https://whatpwacando.today/pwa-today"> [Fallback content goes here.] </install>

installurl specifies the web app to install. If unspecified, the current web app will be installed, manifestid specifies the computed id of the web app to install. If unspecified, the manifest.json file of the web app at installurl must have a custom id defined. If specified, it must match the computed id of the web app to be installed.

Demo

Click the <install> element below to install the current web app. After installation, refresh the page to see the button show a launch icon and the text "Launch".

Handling the install prompt

A best-practice is to defer the display of the install dialog using event.preventDefault() and displaying it when it makes more sense, for example, when the user explicitly clicks a button to install the web app.

let deferredEvent; window.addEventListener('beforeinstallprompt', (e) => { // prevent the browser from displaying the default install dialog e.preventDefault(); // Stash the event so it can be triggered later when the user clicks the button deferredEvent = e; }); installButton.addEventListener('click', () => { // if the deferredEvent exists, call its prompt method to display the install dialog if(deferredEvent) { deferredEvent.prompt(); } });

For a web app to be eligible to be installed, it must meet some technical requirements:

  • The web app must have a manifest.json file
  • The web app must be served over https

The manifest.json file tells the browser how the PWA should appear and behave on the device and for a web app to be installable it must have the following required members:

  • name or short_name
  • icons must contain a 192px and a 512px icon
  • start_url
  • display and/or display_override
  • prefer_related_applications must be false or not present

For a description of these members, see the Web app manifest reference

In addition to these required members, a description of the web app and an optional array of screenshots can be included that will be shown in the native install dialog, bringing the install process closer to that of native apps.

Screenshots must follow these criteria:

  • Width and height must be at least 320px and at most 3,840px.
  • The maximum dimension can't be more than 2.3 times as long as the minimum dimension.
  • All screenshots with the same form factor value must have identical aspect ratios.
  • Only JPEG and PNG image formats are supported.
  • Only eight screenshots will be shown. If more are added, the user agent simply ignores them.

In addition, all screenshots must have a form_factor property that indicates whether the screenshot is displayed on mobile devices (value is "narrow") or desktop devices (value is "wide").

<!doctype html> <html lang="en"> <head> <!-- manifest.json must be included on each page like this --> <link rel="manifest" href="manifest.json"> </head> <body></body> </html> { "name": "What PWA Can Do Today", "short_name": "PWA Today", "description": "What PWA Can Do Today is a showcase of what is possible with Progressive Web Apps today.\\n\\nThe app is itself a Progressive Web App which means it can be installed to the home screen of your mobile device or to your desktop.", "id": "pwa-today", "start_url": "/?source=pwa", "display": "standalone", "icons": [ { "src": "src/img/icons/manifest-icon-192.maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "src/img/icons/manifest-icon-512.maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }, ], "screenshots": [ { "src": "/src/img/screenshots/shot1.png", "sizes": "400x822", "type": "image/png", "form_factor": "narrow" <--- screenshot for mobile devices }, { "src": "/src/img/screenshots/shot7.png", "sizes": "1280x676", "type": "image/png", "form_factor": "wide" <--- screenshot for desktop devices }, ] } // handle the beforeinstallprompt event window.addEventListener('beforeinstallprompt', e => { // prevent the install dialog from appearing too early e.preventDefault(); // store the event for later use window.deferredPrompt = e; }); // event listener for the install button click installButton.addEventListener('click', () => { if(window.deferredPrompt) { // call the prompt method on the deferredPrompt object to display the install dialog window.deferredPrompt.prompt(); } else { // show a dialog with instructions for browsers that don't support beforeinstallprompt } }

Documentation

Making Progressive Web Apps Installable on MDN

Browser support

The beforeinstallprompt event and the screenshots member of the manifest.json file are supported in Chromium based browsers, including Chrome, Edge, and Opera. For other browsers, you need to display a dialog with instructions on how to install the web app.

What PWA Can Do Today A showcase of what is possible with Progressive Web Apps today