I have a web app I'm building a mobile site for. I'm trying to run it in full screen without a nav bar if the user has added the page to their home screen.
Right now, my javascript is very simple:
if (navigator.standalone) {
alert ('From Home Screen');
} else {
alert ('From Browser');
}
All I want to check to see is if I can detect whether or not the user has added the app to their home screen. With the code above, even after adding the app to the home screen, the app is only ever being caught by the else statement.
Looking through apple's documentation, I found this goody:
<meta name="apple-mobile-web-app-capable" content="yes" />
Adding that code to my didn't seem to do a thing. I still cannot get the site to go into fullscreen mode, or alert it as standalone.
That meta tag is (apparently) processed when the link is added to the home screen. So, if you added it to your home screen before adding the meta tag, it will have no effect.
Try removing the icon from your home screen and adding it again.
Related
I have a multi page website. I add it to home screen in iPhone using "add to home screen" button in Share menu.
When I open it using the icon in the home screen, the website shows full screen. But when I go to any sub-page with a different route, like example.com/page, I see gray bars at the top and bottom, showing the address, navigation back and forward, "Done" button, share button, open in safari button.
How can I make it display full screen all the time?
Changing routing to use # is not an option.
It worked at some point in the past, but I had to remove the app, and can't make it work again
I figured it out myself, it turns out that recently I removed manifest.json from the html file. Adding it back solved the problem!
Also, I found this page helpful in figuring out how manifest works https://web.dev/add-manifest/
I'm building a web app which has a login page that I've added a script to allow the user to Add to Home Screen and it opens up fullscreen without the safari toolbars.
However once you pass the first page (login screen) and go to any other screen, if you press the home button and put the app to the background and then re-enter, it kicks you back out to the first login page.
Could anyone shed some light on what is happening there?
Thanks.
Okay I am building a mobile application base off a web application with JQuery Mobile.
I have
<meta name="apple-mobile-web-app-capable" content="yes">
Set in the head tags of each page, in my navigation I am linking to a new page of /people.php for example and its busting out of the application that is on the homescreen that has no browser bars and opening up the browser to load that page. I want to load that page inside the application on the home screen. I am also going to have a few things like the login post to login_submit.php later and need them to stay in the application because the login_submit.php is going to bring them to the home.php page. I want everything to process in the application that is added to the home screen. How can I accomplish this?
I ended up figuring this out. I built the code below. I just have to restructure all the links and it will work.
Here is the HTML
Go
Here is the javascript I run on the top of everypage. It gets all of the web pages and keeps them inside the full screen mode. If their is a lot of content on the new page it may take half a second longer to load but get the job done.
function navigator_Go(url) {
window.location.assign(url); // This allows links to stay in full screen mode
}
For mobile web development: I am making a website which asks the user (on an iPhone or iPod Touch) to save the page as a bookmark on the homescreen.
I do not want to show this message when the user already has a bookmark, so how can I check that (preferably using JavaScript, I don't know any other way).
Any tips are welcome.
You can check it with JavaScript via window.navigator.standalone. Look here for details.
if (("standalone" in window.navigator) &&!window.navigator.standalone) {
// Show the text for adding it as a 'bookmark'/app on home screen.
}
You can use this meta tag in your index file
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT: To clarify: when the user uses to bookmark to access the page, the message shouldn't be displayed anymore. I have used the JS project Add 2 Home with success
On a webpage viewed on an iOS device I would like to use JavaScript to detect if the address bar is currently showing. Or if I could detect if the page was launched from the home screen or not.
The main goal I have is to add instructions how to add to the home screen if they didn't launch the page from there then hide the instructions otherwise.
I found the answer you can check against "window.navigator.standalone" for iOS to see if the user has the app loaded in full screen mode.
More info here.