Comments (12)
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.
@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.
@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)
- refresh dosen`t work when I setup vite-pwa into my nuxt app HOT 1
- Specyfing different theme colors in manifest for dark mode HOT 1
- State gets lost with "soft" reset when using @vite-pwa/nuxt and nuxt-auth-utils HOT 5
- How to disable caching "_nuxt" folder due to "The server responded with a status of 429" after every update!!! HOT 4
- How to use it with useAsyncData? HOT 1
- Service worker keeps showing 'trying to install' when using `app.baseURL` under injectManifest strategy HOT 1
- Importing the virtual module in a unit test with Vitest HOT 2
- When using PWA in development mode, it's not possible to visit routes directly HOT 5
- How To? Custom service worker! HOT 4
- Progressive Web Application Dynamic Route Problem with vite-pwa-nuxt in nuxt3 HOT 13
- Workbox Runtime Cache Not Working. HOT 8
- Manifest.webmanifest Failed to load resource: the server responded with a status of 401 HOT 3
- Problems on fresh app dev and prod HOT 3
- "@vite-pwa/nuxt": "^0.1.1" - manifest.webmanifest is 404 HOT 5
- module augmentation breaks others modules with unknown type
- Upgrade from v0.1.2 to v0.2.1 throws an error HOT 6
- Updating Nuxt to 3.8.1 breaks the globPatterns HOT 2
- Doesn't include public assets in nuxt v3.8.2. HOT 5
- Include appManifest in manifestEntries HOT 4
- `@nuxt/shema` module augmentation with vuetify entries!
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.