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

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