html shortcut on smartphones - javascript

I wonder if there is any chance, either javascript or some code, to know if the user is visiting the page on the mobile device directly from the navigator or from a shortcut from the home screen? I need to know this so show a message to invite the user to create a shortcut and then use the web page in the app like mode.

This page notes how you can tell for iOS; you have to set a meta tag to turn on standalone mode and then check window.navigator.standalone.
However, as far as I can tell, there is no equivalent for Android's built-in browser or for Chrome on Android. See the documentation for mobile Chrome: "How can I detect if the app is running as an installed app?
You can’t, directly." And also: "Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not."

Related

Beforeinstallprompt not getting called in in-app browser

I have a pwa1 which will open in in-app browser of pwa2. I have install button for pwa1. But in in-app browser beforeinstallpromt is not getting fired. Any workaround for this?
Open in Chrome this link will open in chrome app from any other browser in Android except in-app browser of PWA. Any way to make it work for in-app browser?
Web share api shows lots of app when clicking share button except chrome app. Any way to add chrome app in sharing suggestions?
No, this only works in top-level browsing contexts according to the spec, but not in nested contexts.
Not that I know of, probably due to a similar limitation as above.
Chrome is not a share target, but you can copy the URL and open the URL on the clipboard with Chrome.

How do I detect the difference between Safari in Gmail Webview and Safari launched from Home Screen on iOS 11 when the User-Agent does not change?

I maintain an app that sends notifications to users containing links to forms. Those forms have image-capturing controls. These controls break in Safari when the app is opened in Safari through another app in a webview.
Okay, so I look at having Javascript detect if it is in a webview and try to direct the user to open their browser directly. Except, well, the user agent strings for Safari when opened via Gmail and Safari when opened directly from the Home screen on iOS 11 are identical.
So, all approaches for detecting webviews I currently see on Google like NPM's is-webview and User-Agent/regex predicates do not work. The only meaningful difference I can see is that navigator.mediaDevices.getUserMedia is undefined in the webview.
But knowing getUserMedia is undefined does not tell me if the user simply CANNOT use the controls, or if the user just needs to get directed to their default browser outside the scope of the app they used to access a notification.
Before we go through the trouble of decorating my links with additional data to track where users are coming from, is there a way to detect if Safari is opened via another app on iOS 11 if the user agent string does not change?

How to open iOS App Store from website in a WebView wrapped app?

We have an old iOS app which used WebView to load our website at "m.blablabla.com" (basically, it was wrapping our mobile website).
It's really old. We don't even have build files for that anymore. It has been replaced by a new native app.
But we still have thousands of users who haven't upgraded (even though they can), probably because they turned off auto-update and don't check for updates.
So we added an html/css/javascript message to the mobile website saying "We have a new app! This one will stop being supported soon. [ Update Now ]"
Here I am, genius with no iOS WebView experience (and no environment to test this old app either). I linked the "Update Now" button to our app on the itunes websites, thinking -- it's a WebView, I'm sure the Apple device will figure out it needs to open the app store.
Nope!
Button click does nothing.
I'm actually not sure why it's not working -- not sure if the button click is not registering, or because the device doesn't know what to do with the link.
Any suggestions?
Is there perhaps a specific way to launch app store using JavaScript when this button is clicked...?
Code sample: HTML
Update Now
Code sample: JavaScript
function update () {
window.location = 'https://itunes.apple.com/app/blablabla/id123456789';
}
(Just extracted the relevant code. Implementation is slightly different. On our Android WebView app, it redirects user inside the WebView to the Google Play store app page [using the google play store url]. So the surrounding code is fine, we tested it by mocking the app in Google Chrome. But in the iOS app, just looks like the app doesn't know what to do with the url.)

Can you detect if your web page is running inside your Windows Mobile native App?

How can you check that a web page is being served under a native app on Windows phone?
You cant use custom user agents, so to date we have done the following...
Check the user agent for Windows Phone, check it for WebBrowser which indicates its served from the WebBrowser windows control, and then try to call a method in our native app to guarantee we are in our app.
However, the latest browser updates to windows have removed WebBrowser from the user agent.
This means there would be delay when viewing the page on Mobile IE, as we would have to try to talk to our native app to see if it's there or not, and wait for a timeout to assume its not there.
So..
1) Is there anyway now to set custom user agents in windows Mobile - everything we have tried to date has failed.
2) Is there another way we can indicate to the page that its running in our app? Inject some JS at the start some how?
3) Any other way to somehow tell the web page what its running in? Cookies, local storage?
We need to know where its running before it has finished loading, so JS scripts can tell where they are running as they load up.
m

How to detect that User has added webapp to the homescreen on mobile device?

I am working on a webapp. I want to count the number of Users that added my webapp to home screen.
suppose my website is.
http://www.example.com
I have added meta tags that allow Mobile users to add it to home screen. I want a count of users that downloaded my webapp. If User has downloaded even if he has not opened that then also I should get notification that User has added it to home screen.
So I need any event that should work when an Webapp is added to home screen.
My webapp is in HTML5
First of all, officially it's not possible, as per the official FAQ:
How can I detect if the app is running as an installed app?
You can’t, directly.
which is again re-iterated
Best practices
Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.
Source: https://developer.chrome.com/multidevice/android/installtohomescreen
You could do some manual checking of the screen sizes though on page load, as chrome can't go fullscreen by hand, but do not rely on this (though for statistical purposes it might be interesting).
Another clarification which might be useful, the application is not downloaded when it's added to the homescreen. All that happens is that a 'link' will be created to chrome with certain parameters. By design little information is disclosed to developers regarding this process to prevent companies from forcing users to 'install' webapps before they would function.
As of 2018, according to https://developers.google.com/web/fundamentals/app-install-banners/:
To determine if the app was successfully added to the user's home screen after they accepted the prompt, you can listen for the appinstalled event.
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});

Categories

Resources