Bagaimana untuk Melaksanakan Pemberitahuan Desktop dalam Penyemak Imbas Moden?

Contoh pemberitahuan desktop Chrome

Dua jenis pemberitahuan wujud dalam penyemak imbas moden:

• Desktop Pemberitahuan - mudah dicetuskan, aktif selagi halaman dibuka, dan mungkin hilang secara automatik selepas beberapa saat.
• Pemberitahuan Pekerja Perkhidmatan - Agak rumit, tetapi ia berfungsi di latar belakang (walaupun selepas halaman ditutup), adalah butang tindakan yang berterusan dan menyokong.

Panggilan API mengambil parameter yang sama (kecuali untuk tindakan - tidak tersedia dalam pemberitahuan desktop), yang didokumenkan dengan baik pada MDN dan, untuk pekerja perkhidmatan, di tapak Web Fundamentals Google .

Berikut ialah contoh pemberitahuan desktop yang berfungsi untuk Chrome, Firefox, Opera dan Safari. Ambil perhatian bahawa atas sebab keselamatan, bermula dengan Chrome 62, kebenaran API pemberitahuan mungkin tidak lagi diminta daripada rangka kerja silang asal, jadi kami tidak boleh menunjukkan ini menggunakan coretan kod daripada StackOverflow. Anda perlu menyimpan contoh ini dalam fail HTML tapak web/aplikasi anda dan pastikan anda menggunakan localhost:// atau 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>

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pemberitahuan Desktop dalam Penyemak Imbas Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!