How to detect if your PWA is installed
November 14, 2020
You might want to show a different UI in your progressive web app depending on whether the appâs âdownloadedâ (added to the userâs home screen) vs. when itâs not.
You have to detect this in two different ways: one for iOS, and one for Android. Hereâs how to do it in javascript:
function isInstalled() {
// For iOS
if(window.navigator.standalone) return true
// For Android
if(window.matchMedia('(display-mode: standalone)').matches) return true
// If neither is true, it's not installed
return false
}
You can now call this function isInstalled()
in your appâs javascript to see whether the user has added the app to their home screen yet.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects Iâm working on.