[React] notificatioin API 이용하여 브라우저에 알림 띄우기

코드

import React, {useState, useRef, useEffect} from 'react'

function useNotification(title, options) {
  // window가 아니라면 브라우저는 Notification을 실행하지 않음
  if(!("Notification" in window)) {
    return;
  }

  function fireNotif() {
    if(Notification.permission !== 'granted') {
      Notification.requestPermission().then(permission => {
        if(permission === 'granted') {
          new Notification(title, options);
        } else {
          return;
        }})
      }}

  return fireNotif;
}

export default function App() {
  const triggerNotif = useNotification('can I steal?', {body: 'nononono'});

  return (
    <div>
      <button onClick={triggerNotif}>Hello</button>
    </div>
  )
}

배운점

• Notification API의 존재
• 현재 작성한 내용은 기본 알림이고 더 많은 알림은 아래 링크 참조
  https://developer.mozilla.org/ko/docs/Web/API/notification