Notifications API

Notifications API 는 웹 페이지가 일반 사용자에게 시스템 알림 표시를 제어할 수 있게 해줍니다. 이러한 알람은 최상단 브라우징 컨텍스트 뷰포트의 바깥에 위치하므로 사용자가 탭을 변경하거나 다른 앱으로 이동했을때에도 표시할 수 있습니다. 이 API 는 다양한 플랫폼에 존재하는 알림 시스템과 호환되도록 디자인되었습니다.

개념과 사용

지원되는 플랫폼에서, 시스템 알림 표시는 일반적으로 두 가지를 포함합니다. 첫째로, 사용자가 시스템 알림 표시에 대한 현재 origin 권한을 허용해야합니다. 이는 Notification.requestPermission() 메소드를 사용해 앱이나 사이트가 초기화될 때 일반적으로 완료됩니다. 다음과 같이 요청 대화상자가 나타납니다.

여기에서 사용자는 이 origin 으로부터의 알림을 허용할지, 차단할지, 이 시점에는 선택하지 않을지를 선택할 수 있습니다. 하나가 선택된후에는, 그 설정이 현재 세션에대해서 일반적으로 유지됩니다.

노트: Firefox 44 부터 Notifications 와 Push 권한이 통합되었습니다. notifications 에대한 권한이 허용되면, push 또한 활성화됩니다.

그 다음, Notification() 생성자를 사용해 새로운 알림이 생성됩니다. title 인자를 반드시 포함해야하며, 텍스트 방향, 바디 텍스트, 표시할 아이콘, 재생할 알림 사운드 등과 같은 옵션을 지정하는 옵션 객체를 선택적으로 전달할 수 있습니다.

주의: 이 기능은 Web Worker에서 사용할 수 있습니다.

부가적으로, Notifications API 명세는 ServiceWorker API 에 여러가지 추가 기능을 지정하여 service worker 가 알림을 발생시킬 수 있도록 허용합니다.

노트: 여러분의 앱에서 알림을 사용하는것에 대한 자세한 내용은 Notifications API 사용하기 글에서 찾아보시기 바랍니다.

Notifications 인터페이스

Notification
notification 객체를 정의합니다.

Service worker 추가 기능

ServiceWorkerRegistration
알림 표시 제어를 위한 ServiceWorkerRegistration.showNotification()ServiceWorkerRegistration.getNotifications() 메소드를 포함합니다.
ServiceWorkerGlobalScope
알림이 클릭됐을 때 커스텀 함수를 실행하기 위한 ServiceWorkerGlobalScope.onnotificationclick 핸들러를 포함합니다.
NotificationEvent
ExtendableEvent 를 기반으로한 이벤트 객체의 특정 타입입니다. 발생한 알림을 나타냅니다.

명세

명세 상태 코멘트
Notifications API Living Standard Living standard

브라우저 호환성

Notification

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
NotificationChrome Full support 22
Notes
Full support 22
Notes
Notes Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the navigator.webkitNotifications object to instantiate a new notification. Before Chrome 32, Notification.permission was not supported. Before Chrome 42, service worker additions were not supported. Starting in Chrome 49, notifications do not work in incognito mode.
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 14Firefox Full support 22
Full support 22
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera Full support 25Safari Full support 6WebView Android No support NoChrome Android Full support YesFirefox Android Full support 22
Full support 22
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
Notification() constructorChrome Full support 22
Full support 22
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support YesFirefox Full support 22
Full support 22
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera Full support 25Safari Full support 6WebView Android No support NoChrome Android Full support YesFirefox Android Full support 22
Full support 22
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android ?
actionsChrome Full support 53Edge Full support 18Firefox No support NoIE No support NoOpera Full support 39Safari ? WebView Android No support NoChrome Android Full support 53Firefox Android No support NoOpera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support Yes
badgeChrome Full support 53Edge Full support 18Firefox No support NoIE No support NoOpera Full support 39Safari ? WebView Android No support NoChrome Android Full support 53Firefox Android No support NoOpera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support Yes
bodyChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
closeChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
dataChrome Full support YesEdge Full support 16Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
dirChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
iconChrome Full support 22
Full support 22
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 14Firefox Full support 22
Full support 22
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera Full support 25Safari No support NoWebView Android No support NoChrome Android Full support YesFirefox Android Full support 22
Full support 22
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
imageChrome Full support 53Edge Full support 18Firefox No support NoIE No support NoOpera Full support 40Safari ? WebView Android No support NoChrome Android Full support 53Firefox Android No support NoOpera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support Yes
langChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
maxActionsChrome Full support YesEdge Full support 18Firefox No support NoIE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
onclickChrome Full support YesEdge Full support 14Firefox Full support 22IE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
oncloseChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
onerrorChrome Full support YesEdge Full support 14Firefox No support NoIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
onshowChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
permissionChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
renotifyChrome Full support 50Edge No support NoFirefox No support NoIE No support NoOpera Full support 37Safari No support NoWebView Android No support NoChrome Android Full support 50Firefox Android No support NoOpera Android Full support 37Safari iOS No support NoSamsung Internet Android Full support Yes
requestPermissionChrome Full support 46Edge Full support 14Firefox Full support 47IE No support NoOpera Full support 40Safari Full support YesWebView Android No support NoChrome Android Full support 46Firefox Android Full support YesOpera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support Yes
requireInteractionChrome Full support YesEdge Full support 17Firefox No support NoIE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
Secure context requiredChrome Full support 62Edge ? Firefox Full support 67IE No support NoOpera Full support 49Safari ? WebView Android No support NoChrome Android Full support 62Firefox Android Full support 67Opera Android Full support 46Safari iOS No support NoSamsung Internet Android ?
silentChrome Full support 43Edge Full support 17Firefox No support NoIE No support NoOpera Full support 30Safari No support NoWebView Android No support NoChrome Android Full support 43Firefox Android No support NoOpera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
tagChrome Full support YesEdge Full support 14Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
timestampChrome Full support YesEdge Full support 17Firefox No support NoIE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
titleChrome Full support YesEdge Full support 14Firefox No support NoIE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
vibrateChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android Full support 53
Notes
Full support 53
Notes
Notes Does not work on Android O or later regardless of Chrome version.
Firefox Android No support NoOpera Android Full support 41
Notes
Full support 41
Notes
Notes Does not work on Android O or later regardless of Chrome version.
Safari iOS No support NoSamsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not work on Android O or later regardless of Chrome version.
Available in workersChrome Full support 45Edge Full support YesFirefox Full support 41IE No support NoOpera Full support 32Safari ? WebView Android No support NoChrome Android Full support 45Firefox Android Full support 41Opera Android Full support 32Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

함께 보기