推播通知行為模式指南 分析事件流程與使用者互動之最佳實踐策略

const title = "Notification 1 of 3";
const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: "message-group-1",
};
registration.showNotification(title, options);

const title = "Notification 2 of 2";
const options = {
  tag: "renotify",
  renotify: true,
};
registration.showNotification(title, options);

const title = "Silent Notification";
const options = { silent: true };
registration.showNotification(title, options);

const title = "Require Interaction Notification";
const options = {
  body: "With requireInteraction: true",
  requireInteraction: true,
};
registration.showNotification(title, options);

self.registration.showNotification(data.title, {
  image: "https://linyencheng.github.io/img/404-bg.jpg",
  icon: "https://linyencheng.github.io/img/icon_wechat.png",
  vibrate: [200, 100, 200, 100, 400],
  body: "嗨，我是彥成，喜歡爬山的前端工程師，有個部落格叫前端三分鐘 :)",
  actions: [
    { action: "know-more", title: "了解更多" },
    { action: "fans", title: "按讚粉專" },
  ],
});

self.addEventListener("notificationclick", function (event) {
  const urlToOpen = new URL("/hello.html", self.location.origin).href;

  const promiseChain = clients.matchAll({
    type: "window",
    includeUncontrolled: true,
  }).then((windowClients) => {
    let matchingClient = null;
    for (let i = 0; i < windowClients.length; i++) {
      const windowClient = windowClients[i];
      if (windowClient.url === urlToOpen) {
        matchingClient = windowClient;
        break;
      }
    }
    return matchingClient ? matchingClient.focus() : clients.openWindow(urlToOpen);
  });

  event.notification.close();
  event.waitUntil(promiseChain);
});

self.addEventListener("push", (event) => {
  const data = event.data.json();
  if (data.title === "前端三分鐘") {
    self.registration.showNotification(data.title, {
      body: "嗨，我是彥成，點擊了解更多...",
      actions: [
        { action: "know-more", title: "了解更多" },
        { action: "fans", title: "按讚粉專" }
      ],
    });
  }
});

self.addEventListener("notificationclick", function (event) {
  const action = event.action;
  let url = "https://linyencheng.github.io/";
  if (action === "fans") url = "https://www.facebook.com/linyencheng.tw";

  event.notification.close(); // Android 需要明確關閉
  event.waitUntil(
    clients.matchAll({ type: "window" }).then((windowClients) => {
      for (let client of windowClients) {
        if (client.url === url && "focus" in client) return client.focus();
      }
      if (clients.openWindow) return clients.openWindow(url);
    })
  );
});