최신 브라우저에서 데스크톱 알림을 구현하는 방법은 무엇입니까?

Chrome 데스크톱 알림 예

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

• 데스크톱 알림 - 트리거하기 쉽고 페이지가 열려 있는 동안 활성화되며 몇 초 후에 자동으로 사라질 수 있습니다.
• 서비스 워커 알림 - 약간 복잡하지만 백그라운드에서 작동하며(페이지가 닫힌 후에도) 지속적이고 작업 버튼을 지원합니다.

API 호출은 MDN과 Google Web Fundamentals 사이트(서비스 워커의 경우)에 잘 설명되어 있는 동일한 매개변수(작업 제외 - 데스크톱 알림에서는 사용할 수 없음)를 사용합니다.

다음은 Chrome, Firefox, Opera 및 Safari에 대한 데스크톱 알림의 실제 예입니다. 보안상의 이유로 Chrome 62부터 알림 API 권한은 더 이상 교차 출처 프레임워크에서 요청될 수 없으므로 StackOverflow의 코드 조각을 사용하여 이를 보여줄 수 없습니다. 이 예제를 웹사이트/애플리케이션의 HTML 파일에 저장하고 localhost:// 또는 HTTPS를 사용해야 합니다.

<code class="js">// 在页面加载时请求权限
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');
  };
 }
}</code>

<code class="html"><button onclick="notifyMe()">Notify me!</button></code>

위 내용은 최신 브라우저에서 데스크톱 알림을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!