I have a webapp and it looks good when assigned to a users homescreen (ios) but not as good when just going to it from safari. Is there a way to control which scripts/items run when the webapp is accessed from safari only? And then a sepperate script/code to run when launched from the homescreen?
I assume the web page is set up to use no address bar etc, when launched from home screen link. And you want to detect when it's not launched that way (to correct for smaller vertical space etc.)
Then what you want to detect is "app mode" or "standalone mode". This site seems to explain quite well how to detect it.
(In case this link dies in the future) in essence the test is
if ( ("standalone" in window.navigator) && !window.navigator.standalone ){
// Not standalone/fullscreen here (visiting from safari)
}else{
//Fullscreen mode (launched from homescreen)
}
Related
Very similar questions in the past:
HTML5 website running while phone screen is off?
HTML5 mobile app running while phone screen is off?
But now it's 2020... and just a few months ago this worked on firefox. I created a small test page that should "speak" every ~10 seconds and tell you the x/y offset in meters from when you first loaded the page. When the screen is on it also shows you this on a map.
https://supplyrunner.netlify.app/test0/index.html
When the screen was turned off I could not get this working using chrome on my android phone but it worked with firefox. I didn't think the support would get dropped so I didn't note the version of that browser. Now it no longer seems to work with the latest firefox, chrome, or Opera (with the screen off).
Is there anything I can do to tell these browsers to continue running in the background? I looked at requesting wakelocks (https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Navigator/requestWakeLock) but that didn't work on firefox and had no effect on chrome.
Is there another browser I can use that has more reasonable behavior or options? I believe a user should have the option to run webapps in the background, even if it means explicitly running the browser in a different mode (similar to incognito) for the sake of security and transparency.
Is there anything I can do in my JS code (web workers?) to force some code to run in the background? Can this code access geolocation and the speech API (so it can talk to the user).
Worse case option: Are there any apps I can run that would simulate a screen lock such that a user could run the webpage, then run this app instead of locking their screen, allowing the page to continue running while the screen turns black and becomes unresponsive to touch (so they can put the phone in their pocket), but the OS doesn't register this as a "screen off" event?
Are there any other alternatives that I haven't thought of?
Note that I have an application that requires background geolocation and access to audio out (to speak or play sounds). This was originally written as a native android app but in the past year I have refactored it to be a webapp to avoid issues with google API keys and licenses, to make it OS agnostic (iOS and android), and also to make it much simpler to extend and customize. Going back to a native app is not an option.
Edit:
Here is a simpler page that shows the same issue (with no map) in less than 50 lines of JS/html combined: https://supplyrunner.netlify.app/test1/index.html
I noticed that firefox on android actually still allows some things, like youtube videos, to keep running media in the background with the screen off, but seems to no longer run JS so window.speechSynthesis.speak() and navigator.geolocation.getCurrentPosition() don't work.
I've got a web site "application" which is not an app, but an actual web page you'd use through Chrome or some other browser. In iOS invoking the keyboard (via an input element for example) doesn't change the viewport ratio or resize anything, but on Android it does. This is causing insane layout problems for my app "page", as we have to distinguish between portrait and landscape view orientations.
I found many answers about android:windowSoftInputMode activity configs w/rt keyboard display and interaction with media queries, and how to specify your desired value (in my case, "adjustNothing"), but I haven't found anything on how to invoke this configuration when you're looking at a web page via chrome or any other browser.
So does anyone know of a way to do this via JavaScript or some other in-page code? Thanks.
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
I've visited a few sites on my iPhone/iPad which have prompted me to install the native app the first time I've visited the site. Is there a standard script somewhere that people use for this or should I just create my own? This must have been thousands of times before but despite endless googling I can't find a 'stock' script I can use. Ideally it should use cookies so the user doesn't get prompted more than once a month or so.
Apple have actually got a built in way of doing this relatively unobtrusively, which adds a "Smart App Banner" at the top of the browser if the app isn't already installed:
To add a Smart App Banner to your website, include the following meta tag in the head of each page where you'd like the banner to appear:
<meta name="apple-itunes-app" content="app-id=myAppStoreID">
For more options, please see the full documentation on Apple's site:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
This adds a nice looking banner to the top of the page, which can be dismissed by clicking a close button. Unlike a popup (alert box), it doesn't obscure the page too much or stall it from loading and goes directly to the app store page for your app when clicked. I think this is probably the best solution for most cases.
As it only involves adding one meta tag, it's also easier to implement than any other JavaScript based solution and there's no risk of it appearing on non iOS devices.
Caveat: Only works in Safari. Not Chrome etc.
I'll assume that they're checking if the device is iOS via the HTTP_USER_AGENT
<?php
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$droid = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
if ($iPod || $iPhone || $iPad){
// Display Prompt for iOS
} else if($droid){
// Display Prompt for Android
}
I am developing a web-based database that needs to be opened through firefox web browser(because of some css3 elements). I want the page to open automatically in full screen mode. I dont want the user of the database to have access to the firefox menu items
Can't be done if you just have control of the webpage. Controls in the webpage cannot cause changes in the browser instance itself.
It would be a security issue if that were allowed. You could look into writing a Firefox extension to do that, as they have more access to the browser instance itself.
You shouldn't look at trying to hide the firefox menu controls. That seems like a flaw in your problem-solving approach.
You will want to look at Fullscreen APIs of the browser. If you accept a small request/info to the user in the application it can be done quite easily. You just can't force the user into Fullscreen mode against his will. This is good (for security reasons).
http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/