全体のやりたいこと
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(); //サイトにアクセスした直後に通知を表示
})();
お時間あるときにご回答いただければ幸いです。