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

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

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

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

1. var 알림=새 알림('알림 제목',{
2. 본문:'메시지'
3. })

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

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

허가 받기

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

기본값: 사용자 처리 결과를 알 수 없으므로 브라우저는 사용자가 알림바 팝업을 거부하는 것으로 간주합니다. ("브라우저: 알림을 요청하지 않으셨으니 알림을 보내지 않겠습니다.")
• 거부됨: 사용자가 알림바 팝업을 거부합니다. ("사용자: 내 화면에서 멀리 스크롤")
  허용: 사용자가 알림 표시줄 팝업을 허용했습니다. ("사용자: 환영합니다! 이 알림 기능을 사용하게 되어 기쁩니다.")
  
  
  

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

1. Notification.requestPermission(함수(권한){
2.  //생성자를 사용하여 여기에 알림 표시  
3. })

HTML을 사용하여 버튼 만들기

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

1. <버튼 id="버튼" >알림 읽기버튼>

CSS를 잊지 마세요

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

1. #버튼{   
2.   글꼴 크기:1.1rem;   
3.   너비:200px;   
4.   높이:60px;   
5.   테두리:2px 단색 #df7813;   
6.   테두리-반경:20px/50px;   
7.   배경:#fff;   
8.   색상:#df7813;   
9. }   
10. #버튼:hover{   
11.   배경:#df7813;   
12.   색상:#fff;   
13.   전환:0.4초 편리함;   
14. }   
15.   

전체적인 Javascript 代码如下：
 

JavaScript 코드复复内容到剪贴板

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

从这段代码可以看流, 如果浏览器不支持Notification API, 点击按钮时将会出现警告“兄弟, 很抱歉.你的浏览器并能很好地支持communication功能”（죄송해요 형님 귀하의 브라우저는 알림을 표시할 만큼 충분하지 않습니다.)

为什么要让用户手动关闭통지栏?

对于这个问题, 我们可以借助setTimeout函数设置一个时间间隔，使通知栏能定时关闭。

 

JavaScript 코드复复内容到剪贴板

1. var config = {   
2.               몸:'오늘 너무 많은 남자들이 나한테 눈길을 끌었어 너도 똑같은 짓을 했어. 감사합니다',   
3.               아이콘:'icon.png',   
4.                디렉터리:'auto'  
5.              }   
6. var 알림 = new 알림("내가 여기 있습니다!",구성);   
7. setTimeout(함수(){   
8.     notification.close(); //알림 닫기   
9. },5000);   
10.   

该说的东西就这些了.如果你意犹未尽，希望更加深入地了解Notification API，可以阅读以下的页面：

    MDN
    Paul Lund의 알림 API 튜토리얼

CodePen上查看데모

你可以에서 CodePen上看到由Prakash （@imprakash）编写적데모。