search

shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.71k stars 312 forks source link

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

Open Azmeer02 opened 11 months ago

Azmeer02 commented 11 months ago

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.

david-buck commented 11 months ago

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 commented 10 months ago

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