Individuals will quickly want to mark this question as a duplicate, but, please read this question first.
I have a PWA. A user can successfully install this app from my website. However, they may visit the website again from their browser. If they do this, Chrome shows a "choose app" icon in place of the "install" icon in the address bar. My question is, can I programmatically detect if the app has been installed?
The common recommendation is to use window.matchMedia('(display-mode: standalone)').matches. However, in the scenario above, the display-mode will be "tab" (i.e. not 'standalone'). I would like to detect if the app is installed in my page and "open" the app just like Chrome does. Is this possible?
I have an Add to Homescreen library that tries to abstract away all the different browser/platform differences.
It now has a hook/callback in the library that will execute your code if the application can be installed. So, it should not fire that callback if the application is installed.
It also persist an add to homescreen state in localStorage because there is not a real way to really know if the app has been installed or not. The values persisted let A2HS know if the app has been installed from the library. In Edge and Chrome it will know because the beforeInstallPrompt event will not trigger.
https://love2dev.com/pwa/add-to-homescreen-library/
GitHub Repo - https://github.com/docluv/add-to-homescreen
Related
Using chrome, I tried going to Microsoft Store and when I click the button GET to install an app, a dialog shows up and asks to open Microsoft Store, of course after clicking it I'm redirected to Microsoft Store App.
I wanted to do the same by launching Windows Settings and if possible I wanted to redirect the client specifically to Settings > Update & Security > Check for Updates.
I have a thought that it can be done using JavaScript but I'm not sure. I found the same question but I think it is specifically to Firefox and it confused me.
It appears that it is possible, but I'm not sure though if this is part of JavasScript, the list of commands can be found in Microsoft docs, there are multiple options and not just for Windows Settings.
What I am looking for is ms-settings:windowsupdate.
Example of usage
Check for updates
Hello we have a question about PWA and window.close events,
Before asking the question we will give some background information why we are asking this question in the first place.
We are trying to rebuild our XUL appllication to a HTML5 one with webcomponents and PWA. In this XUL Application there are allot of pop-ups with there own child windows,the user shouldn't be able to close a parent window while still having edited data inside a child window. This problem is solved when using the beforeunload event on the window object. One small problem you can't really customize this events behavior the user just gets the default message of data loss.The custom message behavior isn't available anymore because the behavior is obsolete since chrome 51.
So far the background of the problem we are trying to solve.
The question,
isn't there any setting inside the PWA manifest.json so you could ask user permission settings to be changed when the PWA is installed and run for the first time. And when this happens the user will be asked to give permission for the window.close event to be cancel-able. When doing this the user confirms to custom or none beforeunload alert pop-ups. This behavior will only be activated if the PWA is installed to the desktop of the user.
Hopefully this is or will be a option.
No, there is no permissions definition in webapp manifest.
(there is something similar for chrome extensions though)
By definition a PWA should behave as a native application, so if you are rewriting software to be a PWA you should re-model your application logic so that it stores the last state of the application on localStorage/indexedDB or similar and reads it upon starting and this would enforce the user to stay on the state you need it. No one should enforce the user to stay with the application open when they don't want.
We have a web application and a windows desktop application, where both are connected via web socket.
And when ever, we use the web application, we have to check the desktop app is already installed or not.
In case if desktop app is not installed (or) it is of older version, we need to install/update it accordingly.
Now the challenge is, how we can identify that desktop app is already installed or not.
One way is to store information on browser cache. But we have following issues:
User can clear browser cache.
From multiple URLS of same product, if we use, it will have different browser cache.
Currently, We are using Custom URI method to launch the application. (using browser cache).
NOTE: We are mainly targeting On Chrome and Firefox. And also we won't have admin privileges to install desktop app.
Can you guys, please help us in finding the right solution?
Whenever you serve the installer to the client, make them authenticate themselves.
e.g
to install the desktop app, the user must get it from somewhere.
lets say that you have an app download url:
www.yourdesktopapp.com/download
now, on that url, you can first, ask a user to log in( get his user id )
and , before sending them the installer file,
you will save the
user id with the information of the file you sent them
into a database.
This way you can more or less know who has installed the desktop apps, when they did it, and if they need to upgrade.
Quick Edit based on your comment:
Well, i don't know what the application is about, but perhaps you should the ask user to log in before allowing to download...or add an authentication step into the application itself, so that whenever user starts up the app, it would send app version + user id to your server.
=== OR ===
Alternatively you can just give the user the option to download the app regardless if they already have it. If they have it, they will ignore the download button, if not, they can download.
As for updating the app, leave that to the app itself. Its not the website that should update your app, but the app should check for updates whenever it is started.
e.g you can add a simple query into your app, that checks for the latest version available, and compares it to current version.
If there is a newer version available, either download it on the background, or navigate users browser onto a version update page.
I am working on a mobile website. We are showing a default screen on mobile website with 2 options.
1. Open in app
2. Continue to mobile site
now I have to check when user chooses Open in App, if App is already installed on mobile, open App.
If not go to play store.
Right now it is going to play store anyway.
How can I verify this, please suggest.
You can register an intent filter for a specific URI in the manifest. Whenever the URI is resolved by the system (for example when you click on it in the browser) you application would be notified and could start up. See also this so entry. But that does not handle the automatic redirect to the play store if the app is not installed. Maybe deep linking could do the job for you. This talk may also be relevant for deep linking.
Is there a method to determine in a web page if the device has a particular app installed?
Depending on what you want to do, there is a way. Check out Launching an app with a custom url scheme.
If you want to get your mobile browsers to download/use your application, you can set it up with a custom url scheme as detailed in that post. From safari, add a link to your app's custom url. If you get an error or aren't redirected when a link is clicked or triggered (which you can check for with a setTimeout()) Then the app is not installed.
I don't know what your use case is, so that's the best I can do.
If you're just trying to promote your app only if it isn't installed, you can add a meta tag to the page:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
For more information, see Promoting Apps with Smart App Banners on Apple's developer website.
If that's not what you're trying to do, this answer may be helpful.