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
Related
i have a dialog in my website's home page that opens if the iphone users are visiting my website for the first time and inside the dialog i'm suggesting users to add my website to their home screen for a quicker access.
i also set a variable to true in cookies that expires within a week for not opening the dialog for the next week if the user visits again.
my problem is that i don't want to show the dialog at all when the user is visiting via the bookmark.
is there a way to do that?
No. I do not think there is a way which can tell you if you were visited by a bookmark or via a browser on the iPhone. You can find out whether the user was an iPhone or Android user, or any OS for that matter.
Once a user clicks a link on their phone, the phone takes them to a browser or opens a "WebView" depending on the link. Even the WebViews might report only the phone type and basic info. when you query for it.
So, basically, No!
you can add one GET when generate url of the marker,
like ?m=1,
to check it from
js with window.location.search
This is one of those, "I need a workaround so as not to have to endure 1000 years of bickering from users, once the project launches" type questions:
I have a situation where I need to have my site reload any time someone launches Chrome without closing the tab last time they closed the browser. We are rebuilding an ancient site in a modern, MEAN stack environment, and I just know I will get complaints on this when it launches.
In other words (danger: psuedocode) -
if client closed chrome with site open
reauthenticate user
redirect to home page
I can accomplish the last two bits through an express route and passport auth, but how do I detect if the client is loading a cached page from their end?
Is it possible to simply store some sort of js variable that is only
set true after an actual login, or does Chrome keep that stored on
close as well?
A simple example to go along with my comment:
<html>
<head>
<script>
function DoMagic() {
document.getElementById( "magic" ).innerHTML = "<h1>Hello World!</h1>";
}
</script>
</head>
<body>
<div id="magic">Waiting for magic</div>
<br>
<input type="button" value="Do Magic" onclick="DoMagic();" />
</body>
</html>
Open this in Chrome the div reads "Waiting for magic".
Click "Do Magic" div reads "Hello World".
Close Chrome by clicking X ( not the page, the browser ).
Open Chrome. Page loads. Div reads "Waiting for magic."
The state isn't kept between browser closes--even if the cache is. I'm thinking you can implement something similar to make sure they have to login between browser closes. Should work in all browsers too.
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
}
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.
I have a script that detects whether you're an iPhone user or not and redirects to a more iPhone friendly page.
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.replace("http://domain.com/iphone/");
}
</script>
This works great but has one problem. It is convention to offer the user the ability to view the full web page. However, if I link to the root, obviously the redirect is going to send them to the mobile version!
Any ideas on how to include if click on the link from /iphone/, they can go to / and stay there.
When the user arrives, determine their browser type - mobile or full - and set a cookie with this value. Use this cookie value to decide what version of the site to display. AS you mention, offer a link to the "full" site to the mobile users, but if they click it, run a quick script to update the cookie to the "full" value and then redirect them to the full site. Their cookie is now set for the full site, so they won't get bounced back to the mobile site.
Now, if cookie are a problem, you could use something like PHP to set a session values to maintain the full/mobile status of the session, but that's probably getting beyond the scope of the original question.
The Query String is the way to go ( as the others have said above). Looking at Facebook, if you click on the 'full site' link on the mobile site, it redirects to www.facebook.com/login.php?m2w - the m2w is probably MobileToWeb and this will prevent the site redirecting the user to the mobile site.