Vue PWA의 푸시 알림

PWA의 푸시 알림

권한 요청하기

const permission = await Notification.requestPermission();
if (permission === "granted") {
  // proceed to subscribe
}

사용자 동작으로 실행하기

<button @click="enableNotifications">
  Enable notifications
</button>

서비스 워커 등록 가져오기

const registration = await navigator.serviceWorker.ready;

applicationServerKey

function urlBase64ToUint8Array(base64) {
  const padding = "=".repeat((4 - base64.length % 4) % 4);
  const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

pushManager.subscribe

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});

userVisibleOnly가 필요한 이유

서버로 구독 보내기

await fetch("/api/subscribe", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription)
});

서버에서 푸시 보내기

// Node backend (web-push library)
webpush.sendNotification(
  subscription,
  JSON.stringify({ title: "Hello", body: "New message" })
);

서비스 워커에서 푸시 받기

// service worker
self.addEventListener("push", (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/pwa-192.png"
    })
  );
});

알림 클릭 처리

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/inbox"));
});

빠른 확인

요약