Clicking on the notification should act about django-webpush

[JLucasRS]

You can put this in your service worker, in the event.waitUntil:

event.waitUntil(
    self.addEventListener('notificationclick', function (event) {
      self.clients.openWindow(data.link)
    }),
    // Show a notification with title 'ServiceWorker Cookbook' and use the payload
    // as the body.
    self.registration.showNotification(head, {
      body: body,
    })
  );
});

Edit:
Actually, it appears that javascript like it better if the notificationlick event is outiside of another addEventListener, like this:

let url; 
// Register event listener for the 'push' event.
self.addEventListener('push', function(event) {
  // Retrieve the textual payload from event.data (a PushMessageData object).
  // Other formats are supported (ArrayBuffer, Blob, JSON), check out the documentation
  // on https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData.
  let payload = event.data ? event.data.text() : {"head": "No Content", "body": "No Content", "url": ""},
    data = JSON.parse(payload),
    head = data.head,
    body = data.body,

  url = data.url

  // Keep the service worker alive until the notification is created.
  event.waitUntil(
    // Show a notification with title 'ServiceWorker Cookbook' and use the payload
    // as the body.
    self.registration.showNotification(head, {
      body: body,
      icon: icon,
    })
  );
});

self.addEventListener('notificationclick', function (event) {
    event.waitUntil(
      event.notification.close()
      self.clients.openWindow(url),
    );
})

[JLucasRS]

I'm not sure about what you are asking, but I managed to use icons in my notifications.
In django, when creating the payload, you can do something like this:

payload = {'head': 'Head', 'body': 'Body', 'icon': 'icon url in your server', 'url': 'url that should be open when clicked'}

In the service worker:

let url;
self.addEventListener('push', function(event) {
  let payload = event.data ? event.data.text() : {"head": "No Content", "body": "No Content", "icon": "", "url": ""},
    data = JSON.parse(payload),
    head = data.head,
    body = data.body,
    icon = data.icon; // You take the icon from the payload.

  url = data.url

  event.waitUntil(
    self.registration.showNotification(head, {
      body: body,
      icon: icon, //And then you use it the showNotification method.
    })
  );
});

self.addEventListener('notificationclick', function (event) {
  event.waitUntil(
    self.clients.openWindow(url),
    event.notification.close()
  );
})

In my case, I created a model to store notifications, and a ImageField to store the images called "icon". So, when creating the payload in my send_notification() method in my model class, i used icon.url to get the media url:

payload = {'head': self.title, 'body': self.body, 'icon': self.icon.url, 'url': self.url}

[vladimirmyshkovski]

Tell me, is this not realized yet?

[safwanrahman]

@narnikgamarnikus It needs some work in javascript side and I am not that much expert in writing javascript. Can you help on this?

[vladimirmyshkovski]

@safwanrahman need to use webpush, and also I need to use "active". I'm very busy right now, but when I get to the webpush, I hope I'll do it.

[amitranjan0220]

how to add icon and icon path

[safwanrahman]

@JLucasRS Thanks a lot for the informations!
I am currently working on jinja template support. Is it possible for you to make a PR?

[JLucasRS]

I don't work with jinja, sorry.

[amitranjan0220]

@JLucasRS ,Thank you very much for your help ,Above code works for me...Thank you again

[safwanrahman]

Implemented by @JLucasRS #49. Thanks a lot @JLucasRS