Chrome 데스크톱 알림 예

Chrome 데스크톱 알림 예

---

Chrome 데스크톱 알림 은 어떻게 사용 합니까? 나는 그것을 내 자신의 코드에서 사용하고 싶습니다.

업데이트 : 다음은 웹킷 알림을 설명 하는 블로그 게시물 입니다.

---

최신 브라우저에는 두 가지 유형의 알림이 있습니다.

• 데스크톱 알림 -트리거하기 쉽고 페이지가 열려있는 한 작동하며 몇 초 후에 자동으로 사라질 수 있습니다
• 서비스 작업자 알림 -조금 더 복잡하지만 백그라운드에서 (페이지를 닫은 후에도) 작동하고 지속적이며 작업 버튼을 지원합니다.

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 객체는 선택 사항입니다.

---

다음은 API에 대한 유용한 문서입니다.

https://developer.chrome.com/apps/notifications

Google의 공식 동영상 설명

https://developers.google.com/live/shows/83992232-1001

---

Notify.js는 새로운 웹킷 알림을 둘러싼 래퍼입니다. 꽤 잘 작동합니다.

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

---

<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>

참고 URL : https://stackoverflow.com/questions/2271156/chrome-desktop-notification-example