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.
Related
I'm trying to trigger Pictuer-in-picture (PiP) on a HTML video using the following code:
await videoElement.requestPictureInPicture().catch((error) =>
alert(`PiP failed, ${error}`);
);
This works fine in Safari, but when you use 'Add to home screen' with "display": "standalone" set in the manifest, this code returns an error saying picture in picture is unsupported.
Additionally the built-in PiP control is missing from the video player.
Any ideas why this is happening or how to fix it? I assumed the PWA/standalone version uses the same browser/js engine behind the scenes as regular Safari on the device, but it looks like it may be different?
As of March 2021:
Unfortunately, I don't think there is a way to trigger PiP mode in PWAs (yet).
The API is missing in standalone mode.
I did some research and tried to find some workarounds.
The only thing that somehow works is to force the user to load the page containing the video in Safari. In order for this to work you have to play with the scope param inside your manifest.
Put your PWA in a subfolder like /pwa and set "scope": "/pwa"
Put your Video pages in another subfolder like /videos
Everytime a user navigates to a video page, the scope of your PWA will be left. As soon as this happens, your PWA will leave the fullscreen mode and safari will render its top and bottoms bars.
Inside the bottom bar will be a small safari icon. The user must click it. Safari will open, PiP will be available.
To make the process a little bit smoother you can render a custom PiP button as video control. If the user clicks it, you check if your app is running in standalone mode by checking window.navigator.standalone. If it's false, just request PiP.
Otherwise, you navigate out of your PWAs scope. Use the history API (history.pushState) to change the location without reloading the page. You can add a query param like autopip=true. Finally, you show an overlay describing that the user should click the safari button in the bottom right corner.
Safari will open the page you pushed to the history. In Safari, check if the query param autopip=true is set and use JS to request PiP after video has loaded.
The big gotcha: There is no way to redirect the user back to your PWA.
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.
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.
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 recently bought an iPod so that I could test my own HTML5 games on iOS, and while looking around I found this HTML5 app:
http://www.apple.com/webapps/games/goldnuggets.html
If you load that page from an iPod or iPhone, you'll be able to play the game.
What I found memorable about this app is that when you try to load it, it forces you to 'install' (save) it to your homepage before you can play. The benefit of this is that the HTML5 app gets the full screen area to work with when launched from the homepage, just like a normal iOS app (as opposed to being covered up with the address bar and that command bar at the bottom).
I was wondering how I can check if the app has been added to the homepage (not the actual "add to homepage" function - which according to this thread is not possible Javascript for "Add to Home Screen" on iPhone?).
I could certainly use an extra 100px, and it would allow me to easily create an iOS version and HTML5 version with matching interfaces, and a better user experience.
Any ideas? Google search turned up nothing for me.
TL;DR window.navigator.standalone
And everything you need at http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen-Mode-For-Web-Applications.htm
Good luck!
One thought is to add a bookmark/favorite via JavaScript (called from an onclick event):
window.external.AddFavorite( url + "?somevariablethatsaysitisok=true", "MyGameName");
which I assume would work for iOS Safari as well.
On the URL part of it you can pass an argument that, when set, would allow the game to be played. If not set then only show the book mark link
You can either browser detect serverside or, if I remember correctly use javascript's navigator.userAgent or navigator.appVersion to see if it contains iPhone / iOS. Of course I would do some testing to to make sure you get the exact string, but that's the general idea.