Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to Identify Application Installation Status in iOS and Android using next-pwa #487

Open
Azmeer02 opened this issue Jul 18, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@Azmeer02
Copy link

Issue Description:

I'm using next-pwa for my Next.js project, and I have successfully converted my application into a Progressive Web App (PWA). However, I'm facing a challenge in identifying whether the PWA is installed or not on both iOS and Android devices to improve the user experience.

Steps to Reproduce:

  1. Implement next-pwa in a Next.js project.
  2. Convert the application to a PWA using the next-pwa plugin.
  3. Attempt to identify the application installation status on both iOS and Android.

Expected Behavior:

I expect to find a way to determine whether the PWA is installed on the user's device, so I can provide an enhanced user experience, such as displaying a custom install banner or enabling additional features for installed users.

Current Behavior:

As of now, I have not found a suitable method or library within the next-pwa documentation or examples to identify the application installation status in both iOS and Android devices.

Any guidance or pointers on how to identify the installation status of a PWA in both iOS and Android using next-pwa would be greatly appreciated.

@Azmeer02 Azmeer02 added the bug Something isn't working label Jul 18, 2023
@david-buck
Copy link

This doesn't seem to be a bug.

If you want to know if the app is installed, you can put a query string on the start-url in your manifest:

  "start_url": "/?installed",

In one of my apps, I have installed instances go to a /start route that checks local storage and does some config before the app starts, then does a router.replace() to the correct main page.

Once either of these criteria have been met, you can stash something on the device to make it easier to identify if the app is installed or not using local storage or indexedDB.

@thegitparticle
Copy link

thegitparticle commented Aug 26, 2023

If you are trying to find out is when the user opens your web-app, it to show varying info based if it's opened in PWA mode or not, try this

const isPWA = window.matchMedia("(display-mode: standalone)").matches || (navigator as any).standalone;

let me know if this makes sense or you found a better way

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants