Set Javascript cookie from google location permission? - javascript

I have a feature on a site that gives the user the telephone number of their closest branch of shop based on their current location via the google-maps api.
When the page loads for the first time, the browser automatically asks the user if they would like to share their location. That's all fine, except some browsers don't handle it as well as others and continually ask the user when the move from page to page (the number is on every page).
So is there a way I can set a cookie based on weather or not they gave permission and only display the automatic 'this site would like to use your current location' message if the cookie has expired after say, a month?
It is particularly bad on smartphones, it asks all the time.

This is more of a browser related issue rather than a coding issue. In browsers like Chrome this interference in inevitable. It has to do a lot with security concern. Hackers can create a fake webpage for a banking site as a part of phishing and hack peoples password.
Most of the latest browsers disable hiding the location bar, although in some browsers, setting location=no will disable the address bar from being modified.
But from a coding perspective you have some options, Some of them are listed below.
You can use a localStrorage object that persists any saved data indefinitely on the user's computer and across browser tabs (similar to JavaScript cookies).
Here is a demo code:
<script type="text/javascript">
var mydomstorage=window.localStorage || (window.globalStorage?globalStorage[location.hostname] : null)
if (mydomstorage){
var i=(mydomstorage.pagecount)? parseInt(mydomstorage.pagecount)+1 : 1
document.write("You have visited this page <b>" + i + " </b> times altogether.")
mydomstorage.pagecount=i
}
else{
document.write("<b>Your browser doesn't support DOM Storage unfortunately.</b>")
}
</script>
This code works on FF3+, Chrome4+, Safari4+, Opera10.5+, or IE8+
If you have windows popping up that ask for the location you can try out this simple solution by making window.open=null; on the instance that is responsible for fetching out the location.

Related

Making an iframe inherit cookies from the parent in Safari

My web app extends a Google Form's functionality by loading it as an iframe, and doing other stuff outside the iframe. If the Google Form requires authentication, Google makes a "Sign In" box appears within the iframe. When a user clicks on the button, a new tab opens, and the user is re-directed to the form in the new tab.
If a user navigates away from my web app, the extra functionality will obviously not work. So, what I am looking for is: to have an authenticated Google Form load as an iframe within my web app.
I can make the user first sign in via Google Sign-In (OAuth) on my web app and then load the iframe. On Chrome and Firefox, the iframe automatically starts with a logged-in session. This is great! But, this solution doesn't work on Safari. Is this related to Safari blocking third-party cookies?
If I want this functionality to work within Safari (and other such browsers), how would I go about doing it? Will I have to use the Storage Access API? If yes, can you broadly tell me how to do it?
For now, I could just ask users to download Firefox/Chrome if they want to use my web app. Most of my users are Chrome users anyway. But, is implementing these privacy measures a part of other browsers' roadmap too? If yes, I may as well try and build a solution that will work in a year or two.
I expect so.
This needs to happen in the iFrame, so Google rather than you need to implement it.
Yes, but not until 2022, so I would hope Google forms will support this by then.

How do websites know they're not the default home page or search provider?

As far as I'm aware, there is no public API exposure of a browser's default homepage/search provider. So how does Google know to display this? It only comes around when Google's not the default homepage / default search provider on my browser.
I can only assume they're inferring from numerous variables, such as the referrer. I wasn't able to successfully dig down into Google's compiled JavaScript. I'm not even sure if it's detected client-side or server-side.
I'm on Firefox 44, but I've seen these banners on Chrome, too.
Simply there is no way to do that with JavaScript because the "default search/homepage" is a user's preference and you do not have access to that without user's permission because that would be a security/privacy issue.
What Google does at every user visit is show a promo ad with a close icon and a go button with instructions on how to set it as the default homepage. On click of any one of them, it creates 2 cookies so that next time it will check your cookies and make the promos disappear. Even when Google is your homepage and you clear your cookies then a banner is still there to promote Google as your homepage.
I have checked this with Firefox, not aware of Chrome.
I don't know what Google does, exactly, but what I would do:
set the homepage URL with some special parameter and check it - 'http://www.example.com/#!homepage (prevents false negatives)
check for Referer field:
if it's NOT there, assume user has typed it in manually
if it's very similar for each user visit (and perhaps at what looks like the beginning of a browsing session - inferred via GA on eeevery page out there), assume user is coming here by always clicking through from somewhere
set a cookie, e.g. visitedHelpAboutHomePage when the user visits the "yes, show me" page (might prevent false negatives, but might also generate false positives)
Note that the "special parameter" does happen in the "searchbox-initiated search" scenario: there is a parameter sourceid which likely means "source of search."
In my Firefox (v42), the "Come here often?" box appears even when I have Google set as the default search provider.
In Safari I get a box in the same location that says "A better way to browse the web: Get Google Chrome"
In Opera and Chrome I get no box at all, even if I change my default search provider to something other than Google.
So, I believe all they're doing is browser detection in the JavaScript, using the UserAgent object.

Detecting Chrome Media Settings in Javascript

Chrome has recently released an update to its media settings which prompts a user to grant permission to a site allowing access to his/her microphone and camera. Is there a way to detect these settings in Javascript?
I have a flash player (which will eventually be HTML5 based) with microphone functionality. The player is currently set up with a friendly tutorial on how to grant permission before starting the session. However, since Chrome released the update, the flash player and Chrome permissions are conflicting causing an error in the flash until the user has allowed/denied the Chrome settings prompt. What I'd like to do, until the player is moved to HTML5, is detect if the browser is Chrome (with appropriate version) and if the user's settings aren't set to then show additional tutorial screen.
Couple things:
This is specific to Chromes implementation so you can not tell what permissions the user has granted unless Chrome supplies that information to your app. I.E. there is no API you can query for this info.
It's not even something that Chrome stores. If you look under the advanced settings tab on this page, you will see that its on a per app basis not a one time thing. Chrome will only remember what permission was granted for a specific application if that app asks for the permission over https. If it asks for it over http then it will forget what permissions were granted.
Your best bet (though by no means full-proof) is to sniff out the browser agent and version. For one of the better implementations of this see here.
You will want to specifically look for Chrome and any version >= 21. (21 was the version that introduced the getMediaApi). Then it's a simple if check:
if (version >= 21){
//ask permission though the getMediaApi
} else{
//ask permission though flash
}
i stumbled into an approach for this that works fairly well, and doesn't require cookies (people can change these settings out-of-band, so the cookie can become incorrect), or for Chrome to provide an ounce of help (it doesn't).
if (chrome) {
var madeMicDecision = false;
navigator.getUserMedia({whatever},
function(stream) {
madeMicDecision = true;
//close the stream, move to the next page
//they have either just granted permission, or have in the past and it's remembered
},
function(error) {
madeMicDecision = true;
//go to error handling page
//the error handling page should describe going to chrome://settings/contentExceptions#media-stream
//or how to allow the user media via clicking on the crossed out camera icon in the 'wonderbar'
}
}
But we also want to show the tutorial screen - the above code will pop the chrome infobox if the permission setting isn't remembered. But without permission events from chrome, or an API to query permissions, how do we know when to show the chrome+infobox tutorial content?
My trick was to show the content automatically, but only after a delay. People who have accepted or denied permissions previously would never see this content, because our success/error handler would have moved them on before the delay. So, give the getUserMedia call a moment to detect/react - if the browser hasn't moved on, it's time to show the help content.
setTimeout(function() {
if (!madeMicDescision) {
//display chrome/infobox/getUserMedia permissions help content
}
}, 2000);
Not perfect (bizarre and sad really), but seems to work for the most common cases.

Should javascript geolocation prompt user to turn on location services?

I am using the geolocation functionality to track user's locations with javascript. More specifically, I am using navigator.geolocation.watchPosition. My site works fine. When I visit my site on my Android device it prompts if I would like to allow the site to track my location. I tap allow (as well as remember my preference).
After success with that I turned off location services on my phone and went back to the site. It didn't prompt me for permission again (since I told it to remember my preference last time but it didn't prompt me to turn on my location services either. Needless to say at that point my site never got any geolocation data from the browser.
My question: Is there some way to prompt the user to turn on their location services programatically? If I had not saved my security preference and it prompted me to allow again would it have turned on or asked me to turn on location services? I would hate to have to tell the user they need to go into their cell phone's preferences to enable it.
It's browser specific or to be more exact - application specific. What you could do is wait e.g. half a minute or a minute for the location and if it is not available show a warning to the user.

How can I redirect mobile devices to a different URL?

I want to check whether the user is viewing my site from a mobile device or PC. If it's a mobile device, I want to redirect my site URL like Google does...
If possible I would like to implement this in JavaScript. How can I do this?
You typically use the User-Agent header to detect the browser.
Here's JavaScript code that does basically that (only for mainstream browsers though, you'd have to add the Mobile User-Agents)
http://www.quirksmode.org/js/detect.html
And here's a list of mobile browser identifiers
http://www.zytrax.com/tech/web/mobile_ids.html
The list is not complete and will never be, given the rate new mobiles appear on the market, but what I did back when I did it is to store all received user agents in a database, and then look for them to classify them as mobile and which brand/model.
What you can't rely on though is JavaScript, it's better done in server code (not all mobile browsers execute JavaScript).
There is a related question here on SO but I couldn't find it.
See this existing question.
You will have better luck doing this server side, as many mobile browsers don't even support JavaScript. Basically you want to check the user agent and compare to a list of known mobile browsers.
Here is a simple answer for this query. This won't detect the mobile browser, but it redirects the page to our mobile.html page, through the following script;
Find out the browser window size and redirect it..
winWidth=document.all?document.body.clientwidth:window.innderwidth;
if (winwidth<800)
{
window.location.replace("mobile.html");
}

Categories

Resources