Comments (12)
@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
from nuxt.
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 thebeforeinstallprompt
event will not be triggered by the browser.If you're using
isInstalled
for another logic than to show aInstall
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.
from nuxt.
@Dimassss can you provide some explanation? rn we're using this https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed
from nuxt.
@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
from nuxt.
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.
from nuxt.
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.
from nuxt.
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
from nuxt.
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"
from nuxt.
I Will review the logic this weekend.
from nuxt.
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"
from nuxt.
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.
from nuxt.
Also when using fullscreen
:
from nuxt.
Related Issues (20)
- [Feature Request]: dynamic manifest.json via nitro HOT 2
- pwa does not cache data in Nuxt 3 SSR HOT 3
- Firefox injectManifest not working HOT 1
- Cannot find module '#pwa' or its corresponding type declarations. HOT 2
- vite-pwa/nuxt not working on ios
- Module does nothing ? (EDIT: No Firefox support ?) HOT 9
- Nuxt3 + PWA warnings in terminal HOT 6
- cant use npm run build
- I can't get 'start_url' to work for me
- showInstallPrompt not being called HOT 3
- Uncaught ReferenceError: __NUXT_ASYNC_CONTEXT__ is not defined HOT 7
- Service Worker "import sentry-release-injection" error when loading page HOT 19
- @vite-pwa/nuxt and vue-tsc conflict HOT 4
- API Request URLs Open in New Tab Redirect to 404 Page HOT 2
- Generate PWA Assets functionality not works when srcDir is not default HOT 15
- Default value of navigateFallbackAllowlist
- offline mode: when I navigate to another route, it shows nothing, but when I refresh then it shows the page from cache HOT 8
- Vite-pwa/nuxt not caching pages on a client-side rendered app HOT 3
- How to handle i18n ? HOT 1
- assets generation not working with nuxt 4 without this workaround HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.