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.
Related
I've already researched and found a lot on this topic, but there's an idea that I still couldn't find and wanted to see if it's possible.
A bit of a background, I'm not a back-end developer and I'm not as well versed in it. But I have written a small website using HTML, CSS & Javascript (jQuery).
In-app browser is a problem for me since I am using localStorage to store some information for the user, and being its in-app then the user will lose all those details once they leave instagram, for example.
I've come upon a few results, and some here on stackoverflow, but some answers did not work (link 1, link 2) and most answers said that this is not possible anyway.
So I was wondering (and I'd take this as a learning experience) about the following use case:
Let's take Instagram as the example here. If we set in our bio the link to youtube let's say, the youtube website will display at the top "Open in App" button, which in that way can then open the native youtube app and the user can continue normally. In that sense, isn't it possible to let's say, to create a button like "Open in Safari", and once the user opens my website they will be able to tap it and it would open the safari app with its appropriate link? Or is this not possible also since it should be coded from Safari's end?
A URL Scheme is what you need. for example:
Google Chrome:
googlechrome://domain
Safari:
safari-https://domain
Firefox:
firefox://open-url?url=domain
Opera:
opera-https://domain
X Web:
x-web-search://search+term
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 website which contains links to external websites, for example amazon product links. The links work just fine, but when I test my website on mobile (iOS in this case), I noticed that clicking the links in the mobile browsers would force open the Amazon app rather than just opening a new tab.
The links in my html are as follows:
I want to have these links open in the browser only, not in their respective apps. Is there any way in to prevent this behavior using html / javascript? Thanks!
No, you can't.
The reason is: you should not be able to impose your choice on the user. Maybe the user prefers the app? That's why iOS 9 introduced the app switcher on the top left hand corner if you switch apps.
Also, let's look from the other side of things if you are the app developer: If you go so far as to build an app and allow universal links (or generally deep links), you obviously would like the user to use that feature and rather open the site in the app. But again, you cannot force the user into opening that link in the app. That's a good thing, because it all depends on what the user wants to do and how he wants to do it.
Having the user choose is the best way to handle this from a UX point of view.
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.
Hi all sorry if this is repost. I really searched but can't find anything on it.
I always see this special ad when I use google services on my iphone or ipad. This little window animates out looking like a chat box. I can detect iOS device using user agent but how do I make the advert appear like google does? Specifically, try to open google maps.
I would like to use a window like this when users use iOS device to access my website. It is the most elegant way to tell iOS user about your app while not annoying them with some roadblock each time you try to access with iOS device.
Here is an image of what I'm talking about:
You can use this Javascript: http://cubiq.org/add-to-home-screen
I don't know whether this is your expectation, When your page has access from any iOS device, you wanted to bring up that dialog in webpage Right?..If That is the case then just retrieve the os info and make check there and do your presentation as you want.