Pete LePage

Is my PWA installed?

By Pete LePage / On July 18, 2019 / In web development

Tagged pwaout of date

I got a question via email this morning asking if there was a way for a PWA to check if it’s installed. The site wanted to know what state the app was running in, either a browser tab, or a standalone window.

First, you can use the getInstalledRelatedApps() API to check if your PWA is already installed.

You can check what ‘state’ the PWA is running in (browser tab, or standalone window) with a little JavaScript to check to see if the CSS display mode is standalone.

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('display-mode is standalone');
}

I also recommend you listen for the appinstalled event, it’s fired when the user has installed your app, whether from your install promotion, or from Chrome.

window.addEventListener('appinstalled', (evt) => {
  console.log('a2hs installed');
});

For more details on how to customize the install experience of a Progressive Web App, check out the PWA docs on web.dev. And for patterns to promote the installation of your PWA, check out Patterns for Promoting PWA Installation.