Hook in React - useNotification

note) MDN 의 notification api 를 이용하여 구현함

https://developer.mozilla.org/ko/docs/Web/API/Notification

Notification - Web API | MDN

 

note) chrome : setting-> Privacy and security -> Site settings -> Notifications 의 Default behavior 에서 Use quieter messaging 를 선택하고서 notification 이 만들어지는 것을 확인 할 수 있었다. 일단 동작이 된 이후에는 Sites can ask to send notifications 을 선택하여도 동작을 하였다.

 

note)  Hello button 을 누르면 notification message 가 popup 되는 것을 볼 수 있다.

 

export const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    return;
  }
  const fireNotif = () => {
    if (Notification.permission !== "granted") {
      Notification.requestPermission().then(permission => {
        if (permission === "granted") {
          new Notification(title, options);
        } else {
          return;
        }
      });
    } else {
      new Notification(title, options);
    }
  };
  return fireNotif;
};


export default function App() {
    const triggerNotif = useNotification("Can I steal your kimchi?", {
      body: "I love kimchi"
    });
    return (
      <div className="App" style={{ height: "1000vh" }}>
        <button onClick={triggerNotif}>Hello</button>
      </div>
    );
}

note) 위는 아래의 교육과장을 이수하면서 정리한 것이다.

https://nomadcoders.co/react-hooks-introduction/lobby?utm_source=free_course&utm_campaign=react-hooks-introduction&utm_medium=site