Bug fix: $pwa.isInstalled ref update for nuxt3. (it does not work now, but i have solution)

[Dimassss]

export default function usePWAState () {
  const c = new AbortController()
  const state = reactive({
    mode: 'browser'
  })

  state.mode = ['fullscreen', 'standalone', 'minimal-ui'].find(displayMode => process.client && window.matchMedia(`(display-mode: ${displayMode})`).matches) ?? 'browser'

  onMounted(() => {
    if (process.client) {
      for (const displayMode of ['fullscreen', 'standalone', 'minimal-ui']) {
        window.matchMedia(`(display-mode: ${displayMode})`).addEventListener('change', (e) => {
          state.mode = e.matches ? displayMode : 'browser'
        }, { signal: c.signal })
      }
    }
  })

  onUnmounted(() => {
    c.abort()
  })

  return computed(() => state)
}

Please, analyze that code in order to improve code of this PWA package at least for nuxt3. As you can see, this code sets state mode of pwa. By 'mode' I mean the place where is opened app. This is very important code as it is not static (as it is now). So whenever user switch from browser to app or vide-versa, my app will always see this by watch state.mode ref.

[userquin]

@Dimassss can you provide some explanation? rn we're using this https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed

[Dimassss]

@userquin this solution works, but is buggy. The reason is that setting pwa state is done only on EXECUTION (setup stage) of that code. After that as code is executed it is never updated until next full page refresh (so the code will be executed again and only then it will be noticed that we are in PWA mode). Why is my solution better in that case? I use window.matchMedia as you, but then I attach event listener to it which will listen to all changes of display mode. So now you can switch between browser view and pwa view and it will change its state immidiatly with that switching, so now no full page reload is needed. At the moment, it does not work like that. When I switch between browser view to pwa view my app does not see that change, until I do full page refresh (click F5), so vite-pwa module will be executed again and reset its property isInstalled

[userquin]

What do you mean switching between browser and pwa? When you install the pwa the browser Will close the app, if you open the app in the browser again you're running the app in the browser.

[userquin]

There is no way to know if the PWA is installed globally: isInstalled is only about the current client state and it is not a global state. If the pwa is installed the beforeinstallprompt event will not be triggered by the browser.

If you're using isInstalled for another logic than to show a Install button you can use your logic.

[Dimassss]

What do you mean switching between browser and pwa? When you install the pwa the browser Will close the app, if you open the app in the browser again you're running the app in the browser.

Actually, browser do not close the app. If you have you app opened in the browser and then you click 'Open with $appname$' all it does is simply changing place where the app is rendered, but the app thread is not killed and started again. So there is on refresh after you opened url by an app. As a result, you get into situation when isInstalled is false, however you are looking at an application which is installed. It was tested in google chrome. This is why I have written that code, so I can deal with this problem in my nuxt 3 app. There is content which must be displayed only in browser and never in the app window. So I have to determine reactivly when I'm in pwa view. Your code do not give me this ability. User must do full page reload so variables will change their values. Again, that refresh must be done, because there is no process killing of app or any reopening process is done. You check that by very easy test: make page where is input field. Write smth in that field. Install/open that page by an app and you will see that text you have written in that field is still there. What does it mean? It means that app is not refreshed. It simply changed the place where it is rendered.

[Dimassss]

There is no way to know if the PWA is installed globally: isInstalled is only about the current client state and it is not a global state. If the pwa is installed the beforeinstallprompt event will not be triggered by the browser.

If you're using isInstalled for another logic than to show a Install button you can use your logic.

I know that. As I've seen in the code, isInstalled is about current state of the currently opened page/app. isInstalled is true when page is opened in pwa mode and is false if is opened in browser. But the problem is that isInstalled does not follow this rule. As I said, the refresh must be done until isInstalled will get its proper value. In order to fix that, I propose to you use event listener on css media query. So every time user switches between pwa and browser mode it will reactivly changes its value. And yes, it must be done reactivly, because page is not close or reloaded in any way when you install it as pwa and is opened automaticly in window view.

[slucas-elsa]

I understand the need, the problem as I see it is :

• I start with the browser with a PWA that is already installed -> isInstalled is false but the install button does not appear
• I click on the link in the address bar of my browser to go to the installed app -> isInstalled is still false
• I refresh (F5) my app -> isInstalled is true

So isInstalled is not reactive and also it answer this question : "am I currently using an installed pwa APP" and not "is the PWA app installed"

[userquin]

I Will review the logic this weekend.

[Wuraim]

Any news on that problem ? My team and I are running on the same problem

I understand the need, the problem as I see it is :

• I start with the browser with a PWA that is already installed -> isInstalled is false but the install button does not appear
• I click on the link in the address bar of my browser to go to the installed app -> isInstalled is still false
• I refresh (F5) my app -> isInstalled is true

So isInstalled is not reactive and also it answer this question : "am I currently using an installed pwa APP" and not "is the PWA app installed"

[userquin]

There is a small problem with fullscreen display since media query will match with the pwa installed or not, so beware using this display in the web manifest, I'm finishing some local tests, PR in a few minutes.

I'm exposing a new reactive option: $pwa.isPWAInstalled. If the display is fullscreen or browser, the logic will use standalone for the media query (the virtual:nuxt-pwa-configuration virtual module will expose also the display option configured in the web manifest).

You can use this from console to check if PWA installed when using the playground (I'll add a text to the home page): useNuxtApp().$pwa.isPWAInstalled

EDIT: seems to work when installing and uninstalling the PWA.

[userquin]

Also when using fullscreen:

[userquin]

@Wuraim @Dimassss released v0.3.5 with the new isPWAInstalled reactive property, added also to the docs (await prompt): https://vite-pwa-org.netlify.app/frameworks/nuxt.html#pwa-installation-status