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

사용자에게 유용한 알림을 적시에 전송합니다.

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

푸시 알림을 신청하려면 먼저 navigatorwindow 객체에서 serviceWorkerPushManager 객체를 확인하여 브라우저에서 푸시 알림을 지원하는지 확인하세요.

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

// 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.");
}

브라우저 지원

  • 42
  • 17
  • 44
  • 16

소스

추가 자료

새롭게 상호 운용 가능한 시리즈의 일부