When creating notifications with the notification API the notifications are not displaying.
I was recently trying to use the notification api in order to create a simple notification and display it. Eventually I was going to use notifications In an app that I am building. The requesting permission step went smoothly but when I created the notification It simply did not display.
I know that my browser supports the notification api and I do not have them blocked. I am also not using a mobile device and I am using the latest version of chrome. These notification are not displaying anywhere, including websites with ssh encryption.
Here is my code:
async function notify(data) {
function createNotification(data) {
const notification = new Notification(data.title, {
icon: data.icon,
body: data.body
})
return notification
}
function checkNotifications() {
if(Notification) {
return true
} else {
alert('Notifications are not supported on this browser.')
return false
}
}
if(checkNotifications()) {
if(Notification.permission === 'granted') {
createNotification(data)
} else {
if(await Notification.requestPermission() === 'granted') {
console.log(createNotification(data))
} else {
alert('you will not recive notifications')
}
}
}
}
notify({title: 'test', body: '<b>hello</b>', icon: '../logo.png'})
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type='text/javascript' src='./notification.js'></script>
</body>
</html>
Expected results:
The notification displays
actual results:
No error, but no notification either.
EDIT:
The notifications work If I set the notification to 'allow' instead of 'ask'.
Do you have this in manifest?
"permissions": [
"contentSettings"
],
And then in your script...
chrome.contentSettings.notifications.set({primaryPattern:'<all_urls>',setting:'allow'});
Sorry, are you server side or client?
https://developer.chrome.com/extensions/contentSettings
Check your windows settings has notifications enabled.
https://support.microsoft.com/en-us/windows/change-notification-settings-in-windows-10-ddcbbcd4-0a02-f6e4-fe14-6766d850f294
https://support.microsoft.com/en-us/windows/change-notification-and-action-settings-in-windows-10-8942c744-6198-fe56-4639-34320cf9444e
Start > Settings > System > Notifications and actions
You can also click on the notification hub on the bottom right of your screen and then click on manage notifications. You may have them enabled, but you could also be blocking chrome based ones.
Related
I am trying to make a functional connection to GA API according to the official docs - https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js. I did everything needed to set it up however the solution is not working. The weird thing is that the button for the authentication is loaded and its working up until the point where I select the google account to login with. After that however loading appears and the auth window gets closed. There is no error in the console, nothing happens at all.
I use it on localhost currently but I've also tried it on a server with the same result. After selecting the account, every next attempt doesn't even require choosing the account so the window just opens, loading appears and closes again without anything happening.
screenshot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Analytics Reporting API V4</title>
<meta name="google-signin-client_id" content="<CLIENT-ID>">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1>Hello Analytics Reporting API V4</h1>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>
<script>
const VIEW_ID = '<VIEW-ID>';
// Query the API and print the results to the page.
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
Is there something wrong in the code which I missed?
I'm trying to run an HTML5 QR code scanner on an android phone offline. I'm using this library
https://github.com/schmich/instascan
I just copied the below code right from the documentation and it's working like a charm on my computer. When I copy the folder to my android 8 phone, I don't get anything when I open the file with chrome. I should be getting a prompt window to allow camera access but I don't. I tried running an alert() on the page to see if JS is running and it is. I was wondering if there were any other steps to be taken if order for this to work from a local folder on an android smartphone local storage. PS: I also checked to see the permissions manually,they were all set to ask first
<!DOCTYPE html>
<html>
<head>
<title>Instascan</title>
<script type="text/javascript" src="instascan.min.js"></script>
</head>
<body>
<video id="preview"></video>
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</body>
</html>
Do you add the instascan.min.js to the phone as well? If yes did you add it to the same directory?
Instascan requires a secure connection (HTTPS), so you just need to add https to the url at the beginning to request access to the camera, even if the site does not have the corresponding certificates.
I am trying to follow the simplest of examples of how to setup up Google's "
One tap sign-up and automatic sign-in" in a web page. Just copy and pasting the code provided by google, I get an exception "No credentials available". Why? How to fix it?
This is my web page content ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script src="https://smartlock.google.com/client"></script>
<script>
console.log( "window.location.origin=" + window.location.origin);
window.onGoogleYoloLoad = (googleyolo) => {
console.log("Google one tap ready");
};
const retrievePromise = googleyolo.retrieve({
supportedAuthMethods: [
"https://accounts.google.com",
"googleyolo://id-and-password"
],
supportedIdTokenProviders: [
{
uri: "https://accounts.google.com",
clientId: "xxxx-86peetl434op89ug41lg1vv8sjspfupp.apps.googleusercontent.com"
}
]
});
</script>
</head>
<body>
Content of the document......
</body>
</html>
The Authorized JavaScript origins has been correctly setup. I am confident of that. The URL for the above content is: https://s3-ap-southeast-2.amazonaws.com/sbd-aws-sdk-delphi-22/index.html
Upon hitting the page (browser=Chrome), the resultant javascript console is ..
window.location.origin=https://s3-ap-southeast-2.amazonaws.com
Google one tap ready
index.html:1 Uncaught (in promise)
a {type: "noCredentialsAvailable", name: "OpenYoloError", message:
"noCredentialsAvailable: No credential is available for the current user."}
message:
"noCredentialsAvailable: No credential is available for the current user."
Context: When I make this web page hit, I am logged into Google.
What am I doing wrong?
The problem is that there is currently no user signed in. The library has very little support for this, as a work around, when no Google Accounts are active and no credentials are available. You can simply show the traditional Google Sign-In button and have the user click to proceed through the flow to activate their Google Account in the browser.
https://developers.google.com/identity/sign-in/web/
I am using Firefox version 32.0 and Chrome version 36.0. I want to use Lawnchair for a client side, persistent json data store. I created an HTML to try it out, as follows:-
<!DOCTYPE html>
<html>
<head>
<title>my osim app</title>
</head>
<body>
<div id="visit-times"/>
<script src="http://brian.io/lawnchair/downloads/lawnchair-0.6.1.min.js"></script>
<script>
var store = new Lawnchair({ name: 'testing' }, function (store) {
store.get('counter', function (cnt) {
if (!cnt) {
cnt = { key: 'counter', val: 1 }
}
else {
cnt.val++;
}
store.save(cnt);
document.getElementById("visit-times").textContent = "You visited this page " + cnt.val + " times.";
});
});
</script>
</body>
</html>
When I am opening this HTML file (located on IIS development server) in both of the browsers, it shows count 1 and increases it when refreshed. But, on closing and reopening of the browser, it starts the counter from 1 again.
I want to use this data, not only in the file which created it, but also in other files hosted on same domain / subdomain.
Can anybody please tell me how can I have a persistent client side data store?
Here is my scenario. When a user opens a browser and goes to facebook.com to sign himself in, I want to be able to detect that and init my Facebook application sign-in process.
Is that possible? I'm asking because I noticed that signing into Facebook itself doesn't get my app signed in automatically, which is not good.
I'd prefer JavaScript client code.
UPDATE: Here you have a FULLY WORKING example. The only thing you will need to do is to replace the APP_ID for whatever ID you get when sign your app at: http://www.facebook.com/developers/ and the port you may use for the localhost test. This detects when the user logs in even in another browser window. It is obviously extremely basic but proves the point that is feasible with the tools from the graph API.
You can add this code to detect when the user logs in. It is the same oauth log in whether the user clicks on a <fb:login-button> or logs directly onto facebook.com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<SCRIPT type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></SCRIPT>
</head>
<body>
<h1>Hello!</h1>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/*
* Authentication functions
*/
FB.Event.subscribe('auth.login', function (response) {
welcomeMsg(response);
});
FB.Event.subscribe('auth.logout', function (response) {
alert ("Good bye!");
});
if (FB.getSession() != null) {
FB.api('/me', function(response){
console.log(response.name);
welcomeMsg(response);
})
} else {
window.setTimeout(function(){window.location.href="http://localhost:8888"},5000);
}
function welcomeMsg(userData) {
console.log ("Welcome " + userData.name);
}
</script>
</body>
</html>
You can subscribe to the auth.login event.
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
There are many Facebook images that you can see only if you're logged into Facebook. You can make the user attempt to load one of these images, and then detect if it loaded or not. It's a total trick.