We Keep Coding

Notification.requestPermission does not fire when it is automatically blocked by Chrome

So basically I have button which when clicked will trigger a call to Notification.requestPermission and depending on the users response I do some action.
The issue is that Notification.requestPermission does not actually fire when it is automatically blocked by Chrome.
This is my code
function askNotificationPermission(handler) {
// checks to see if notification is actually supported
function checkNotificationPromise() {
try {
// checks if promise based notification is okay
Notification.requestPermission().then();
} catch(e) {
return false;
}
return true;
}
// Let's check if the browser supports notifications
if (!('Notification' in window)) {
console.log("This browser does not support notifications.");
} else {
if(checkNotificationPromise()) {
window.console.log("requesting permission...")
Notification.requestPermission()
.then((permission) => {
window.console.log("PERMISSION", permission)
handler(permission);
window.console.log("finished handler")
})
window.console.log("done", Notification.permission)
} else {
Notification.requestPermission(function(permission) {
handler(permission);
});
}
}
}
Is there anyway to catch when notifications are automatically blocked?

top.window.close() stops working on Google Editor add-on after Chrome 88 update

We are using Google Outh2 client provided for google App-script Google-outhClient2 for Authorizing access to our Server.
The library opens the Authorization URL in the next tab and after successful login, it would close the tab with the custom function written by us
setTimeout(function() { top.window.close() }, 1);
However, after the recent Chrome update to 88, the above method has stopped working.
This is the message I receive
"Scripts may close only the windows that were opened by them"
When I read about Chrome 88 changes, I came across Google's policy change on "Tab Hopping"
Any other insight on how to tackle this would be helpful.
Updated the code workflow here
function getDriveService() {
try {
return OAuth2.createService(‘service’)
.setAuthorizationBaseUrl(authUrl)
.setTokenUrl(tokenUrl)
.setRefreshUrl(tokenUrl)
.setClientId(Client ID)
.setClientSecret(Client Secret)
.setCallbackFunction('authCallback')
.setPropertyStore(PropertiesService.getUserProperties())
.setScope('user')
.setExpirationMinutes(0)
.setParam('access_type', 'offline')
.setParam('prompt', 'consent')
}
catch(e) {
}
}
function authCallback(request) {
try {
var driveService = getDriveService();
var isAuthorized = driveService.handleCallback(request);
if (isAuthorized) {
showFile();
return HtmlService.createHtmlOutput('Success! <script>setTimeout(function() { top.window.close() }, 1);</script>');
} else {
return HtmlService.createHtmlOutput('Denied. You can close this tab');
}
}
catch(e) {
}
}

blocked Access to geolocation was blocked over secure connection with mixed content to https://localhost:3000

I have implemented the devise omniauth setup and when I’m signed in with either Facebook, twitter or google the html5 geolocation returns a position unavailable error. But when I'm logged in as regular devise user it works just fine! How can I allow access to the html5 geolocation on my rails app when logged in with a social media account?
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setGeoCookie,showError);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
window.location = window.location;
window.alert("Permission denied");
break;
case error.POSITION_UNAVAILABLE:
window.location = window.location;
window.alert("Location information is unavailable.");
break;
case error.TIMEOUT:
window.location = window.location;
window.alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
window.location = window.location;
window.alert("An unknown error occurred.");
break;
}
location.reload();
}
Update 1
I changed the code to the following and I'm getting the following errors inside the browser console:
Origin does not have permission to use Geolocation service
[blocked] Access to geolocation was blocked over secure connection with mixed content to https://localhost:3000.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error, options);
} else {
alert("Geolocation is not supported by this browser.");
}
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log(`Latitude : ${crd.latitude}`);
console.log(`Longitude: ${crd.longitude}`);
console.log(`More or less ${crd.accuracy} meters.`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
Any ideas on how to unblock this?

This is not a rails issue but a Javascript issue. Somewhere in your template, CSS, or Javascript you load something from http instead of https. Use your browser's inspector to find the culprit.

Catch html5 geolocation events

Is there a way to catch the html5 geolocation events?
Right now im using geolocator.js
and my problem is:
When the message pops up if i want to allow html5 locations if i accept it takes html5 location if I get ipLocation.
But I want to listen for these clicks so I can set a timeout if the user doesn't click for 10 seconds it automatically takes ip location.
Is there any way to get the event for "accept" and "decline"? Here is my code snippet for it
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
EDIT: Im using Chrome on iMac
EDIT 2:
var html5Options = { enableHighAccuracy: true,timeout: 10000, maximumAge: 0 };
EDIT 3: using the solution by kravitz
if (navigator.geolocation) {
waitTooLong=setTimeout(geoError, 15000);
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
function geoSuccess(position) {
clearTimeout(waitTooLong);
//doing my locationstuff
}
function geoError(error) {
//doing my locationstuff
clearTimeout(waitTooLong);
fallback(error);
}

var geoError = function(){
//get location failed so get manually by IP here
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, html5Options);
} else { // not supported
fallback(new Error('geolocation is not supported.'));
}
Above should work but if you want to be really sure:
var timeOut = setTimeout(geoError, 10000);
var geoSuccess = function(){
clearTimeout(timeOut);
};

How to detect the status of the element navigation in js?

I need to get users latitude and longitude from browser, but on most of browsers are some restrictions that doesn't let to do it. How to tell users that his geolocation is off or it simply doesn't support it?
I tried something like this, but neither ipad or safari on my mac prompt anything.
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success);
else
alert('not supported');

DEMO: http://jsfiddle.net/7sRdS/
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// ...
}, function(error) {
//error handling
switch(error.code) {
case error.PERMISSION_DENIED:
//User denied the request for Geolocation.
break;
case error.POSITION_UNAVAILABLE:
//Location information is unavailable.
break;
case error.TIMEOUT:
//The request to get user location timed out.
break;
case error.UNKNOWN_ERROR:
//An unknown error occurred.
break;
}
alert("Geolocation error: " + error.code);
},
{
timeout:10000 //10s
});
} else {
alert("Geolocation services are not supported by your browser.");
}

Take a look at modernizr which provides multiple feature detection tests.