How do I implement desktop notifications in my customer application?

Question

I'am trying to develop a desktop notification JS in my customer application. The code works fine on firefox but not on Chrome. I'm changing the notification permission to allow on settings -> Advanced -> Content Settings -> Notifications -> Allow/Deny but still not working.

this is my code :

notifyMe: function() {
    if (!("Notification" in window)) {
      alert("Ce navigateur ne supporte pas les notifications desktop");

    } else if (Notification.permission !== 'denied') {

      Notification.requestPermission(function(permission) {
        if (!('permission' in Notification)) {
          Notification.permission = permission;
        }

        if (permission === "granted") {
          var notification = new Notification("Notify ")
        }

      });
    }
}

Can somebody help me ? Thanks.

The same above code is working fine in my chrome? Did you reload after changing the permission? — Rakesh Makluri, Feb 05 '19 at 10:09
Yes but nothing has changed. it show this message in the console : "The Notification API may no longer be used from insecure origins.You should consider switching your application to a secure origin." — servich, Feb 05 '19 at 10:18
what is the version of your chrome? And are you using http or https? — Rakesh Makluri, Feb 05 '19 at 10:20
Possible duplicate of [Chrome desktop notification example](https://stackoverflow.com/questions/2271156/chrome-desktop-notification-example) — Muhammad Musavi, Feb 05 '19 at 11:11

score 1 · Answer 1 · edited Feb 05 '19 at 10:43

From version 62 of chrome Notifications are supported only in secure contexts of the browser.

When is a context considered secure?

A context will be considered secure when it's delivered securely (or locally), and when it cannot be used to provide access to secure APIs to a context that is not secure. In practice, this means that for a page to have a secure context, it and all the pages along its parent and opener chain must have been delivered securely.

Locally delivered files such as http://localhost and file:// paths are considered to have been delivered securely.

Contexts that are not local must be served over https:// or wss:// and where the protocols used should not be considered deprecated.

For more details about the secure context read MDN Secure Contexts

And regarding support of Notification only in Secure Contexts check Browser Compatibility section of Notification

Thanks for your reply i want to know how can I modify the current code — servich, Feb 05 '19 at 10:39

Muhammad Musavi · Answer 2 · 2019-02-06T10:47:07.710

0

You need a website running on HTTPS protocol when utilizing certain features such as Notification, Push Notification, service worker, geolocation, Speech to Text (using Google service), and some others. Chrome is more strict, especially in newer versions.

edited Feb 06 '19 at 10:47

answered Feb 05 '19 at 10:41

Muhammad Musavi

2,512
2
22
35

Are there any solution over plain HTTP? – servich Feb 06 '19 at 09:18
AFAIK there isn't. If you are using Windows IIS to host a website you can go to `IIS > Server Certificates > Create Self Signed Certificate` and then in the listed Websites in `Connections` pane select your website, after that in the right pane `(Actions)` click on `Bindings` > Add, select https type, and from `SSL Certificate` assigne the certificate you just created, now you can get access to your website through https on port 443 (Change the port if it has been reserved by another program). If your website is not running locally you can use [This](https://letsencrypt.org/getting-started/) – Muhammad Musavi Feb 06 '19 at 10:46

score 0 · Answer 3 · answered Feb 05 '19 at 11:53

var myNotification = window.webkitNotifications.createNotification('mike.png', 'New Content Available', 'Click to view');
myNotification.onclick = function() {
    window.location = 'http://teamtreehouse.com/new/content';
}
myNotification.show();

if it is difficult to understand follow that link: https://developers.google.com/web/fundamentals/codelabs/push-notifications/

How do I implement desktop notifications in my customer application?

3 Answers3