HTML5 알림 API를 사용하여 웹 알림 만들기에 대한 튜토리얼

HTML5 알림 API를 사용하여 웹 알림 만들기에 대한 튜토리얼_html5 튜토리얼 팁

WBOY

풀어 주다： 2016-05-16 15:46:43

원래의

1728명이 탐색했습니다.

Gmail 웹 버전을 사용하는 경우 새 이메일을 받을 때마다 화면 오른쪽 하단에 해당 메시지 상자가 나타납니다. HTML5에서 제공하는 알림 API를 사용하면 이러한 기능도 쉽게 구현할 수 있습니다.
브라우저가 이를 지원하는지 확인하세요

특정 버전의 브라우저에서 개발하는 경우 사용할 수 없는 API에 귀중한 시간을 낭비하지 않도록 먼저 caniuse로 이동하여 브라우저의 알림 API 지원을 확인하는 것이 좋습니다.
시작하는 방법

JavaScript 코드클립보드에 콘텐츠 복사

위 코드는 간단한 알림 표시줄을 구성합니다. 생성자의 첫 번째 매개변수는 알림바의 제목을 설정하고, 두 번째 매개변수는 옵션 개체로 다음 속성을 설정할 수 있습니다.

dir: 알림 표시줄 텍스트의 표시 방향을 정의합니다. 자동(자동), ltr(왼쪽에서 오른쪽) 또는 rtl(오른쪽에서 왼쪽)으로 설정할 수 있습니다.
lang: 알림 표시줄의 텍스트에 사용되는 언어를 선언합니다. (주석: 이 속성의 값은 BCP 47 언어 태그에 속해야 합니다.)
태그: 알림 표시줄의 검색, 교체 또는 제거를 용이하게 하기 위해 알림 표시줄에 ID 값을 할당합니다.
아이콘 : 알림바 아이콘으로 사용되는 이미지의 URL을 설정합니다

허가 받기

알림바를 표시하기 전에 사용자에게 권한을 신청해야 합니다. 사용자의 승인이 있어야만 알림바가 화면에 나타날 수 있습니다. 권한 신청 처리 시 다음과 같은 반환 값을 갖게 됩니다:

거부됨: 사용자가 알림바 팝업을 거부합니다. ("사용자: 내 화면에서 멀리 스크롤")
허용: 사용자가 알림 표시줄 팝업을 허용했습니다. ("사용자: 환영합니다! 이 알림 기능을 사용하게 되어 기쁩니다.")

JavaScript 코드클립보드에 콘텐츠 복사

HTML을 사용하여 버튼 만들기

XML/HTML 코드클립보드에 콘텐츠 복사

CSS를 잊지 마세요

CSS 코드클립보드에 콘텐츠 복사

전체적인 Javascript 代码如下：

JavaScript 코드复复内容到剪贴板

document.addEventListener('DOMContentLoaded',함수(){
document.getElementById('버튼').addEventListener('클릭',기능(){
if(! ('알림' 창) ){
alert('죄송합니다. 브라우저가 알림을 표시할 만큼 좋지 않습니다.');
반품;
}
Notification.requestPermission(기능(권한){
var config = {
본문:'버튼을 클릭해 주셔서 감사합니다. 마음에 드셨기를 바랍니다.',
아이콘:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png' ,
디렉터리:'auto'
};
var 알림 = new 알림("내가 여기 있습니다!",구성);
});
});
});