### 全体のやりたいこと

Notification APIを用いてフィッシングサイトへ誘導する通知をブロックするブラウザ拡張を実装する。

### 質問したいこと

・サイト上（ローカル or github-pages）でService Worker を利用したpush Notificationを実装したい

Notifications API による通知の表示方法には，①Notification コンストラクの生成と ②Service Worker
を利用する方法があり、上記の

> Notification APIを用いてフィッシングサイトへ誘導する通知をブロックするブラウザ拡張を実装する。

為には、両方の通知の取得をしたいと考えています。そのブラウザ拡張を作るうえで、ローカルでデモサイトを実装しています。サイト内で①の方はすでにnotification.jsの様に実装してあるのですが、
Service Worker の知識が疎く②が上手く実装できない状況です。

②を実装後は、ブラウザ拡張で`navigator.serviceWorker.getRegistrations()`で拾ってオーバーライドする形で実装を予定しています。

notification.js

```

    (function () {
      let supportsNotification = ("Notification" in window);
    
      function showNotification() {
        const notify = new Notification("Hi there", {
          body: "通知のテストです。",
          icon: "assets/notifications.png"
        });
    
        notify.onclick = (e) => {
          //window.location.href = "https://github.com/"; //ページをリダイレクトさせる
          window.open('https://github.com/', '_blank');   //別タブで開く
        };
      }
    
      const notification = function () {
        if (!supportsNotification) { // 未サポート
          alert("Notifications API がサポートされていません。")
        }
        else if (Notification.permission === "granted") { // 許可
          showNotification();
        }
        else if (Notification.permission !== "denied") { // 無視
          Notification.requestPermission(function (permission) { // 再確認
            if (permission === "granted") { // 許可
              showNotification();
            }
          });
        }
      }
    
      document.addEventListener("click", function (e) {
        if (e.target.id == "notification") {
          notification(); //サイト内のボタンを押すことで通知を表示
        }
      });
      notification(); //サイトにアクセスした直後に通知を表示
    })();
    
```

お時間あるときにご回答いただければ幸いです。
CC BY-SA 4.0
2022-11-12T06:27:20.687
92179
2022-11-13T07:03:50.420
2022-11-13T07:03:50.420
55256
55256
question
javascript push-notification notification
サイト上でService Worker を利用したpush Notificationを実装したい