1

i am using HTML5 Desktop Notifications in my application. But i have a problem with Google Chrome Mobile. As far as i have read, i need to use Service Workers to create a new Notification on Chrome Mobile, because the browser is treating them differently (HTML5 Notification not working in Mobile Chrome). I tried to integrate the example (and some more variations) of the following Stack Overflow Question but i am not able to get it running. He is never reaching the .showNotification method in the serviceWorker. I have never worked with Service Workers before, so i have no idea what i need to do, to get them working. Do i need to put this sw.js file somewhere in the project? My app is a Java Spring Project and i don't know where i would have to put this .js file. I put it in the root directory of the project and in the same directory where the file with this code is, but there was no difference. So if anybody could help me, that would be nice. If more code or project structure is needed for answering the question i can provide more.

if (!("Notification" in window)) {
  //
} else if (Notification.permission === "granted") {
  var localUserSettings = new LocalUserSettings(loggedInUser);
  if (localUserSettings.notificationRights == "granted") {
    try {
      var notification = new Notification(s, {
        body: t,
        icon: "/image/" + id,
        lang: "de",
        tag: notificationId
      });
      setTimeout(function () {
        notification.close();
      }, 10000);
    } catch (e) {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function (registration) {
          registration.showNotification(s, {
            body: t,
            icon: "/image/" + id,
            vibrate: [200, 100, 200, 100, 200, 100, 200],
            tag: notificationId
          });
        });
      }
    }
  }
}

Thanks :)

Edit: And yes, i am running the code from a secured origin (https)

Community
  • 1
  • 1
Döna
  • 11
  • 5

1 Answers1

0

Make sure you ask for permissions first by calling requestPermission() on your Notification object like so:

Notification.requestPermission();
AGE
  • 3,752
  • 3
  • 38
  • 60
Captuszz
  • 21
  • 3
  • When i call the function i get a "granted" back. The permission is already set. the line navigator.serviceWorker.register('sw.js').then(function (registration) {}); is never going inside. How can i debug this on Chrome Mobile to check what is going on? Am i doing something wrong with the serviceWorker registration? – Döna Nov 16 '15 at 12:31
  • Ok, now I see. You have to register your serviceworker first (what you did). Then you have to call the ready function on the serviceworker. For example 'navigator.serviceWorker.register('sw.js');' 'navigator.serviceWorker.ready.then(function(registration)' Documentation can be found here [link] https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification As for debugging in Chrome mobile, you can with the remote debugging tool from chrome Link: [link] https://developer.chrome.com/devtools/docs/remote-debugging – Captuszz Nov 23 '15 at 14:24