답변
최신 브라우저에는 두 가지 유형의 알림이 있습니다.
- 데스크톱 알림 -트리거하기 쉽고 페이지가 열려있는 한 작동하며 몇 초 후에 자동으로 사라질 수 있습니다
- 서비스 작업자 알림 -조금 더 복잡하지만 백그라운드에서 (페이지를 닫은 후에도) 작동하고 지속적이며 작업 버튼을 지원합니다.
API 호출은 MDN 및 서비스 작업자를 위해 Google 웹 기초 사이트 에 문서화되어있는 동일한 매개 변수 (작업을 제외하고-데스크톱 알림에서는 사용할 수 없음)를 사용 합니다.
아래는 Chrome, Firefox, Opera 및 Safari에 대한 데스크탑 알림 의 실제 예입니다 . 보안상의 이유로 Chrome 62부터는 알림 API에 대한 권한을 더 이상 출처 간 iframe에서 요청할 수 없으므로 StackOverflow의 코드 스 니펫을 사용하여 데모를 시연 할 수 없습니다. 이 예제를 사이트 / 애플리케이션의 HTML 파일로 저장하고 localhost://
HTTPS 를 사용해야 합니다.
// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== 'granted')
Notification.requestPermission();
});
function notifyMe() {
if (Notification.permission !== 'granted')
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: 'Hey there! You\'ve been notified!',
});
notification.onclick = function() {
window.open('http://stackoverflow.com/a/13328397/1269037');
};
}
}
<button onclick="notifyMe()">Notify me!</button>
우리는 W3C 알림 API를 사용하고 있습니다. 이것을 Chrome 확장 프로그램 알림 API 와 혼동하지 마십시오 . Chrome 확장 프로그램 알림은 분명히 Chrome 확장 프로그램에서만 작동하며 사용자의 특별한 권한이 필요하지 않습니다.
W3C 알림은 많은 브라우저에서 작동하며 ( 캐니 우스 지원 참조 ) 사용자 권한이 필요합니다. 모범 사례로서이 권한을 바로 구하지 마십시오. 사용자에게 먼저 알림을 원하는 이유를 설명하고 다른 푸시 알림 패턴을 확인하십시오 .
이 버그 로 인해 Linux에서는 Chrome이 알림 아이콘을 인식하지 않습니다 .
마지막 단어
알림 지원은 지난 몇 년 동안 다양한 API가 더 이상 사용되지 않아 지속적으로 변화하고 있습니다. 궁금한 점이 있으면이 답변의 이전 수정 사항을 확인하여 Chrome에서 사용 된 기능을 확인하고 다양한 HTML 알림에 대해 알아보세요.
이제 최신 표준은 https://notifications.spec.whatwg.org/에 있습니다.
서비스 담당자인지 여부에 따라 동일한 효과에 대해 두 가지 다른 호출이있는 이유에 대해서는 Google에서 근무하는 동안 제출 한이 티켓을 참조하십시오 .
도우미 라이브러리에 대해서는 notify.js 도 참조하십시오 .
답변
체크 디자인 및 API 사양을 (여전히 초안의) 또는 간단한 예에서 소스 (더 이상 사용할 수 페이지)을 확인 : 그것은 주로의 호출이다 window.webkitNotifications.createNotification
.
더 강력한 예제를 원한다면 (자신의 Chrome 확장 프로그램을 만들려고하고 권한, 로컬 저장소 등을 처리하는 방법을 알고 싶다면) Gmail 알리미 확장 프로그램을 확인하십시오 : 설치하는 대신 crx 파일 다운로드 압축을 풀고 소스 코드를 읽으십시오.
답변
window.webkitNotifications
더 이상 사용되지 않으며 제거 된 것으로 보입니다 . 그러나 새로운 API 가 있으며 최신 버전의 Firefox에서도 작동하는 것으로 보입니다.
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check if the user is okay to get some notification
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
// Note, Chrome does not implement the permission static property
// So we have to check for NOT 'denied' instead of 'default'
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Whatever the user answers, we make sure we store the information
if(!('permission' in Notification)) {
Notification.permission = permission;
}
// If the user is okay, let's create a notification
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
} else {
alert(`Permission is ${Notification.permission}`);
}
}
답변
나는 http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples를 좋아 하지만 오래된 변수를 사용하므로 데모가 더 이상 작동하지 않습니다. webkitNotifications
지금 Notification
입니다.
답변
이 간단한 알림 래퍼를 만들었습니다. Chrome, Safari 및 Firefox에서 작동합니다.
아마도 Opera, IE 및 Edge에서도 가능하지만 아직 테스트하지 않았습니다.
https://github.com/gravmatt/js-notify 에서 notify.js 파일을 가져 와서 페이지에 넣으십시오.
Bower에 가져 오기
$ bower install js-notify
이것이 작동하는 방식입니다.
notify('title', {
body: 'Notification Text',
icon: 'path/to/image.png',
onclick: function(e) {}, // e -> Notification object
onclose: function(e) {},
ondenied: function(e) {}
});
제목을 설정해야하지만 두 번째 인수로 json 객체는 선택 사항입니다.
답변
답변
Notify.js는 새로운 웹킷 알림을 둘러싼 래퍼입니다. 꽤 잘 작동합니다.
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/