HTML5는 알림 API 데스크탑 알림 기능을 구현합니다. _html5 튜토리얼 기술-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5는 알림 API 데스크탑 알림 기능을 구현합니다. _html5 튜토리얼 기술

May 16, 2016 pm 03:51 PM

api notification

HTML5 데스크톱 알림이 필요한 이유
기존 데스크톱 알림은 div로 작성하고 페이지 오른쪽 하단에 배치하여 자동으로 팝업되고 메시지를 받을 수 있습니다. 폴링 및 기타 방법으로 사용자에게 푸시합니다. 이 방법의 한 가지 단점은 JD.com을 사용하여 쇼핑할 때 Renren이 나에게 푸시한 소식을 알지 못하지만, 푸시된 뉴스가 있는지 보려면 현재 페이지를 Renren으로 전환할 때까지 기다려야 한다는 것입니다. . 이 메시지 푸시 방법은 페이지 생존을 기반으로 하지만 다음과 같은 전략이 필요합니다. 어떤 페이지를 보고 있든 메시지가 있는 한 나에게 푸시되어야 한다는 것입니다. 이것이 webkitNotification이 원하는 문제입니다. 해결하다. 알림에 의해 생성된 메시지는 특정 페이지에 첨부되지 않고 브라우저에만 첨부됩니다.
데스크톱 알림을 생성하는 일반적인 프로세스
먼저 데스크톱 알림이 생성되는 방식을 살펴보겠습니다.
1. 브라우저가 알림을 지원하는지 확인하세요.
2. 브라우저의 알림 권한 확인(알림 허용 여부)
3. 권한이 부족할 경우 브라우저의 알림 권한 획득
4. 메시지 알림 표시
참고: 첫 번째 사항에 대해서는 설명이 필요합니다. 알림은 아직 표준화되지 않았으므로 현재 chrome19 및 safari6만 지원합니다. 인터넷에는 Firefox26도 지원한다는 정보가 있지만 내 Firefox27 테스트 결과는 다음과 같습니다. 그것은 지원될 수 없습니다.
HTML5의 데스크톱 알림은 모두가 잘 알고 있을 것입니다. 일반적인 애플리케이션에는 WeChat의 웹 버전이 포함되어 있으며, 이를 사용하려면 데스크톱 알림 기능을 설정해야 합니다.
클라이언트 프로그램을 사용하여 이러한 기능을 구현하는 것은 어렵지 않습니다. 기존 웹 버전의 데스크톱 알림의 경우 div를 작성하여 페이지 오른쪽 하단에 배치하면 자동으로 팝업되고 폴링 및 기타 방법을 통해 메시지를 얻어 사용자에게 푸시할 수 있습니다. 이 방법의 한 가지 단점은 타오바오를 이용하여 쇼핑할 때 웨이보에서 나에게 푸시된 메시지가 있는지는 모르지만 푸시된 메시지가 있는지는 현재 페이지를 시나 웨이보로 전환할 때까지 기다려야 한다는 것입니다. 나에게. 이 메시지 푸시 방법은 페이지 생존을 기반으로 하지만 다음과 같은 전략이 필요합니다. 어떤 페이지를 보고 있든 메시지가 있는 한 나에게 푸시되어야 한다는 것입니다. 이것이 webkitNotification이 원하는 문제입니다. 해결하다.
알림은 아직 표준화되지 않아 w3cschool과 같은 웹사이트에서는 학습할 수 없습니다. 그러나 대부분의 최신 주류 브라우저는 알림을 지원합니다. html5의 데스크톱 알림 렌더링은 다음과 같습니다.

코드는 다음과 같습니다.

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

<!DOCTYPE html>
<html>
<머리>
<메타 문자 집합="utf- 8">
<제목>html5 데스크톱 알림</ 제목>
</머리>
<몸>
<입력 입력="버튼" 값="데스크톱 알림 켜기" 클릭 ="showNotice();">
<스크립트>
함수 showNotice(){
Notification.requestPermission(function(status){
//'기본' 상태의 기본값은 거부와 동일합니다. '거부'는 사용자가 알림을 원하지 않는다는 의미입니다. '허용됨'은 사용자가 알림 활성화에 동의한다는 의미입니다.
if("허가됨" != 상태)
반환
var notify = new 알림("메시지",{
dir:'auto',
언어:'zh-CN',
tag:'sds',//인스턴스화된 알림의 ID
//icon은 ico, png, jpg, jpeg 형식을 지원합니다
icon:'http://www.xttblog.com/icons/favicon.ico',//알림 썸네일 이미지
body:'html5 데스크탑 알림' //알림의 특정 내용
})
notify.onclick=기능(){
//알림 메시지를 클릭하면 알림창이 활성화됩니다
window.focus()
}
})
}
</스크립트>
</몸>
</html>