브라우저에서 알림 구현하기

async function notifyMe() {
	// Notification API를 지원하는지 확인한다.
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
		return;
  } 

	if (Notification.permission === 'granted') {
		  // 기존에 브라우저가 알림 허용했는지 확인    
      const notification = new Notification('hello?')
      return;
  }
	// 기본 설정 값이 알림을 거부하지 않았다면
  if (Notification.permission !== 'denied') {
			// 권한 승인 요청
			const permission = await Notification.requestPermission();
			if (permission === 'granted') {
        const notification = new Notification('subscribe On')
      }

}

navigator.serviceWorker.register('sw.js')

function showNotification() {
    Notification.requestPermission(result => {
				// 요청을 수락했다면
        if (result === 'granted') {
            navigator.serviceWorker.ready.then(registration => {
                registration.showNotification('Vibration Sample', {
                    body: 'Buzz! Buzz!',
                    icon: '../images/touch/chrome-touch-icon-192x192.png',
                    tag: 'vibration-sample',
                })
            })
        }
    })

navigator.serviceWorker.register("serviceworker.js");

// Use serviceWorker.ready to ensure that you can subscribe for push
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  const options = {
    userVisibleOnly: true,
    applicationServerKey, // public키 입니다.
  };
  serviceWorkerRegistration.pushManager.subscribe(options).then(
    (pushSubscription) => {
      console.log(pushSubscription.endpoint);
			// subscribe에 성공했다면 pushSubscription이라는 객체를 반환해 줍니다. 
			// 이제 이 정보를 서버에 저장하면 됩니다. 
    },
    (error) => {
      console.error(error);
    },
  );
});

navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  const options = {
    userVisibleOnly: true,
    applicationServerKey, // public키 입니다.
  };
  serviceWorkerRegistration.pushManager.subscribe(options).then(
    (pushSubscription) => {
			// 여기서 얻은 pushSubscription을 서버에 전송하면 됩니다.
			subscribe(pushSubscription);
    },
    (error) => {
      console.error(error);
    },
  );
});

// serviceWorker.js
self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new self.Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});

navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    subscription
      .unsubscribe()
      .then((successful) => {
        // 푸시 서비스 구독 취소 한다면 서버에서도 구독 취소를 같이 해줘야 함
				unsubscribe(); 
      })
      .catch((e) => {
        // Unsubscribing failed
      });
  });
});