[리액트] 브라우저 notification 구현해보기

이번 포스트에서는 브라우저에서 notification를 push 하는 간단한 방법에 대해 알아보려고 합니다.

완성된 모습은 아래와 같습니다.

코드는 크게 App 부분과 notification 부분으로 나뉘게 되고

함수로는 useNotification이 권한을 요청하는 기능, notificiation를 만들어서 push 주는 기능을 제공합니다.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    return;
  }

  const fireNotif = () => {
    /* 권한 요청 부분 */
    if (Notification.permission !== "granted") {
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          /* 권한을 요청받고 nofi를 생성해주는 부분 */
          new Notification(title, options);
        } else {
          return;
        }
      });
    } else {
      /* 권한이 있을때 바로 noti 생성해주는 부분 */
      new Notification(title, options);
    }
  };
  return fireNotif;
};

const App = () => {
  const triggerNotif = useNotification("Test Noti", {
    body: "notification body test"
  });
  return (
    <div className="App">
      <button onClick={triggerNotif}> Push notification </button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

해당 코드를 실행하면 버튼이 하나 달린 페이지가 만들어지게 됩니다.

또한 기본적인 함수로 구현하기보다는 간단한 Hook 형식으로 구현하였고

useNotification(message, options) 의 형식을 가져왔습니다. 이 파라미터의 경우

MDN에서 제공하는 notification 기본 예제의 형식과 같습니다. 추가적인 옵션과 다양한 기능들이 있으니 좀 더 궁금하신 분들은 아래의 사이트에 가서 천천히 살펴보시길 바랍니다.

https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification

Notification.Notification() - Web APIs | MDN

추가적으로 notification 권한을 얻는건 매우 엄격한?? 권한이라고 합니다. 따라서 브라우저가 처음 실행될 때만 noti 권한을 얻을 수 있는 alert 창을 제공하고 그 이후에는 alert창을 통해 권한을 얻어낼 방법은 기본적으로 제공되지 않는다고 되어있습니다.

따라서 url 창의 자물쇠 버튼을 클릭하여 알림권한을 허용해야 하니 사용자에게 기능을 오픈할 때는 해당 절차까지 제공해야 하니 이점 유념 바랍니다.

 

이로써 간단하게 브라우저 notification를 구현하는 방법에 대해 알아봤습니다. 감사합니다.