React + PWA Tutorial (notifications,push)

PWA란

프로그레시브 웹 앱(Progressive Web Apps)은 웹 앱과 네이티브 앱의 장점을 모두 제공하는, 보다 발전된 형태의 웹 애플리케이션을 어떻게 개발 할 수 있는가에 대한 논의이자 개발 철학을 말한다.
Google I/O 2016에서 처음 소개되었고 줄여서 PWA라고 부른다

 

Notifications

const randomNotification = () => {
    const notifTitle = "Title";
    const notifBody = "Body";
    const notifImg = imgUrl;
    const options = {
      body: notifBody,
      icon: notifImg,
    };
    new Notification(notifTitle, options);
    setTimeout(randomNotification, 30000);
 };

<Button
    id="notifications"
    onClick={() => {
      console.log(Notification.permission);
      if (!("Notification" in window)) {
        alert("not support notification ");
      } else if (Notification.permission === "granted") {
        randomNotification();
      } else if (Notification.permission !== "denied") {
        Notification.requestPermission().then((permission) => {
          if (permission === "granted") {
            const notification = new Notification("good!!");
          }
        });
      }
    }}
    >
    noti
</Button>

Button을 생성하여 클릭시 알림이 나타나게 하는 기능입니다.

한번 실행되면 30초씩 반복하여 실행되도록 작성되었습니다.

알림표시

 

 

Push

 

index.js

function urlBase64ToUint8Array(base64String) {
  var padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  var base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/");

  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);

  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

navigator.serviceWorker.register("/service-worker.js");
navigator.serviceWorker.ready
  .then(function (registration) {
    return registration.pushManager.getSubscription().then(async function (subscription) {
      console.log(subscription, "subscription");
      if (subscription) {
        return subscription;
      }

      const response = await axios.post("/api/vapidPublicKey");
      const vapidPublicKey = response.data.data;
      const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);

      return registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: convertedVapidKey,
      });
    });
  })
  .then(function (subscription) {
    fetch("/api/register", {
      method: "post",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({
        subscription: subscription,
      }),
    });

    fetch("/api/sendNotification", {
      method: "post",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({
        subscription: subscription,
        delay: 1,
      }),
    });
  });

 

 

server.js

 

const webPush = require("web-push");
webPush.setVapidDetails("https://example.com/", process.env.VAPID_PUBLIC_KEY, process.env.VAPID_PRIVATE_KEY);

router.post(
  "/api/vapidPublicKey",
  asyncHandler(async (req, res, next) => {
   	res.send({data: process.env.VAPID_PUBLIC_KEY})
  })
);

router.post(
  "/api/register",
  asyncHandler(async (req, res, next) => {
   	res.send('')
  })
);

router.post(
  "/api/sendNotification",
  asyncHandler(async (req, res, next) => {
   	const payload = JSON.stringify({ title: "Push Test" });
    setTimeout(() => {
      webPush.sendNotification(subscription, payload).catch((err) => {
        console.log(err);
      });
    }, req.body.delay * 1000);
  })
);

이렇게 보내진다

참고

 

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs) | MDN