이제 여러 브라우저에서 푸시 알림이 지원됩니다.

사용자에게 시의적절하고 유용한 알림을 전달하세요.

Thomas Steiner

푸시 알림은 2016년에 W3C의 웹 애플리케이션 실무 그룹의 일부인 Push API와 Notification API의 출시로 표준화되었습니다. 이러한 API는 웹 개발자가 푸시 알림을 웹 애플리케이션에 통합하고 사용자가 웹브라우저에서 알림을 수신하고 상호작용할 수 있는 데 필요한 기능을 제공합니다. 푸시 메시지는 사용자가 이전에 알림 전송 권한을 부여한 웹사이트 또는 애플리케이션에서 사용자의 웹브라우저로 전송되는 알림입니다. 이러한 메시지는 사용자에게 새 콘텐츠 또는 업데이트를 알리거나, 예정된 일정 또는 기한을 상기시키거나, 기타 중요한 정보를 제공하는 데 사용할 수 있습니다. 푸시 메시지는 뉴스 또는 스포츠 앱과 같이 사용자에게 시의적절하고 관련성 높은 정보를 제공해야 하는 애플리케이션이나 특별 이벤트 또는 할인에 관한 알림을 사용자에게 전송하려는 전자상거래 웹사이트에 특히 유용합니다.

푸시 알림을 신청하려면 먼저 navigator 및 window 객체에서 serviceWorker 및 PushManager 객체를 확인하여 브라우저에서 푸시 알림을 지원하는지 확인합니다.

푸시 알림이 지원되는 경우 async 및 await 키워드를 사용하여 서비스 워커를 등록하고 푸시 알림을 구독합니다. 다음은 자바스크립트를 사용하여 이를 수행하는 방법의 예입니다.

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

추가 자료

• 푸시 알림 개요
• Push API
• iOS 및 iPadOS의 웹 앱을 위한 웹 푸시