As the title says, I would like to show a small popup containing a button at the end of my web site to hint users to add my website to their phone's home screen. I found a tutorial here: https://codelabs.developers.google.com/codelabs/add-to-home-screen/#0, which solved my issue on Android but this way just works just only on Android and https method. I would prefer that this popup must work on Android, iOS, http and https. Would anyone here know how to solve this? Thank you very much for your help.
For Android, the Add To Home Screen prompt requires HTTPS (or localhost), so it's not possible to do it on HTTP.
For Safari on iOS, you can configure the home screen icon & launch appearance with meta tags, but a prompt system is not currently available, so users will need to add the app manually.
Related
I'm building react based web-app which is available as PWA in iOS. I have done so much R&D to solve my problem, but ended up with nothing. If anyone can help, it would be appreciated, let me explain the problem in detail:
In my web-app (PWA in iOS), there's a dashboard where list of external links are available, when you clicks on any link, it opens that link in in-app browser rather than a mobile's native browser. The reason why I want this is...
As I said there are list of applications, so, for example, let's say I'm clicking on link-1, the PWA opens the in-app browser, I'm login into that web-app, doing some work, then coming back to dashboard (PWA), and clicks on another link-2, it opens that web-link in in-app browser again, I'm login into that web-app, doing some work, then coming back to dashboard, now, when I'm clicking on link-1 again, it opens that in the in-app browser, and I have to login again go into the page I was on and do my work. This is little frustrating for user to having login again and again.
As I said these are external application, which means I don't have control over it, so can't store the token and pass it again when user clicks on the link.
I want somewhat like browser like experience where in, user does not lose his progress, even if he has opened multiple links from the dashboard, he can easily switch between the tabs.
The solution that I tried so far:
Open directly PWA of a link that I'm trying to open when click on link
(the iOS doesn't support this yet)
Open the mobile's native browser
(though business doesn't want this, as it's not good experience as user have to switch between PWA and browser, but still this is the only solution I can see)
(I tried window.open, _blank, but no luck with that in iOS, though it works well in Android)
Tried many solutions like: rel='external', _blank options, etc.
(but no luck so far.)
Tried loading external link in iFrame
(Due to security reason, it refuses to load external link)
I'm open for any solution that can fulfill my need. Even if you don't know the answer, please do like the question, I'd really appreciate your help, thanks in advance!
Looking forward hear everyone's thought on this.
I have a question about how to make a website that supports Add to Homescreen in Google chrome.
That's mean some websites like web.whatsapp.com when clicking on the Add to home screen, Website shortcut add to my home screen but when I open it, it has different, It opens in fullscreen mode and hide Google chrome options.
please say how to create a website like that.
I think they are called PWA (Progressive Web App) you can find information online on how to create those apps from scratch.
I'm trying to open the app from an HTML page. It's working well, but I need the app to open without asking the permission from the user.
Currently, Safari will ask the user that "Open this page in myapp". I don't want this message box.
How I can remove this message from Safari? I'm using an URI scheme to open the app. It looks something like myApp://domain.
You can't avoid the dialog you mentioned while using Custom URL schemes. This is iOS feature.
Instead you can use Universal Links to open your iOS App without additional dialog. You need to have control over iOS App to make this happens.
To simplify Universal Links setup, you can use one of the companies that can setup most of it for you. I am working in Firebase/Google https://firebase.google.com/docs/dynamic-links/ . Other answer mentioned company that will do this for you as well.
Try branch.io? It works with Android and iOS.
I m trying to make my website social icon, refer to a link (when clicked) based on the platform being used on. like the following:
if The website is opened on ios phone, ipad... to launch a specific deep link.
if The website is opened on android phone ... to launch a specific deep link.
if The website is opened on desktop pc ... to launch a specific link.
Thank you!
You can use HTTP Header.
See: https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
Through the User-Agent field you can get the browser version etc. Other header could be interesting for you, too.
I have a customer that wants to launch a certain website from an icon on a tablet that runs Android. He's leasing out the tablets, so we have complete control over the hardware. The idea is that these tablets will only be used for his site (it's a type of slide show), so he wants the tablet home screen to have a single icon, and that icon will always launch his site in complete fullscreen. This works somewhat, but the statusbar does not go away without a user gesture. On Chrome the meta tag mobile-web-app-capable does the trick, but we can also use other browsers if this simplifies things. Is it possible to remove the statusbar without a second user gesture (the first being launching the website)?
And in response to the answers below, how can a WebLauncherActivity be useful when the user is just opening a browser?
On the page, element.requestFullscreen() displays the element in fullscreen mode.
Additional JS API and CSS selectors can provide other fullscreen specification in the following html5 article:
Building an Amazing Fullscreen Mobile Experience
Try using the WebappLauncherActivity that's used by the page shortcuts.
You should be able to launch the activity via adb with:
adb shell am start -n com.android.chrome/.webapps.WebappManager.ACTION_START_WEBAPP "url"
You can also add your own activity inheriting from FullscreenActivity which is the base for WebappActivity like mentioned by #tushar-pandey.