javascript
self.addEventListener("install", (event) => {
  self.skipWaiting();
});

self.addEventListener("push", (e) => {
  const res = e.data.text() || "NO PAYLOAD";
  const res_obj = JSON.parse(res);
  const options = {
    body: res_obj.body,
    icon: res_obj.icon,
    badge: res_obj.badge,
    image: res_obj.image,
    vibrate: res_obj.vibrate,
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1,
      url: res_obj.url,
    },
  };
  e.waitUntil(self.registration.showNotification(res_obj.title, options));
});

self.addEventListener("notificationclick", function (event) {
  event.notification.close();
  const url = event.notification.data.url;
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === url && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow(url);
      })
  );
});

javascript
{
  "name": "Your site's name",
  "description": "Your site's description",
  "start_url": "/",
  "lang": "en-GB",
  "theme_color": "#102A43",
  "display": "standalone",
  "icons": [
    {
      "src": "https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fmeta-q.cdn.bubble.io%2Ff1707189469009x791928892728306300%2FDALL%25C2%25B7E%25202024-02-06%252005.17.28%2520-%2520Create%2520a%2520modern%252C%2520minimalistic%25203D%2520icon%2520representing%2520web%2520push%2520notifications.%2520The%2520icon%2520should%2520feature%2520a%2520stylized%2520yellow%2520bell%2520inside%2520a%2520speech%2520bubble%252C%2520with.webp?w=128&h=128&auto=compress&fit=max",
      "sizes": "128x128",
      "type": "image/webp"
    }
  ]
}