[Solved] Platform detection for PWA?
-
I notice there is platform detection for mobile, desktop, cordova, electron, etc. But is there no way to detect whether an app has been installed as a PWA?
My problem is this: since the PWA will not be framed by the browser chrome, in cases where it is running I would like to show a special header for the app. Do I need to create completely separate apps for PWA and browser to make this happen?
-
The answer is complex, based on exactly what you want to achieve. But a starting point for you: use
process.env.MODEwhich is set to ‘pwa’. -
OK thanks. According to this page (https://developers.google.com/web/fundamentals/app-install-banners/) it is possible to detect whether we are running in pwa mode as well. But for the life of me, I still can’t get the userprompt to fire. Is this something that quasar builds in automatically, or do I need to add it? Using chrome dev tools I see the manifest and service worker files correctly attached to the app, but no prompt is given to the user to install the app. If I manually trigger the “add to home screen” by clicking on the share icon in iOS safari, searching for the “add to home screen” link and clicking on it, it will properly install. So the problem seems not to be in the configuration of the pwa, but in my interface not presenting an install div or button or link to the user when they visit the site/app. I have tried for quite some time to follow the instructions of Google above, but nothing triggers and I just get eslint errors about deferredPrompt being defined but not used. IS there no tutorial anywhere that applies to either Quasar or Vue.js that shows how to trigger this PWA prompt? Any help is greatly appreciated, I am stuck here.
-
I guess I could use something like this: https://github.com/cubiq/add-to-homescreen but that seems a terrible workaround. I can’t find any instructions that seem to apply to a vue.js app, let alone a Quasar app…
-
hm, after reading this article (https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7) I am now thinking that iOS does not implement web install banners AT ALL, meaning the user on ios would always have to manually install. Perhaps this is my problem, I have not been testing on Android, just iOS.
-
UGH, that was my problem. The web install banner AUTOMATICALLY appears in chrome on Android, I didn’t have to do anything! My confusion was clearly that I thought iOS supported these to and it does not. You might want to add this to the PWA docs, it would save a lot of people a lot of time I bet.
