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.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!