Detecting PWA Mode

Checking if your PWA is running as a normal web page or if it’s been installed to the Home Screen or dock is quick and easy from both javscript nad CSS.

Javascript

For the javascript side of things, I make a simple function to check the display mode:

1
2
3
function pwaMode() {
  return window.mediaMatch("(display-mode: standalone), (display-mode: fullscreen)").matches
}

This will return true of the app is currently running in standalone or full screen mode, ie you are installed!

CSS

Similarily from the CSS side, wrapping your CSS with a media query will let you check the mode you are currently running in:

1
2
3
4
@media (display-mode: standalone), (display-mode: fullscreen) {
  .pwa-block { display: block; }
  .pwa-hidden { display: none; }
}

You can show an element like this now: <div class="hidden pwa-block">PWA only</div>.

Tailwind

Gotta share some love for Tailwind by setting up a custom variant. First, we need to make the custom variant. This is done in your tailwind.config.js:

1
2
3
4
5
6
7
8
9
10
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: {
    plugin(function({ addVariant }) {
      addVariant("pwa", "@media (display-mode: standalone), (display-mode: fullscreen)")
    })
  }
}

And now we can use the pwa variant anywhere you would normally use a variant:

1
2
3
<div id="install-banner" class="block pwa:hidden">
  <!-- content -->
</div>

Please note, if you are looking to make an install style, do so responsibly. Remember if the user dismissed it so they don’t get a popup on every page load. They user will approciate it!