HTML5 메시지 알림(웹 알림) 사용

HTML5에 관한 많은 글을 썼지만, 항상 관련된 고급 API를 거쳐야 한다는 느낌을 받습니다. 시스템을 이해하고 더 높은 수준에서 문제에 대해 생각해야만 절반의 노력으로 두 배의 결과를 얻을 수 있습니다.

먼저 가장 간단한 예를 시도해 보겠습니다. chrome 개발자 도구를 열고 코드를 붙여넣은 후 직접 실행해 보세요.

 newNotification('Jartto/의 메시지 알림', { dir: 'rtl', body: '이 메시지는 테스트로 웹 알림을 통해 전송된 메시지입니다!', icon: 'https://raw.githubusercontent.com /chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

메시지 알림이 나타나지 않습니다. 무슨 일인가요? 걱정하지 말고 계속 읽어보세요.

위의 예에 따르면 실행했지만 메시지 푸시 상자가 성공적으로 활성화되지 않았습니다. 이때 사용자에게 권한이 있는지 확인해야 합니다. 콘솔에 > Notification.permission 입력합니다.

곧 원래 사용자 권한이 default 임을 알게 될 것입니다. 사용자의 선택을 알 수 없기 때문에 브라우저의 동작은 denied , 즉 거부와 동일합니다.

이러한 HTML5 의 고급 API 볼 때 항상 몇 가지 우려 사항이 있습니다. 예제가 훌륭하고 사용하기 쉽지만 호환성이 어느 정도인지는 생각해 볼 가치가 있는 문제입니다.

보시다시피, 기본적으로 iOS Safari 와 Opera Mini 제외한 모든 브라우저가 이를 지원하므로 모바일 애플리케이션은 주의가 필요합니다.

4. API 문서

먼저 API를 체계적으로 정리해 보겠습니다. 5분만 투자하면 됩니다.

사용 사례:

 let 알림 = 새 알림(제목, 옵션)

매개변수:

title: 반드시 표시될 알림 제목

옵션: 알림을 설정하는 데 사용할 수 있는 개체입니다. 여기에는 다음 속성이 포함됩니다.

• dir: 텍스트 방향은 auto(자동), ltr(왼쪽에서 오른쪽) 또는 rtl(오른쪽에서 왼쪽)일 수 있습니다.
• lang: 알림에 사용되는 언어를 지정합니다. 이 문자열은 BCP 47 언어 태그 문서에서 유효해야 합니다.
• 본문: 알림에 표시되는 추가 문자열
• 태그: 필요할 때 알림을 새로 고치거나 교체하거나 제거할 수 있도록 알림에 ID를 제공합니다.
• icon: 알림 아이콘을 표시하는 데 사용될 이미지의 URL입니다.

재산:

Notification.permission: 현재 알림 표시의 인증 상태를 나타내는 문자열입니다. 가능한 값은 다음과 같습니다:

• denied (사용자가 알림 표시를 거부함)
• granted (사용자가 알림 표시를 허용함)
• default (사용자의 선택을 알 수 없으므로 브라우저는 denied 경우와 동일하게 동작함)

방법:

• 알림.onclick: 사용자가 알림을 클릭할 때마다 트리거되는 클릭 이벤트를 처리합니다.
• Notification.onshow: 알림이 표시될 때 트리거되는 show 이벤트를 처리합니다.
• Notification.onerror: 알림에 오류가 발생할 때마다 트리거되는 오류 이벤트를 처리합니다.
• Notification.onclose: 사용자가 알림을 닫을 때 트리거되는 닫기 이벤트를 처리합니다.
• Notification.requestPermission(): 현재 페이지에서 사용자에게 알림 표시 권한을 적용하는 데 사용됩니다.
• Notification.close(): 알림을 닫는 데 사용됩니다.

Notification.requestPermission 이 메서드는 사용자 동작(예: onclick 이벤트)에 의해서만 호출될 수 있으며 다른 메서드에서는 호출할 수 없습니다.

위 API에 따라 완전한 예제를 작성해 보겠습니다.

 function informMe(){ // 먼저 브라우저가 지원하는지 확인하십시오. if (!(Notification in window)) { Alert(이 브라우저는 데스크톱 알림을 지원하지 않습니다.) } // 사용자가 알림 수신에 동의하는지 확인 else if (Notification. 허가 = == 부여됨) { // 괜찮다면 알림을 생성합시다 var 알림 = 새로운 알림(안녕하세요!) } // 그렇지 않으면 사용자로부터 허가를 받아야 합니다. else if (Notification.permission !== '거부됨 ') { Notification.requestPermission(function (permission){ // 사용자가 동의하면 알림을 보낼 수 있습니다. if (permission === grant) { varnotification = newNotification(안녕하세요!); } }) // 마지막으로 , 실행이 이 지점에 도달하면 사용자가 관련 알림 승인을 거부했음을 의미합니다. // 존경심을 담아 더 이상 방해해서는 안 됩니다.}

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.