Notifications API와 권한 처리

Notification.permission은 현재 권한 상태를 나타내는 정적 문자열입니다. "granted"(사용자가 허용함), "denied"(사용자가 차단함), "default"(아직 요청하지 않음) 중 하나일 수 있습니다. 불필요한 오류를 피하려면 알림을 표시하기 전에 이 속성을 확인하십시오.

Notification.requestPermission()은 새 권한 문자열로 완료되는 Promise를 반환합니다. 페이지가 로드될 때가 아니라 사용자의 분명한 동작에 대한 응답으로만 호출하십시오. 브라우저는 페이지 로드 직후 표시되는 권한 요청을 무시하거나 억제하며, 사용자는 맥락 없이 나타나는 요청을 불편하게 느낍니다.

가장 효과적인 방식은 이점을 설명하는 앱 내 안내를 먼저 표시한 다음, 사용자가 "알림 활성화"를 클릭하면 requestPermission()을 호출하는 것입니다. 이렇게 하면 사용자가 상황을 이해할 수 있고 허용률을 높일 수 있으며 브라우저가 사이트를 스팸성 사이트로 판단하는 것도 피할 수 있습니다. 페이지가 로드될 때 권한을 요청하지 마십시오.

new Notification(title, options)은 시스템 알림을 만들고 표시합니다. 첫 번째 인수는 제목 문자열입니다. 두 번째 인수인 options 객체에는 body(부제목 텍스트), icon(이미지 URL), 중복 제거를 위한 tag와 같은 속성을 지정할 수 있습니다. 권한이 "granted"인 경우에만 작동합니다.

주요 알림 설정에는 제목 아래에 설명 텍스트를 표시하는 body, 작은 이미지를 표시하는 icon, OS 알림 영역에 표시되는 작은 단색 아이콘인 badge, 큰 인라인 이미지를 표시하는 image, 같은 태그를 가진 이전 알림을 대체하는 tag, 사용자가 동작할 때까지 알림을 유지하는 requireInteraction: true가 있습니다.

Notification 인스턴스는 여러 이벤트를 발생시킵니다. 사용자가 알림을 클릭하면 onclick이 발생하며 창에 포커스를 맞추고 이동하는 데 사용할 수 있습니다. 알림을 닫으면 onclose가 발생하고, 알림을 만드는 중 문제가 발생하면 onerror가 발생합니다. new Notification()을 호출한 후 반환된 인스턴스에 처리기를 연결하십시오.

반환된 Notification 인스턴스를 변수에 저장하고 notification.close()를 호출하여 프로그래밍 방식으로 닫으십시오. 일정 시간이 지나면 더 이상 의미가 없어지는 시간에 민감한 알림에 유용합니다. setTimeout과 함께 사용하면 몇 초 후 자동으로 닫을 수 있습니다.

Notifications API에는 보안 컨텍스트가 필요합니다. HTTP 페이지에서는 브라우저에 따라 typeof Notification === 'undefined'가 되거나 API가 완전히 비활성화됩니다. 이는 악성 사이트가 가짜 시스템 메시지를 사용자에게 대량으로 보내는 것을 막기 위한 보안 조치입니다. 사용하기 전에 항상 사용 가능 여부를 확인하십시오.

useNotifications 훅은 두 가지 메서드인 requestPermission()과 showNotification(title, options)을 노출할 수 있습니다. 이 훅은 현재 권한 상태를 내부적으로 추적하고 권한을 요청한 후 상태를 업데이트합니다. 컴포넌트는 권한 확인을 신경 쓰지 않고 showNotification을 호출할 수 있으며, 이 작업은 훅이 내부적으로 처리합니다.

페이지 가시성 API는 document.hidden과 visibilitychange 이벤트를 제공합니다. 사용자가 해당 탭을 이미 보고 있지 않을 때 알림을 표시하는 것이 가장 적절합니다. 페이지가 이미 전면에 표시된 상태에서 중복 알림이 발생하지 않도록 알림을 표시하기 전에 document.hidden === true를 확인하십시오.

여기서 설명하는 Notifications API는 페이지 자체에서 로컬로 발생시키는 알림을 위한 것입니다. 페이지가 닫힌 상태에서도 도착하는 푸시 알림을 구현하려면 Push API를 서비스 워커와 함께 사용해야 합니다. 서비스 워커가 푸시 이벤트를 받고 백그라운드에서 self.registration.showNotification()을 호출합니다.

다음 중 Notification.permission의 유효한 값이 아닌 것은 무엇입니까?

Notification.permission은 granted, denied, default 중 하나일 수 있습니다. 페이지가 로드될 때가 아니라 사용자의 동작에 대한 응답으로 항상 권한을 요청하십시오. new Notification(title, options)으로 알림을 만들고, onclick을 처리하여 창에 포커스를 맞추십시오. 가시성 API와 결합하여 탭이 숨겨져 있을 때만 알림을 표시하십시오.