Memaparkan mesej dinamik menggunakan API Pemberitahuan Web

Pemberitahuan Web API: Buat Pemberitahuan Laman Web Daripada Sekatan Pelayar

Kami digunakan untuk pemberitahuan mudah alih dari laman web atau aplikasi kegemaran, tetapi kini menjadi lebih biasa bagi pelayar untuk menolak pemberitahuan secara langsung. Sebagai contoh, Facebook akan menghantar pemberitahuan apabila anda mempunyai permintaan rakan baru atau komen seseorang pada siaran yang anda sertai;

Sebagai pemaju front-end, saya ingin tahu bagaimana menggunakan pemberitahuan penyemak imbas untuk melayani laman web yang tidak mengendalikan banyak aliran maklumat. Bagaimana untuk menambah pemberitahuan penyemak imbas yang relevan berdasarkan minat pelawat di laman web?

Artikel ini akan menunjukkan bagaimana untuk melaksanakan sistem pemberitahuan di laman web CSS ringkas untuk memberi amaran kepada pelawat setiap kali versi baru rangka kerja dikeluarkan. Saya akan menunjukkan cara menggunakan API Pemberitahuan LocalStorage dan penyemak imbas untuk mencapai matlamat ini.

Asas API Pemberitahuan

Pertama sekali, kita perlu menentukan sama ada pelayar pelawat menyokong pemberitahuan. Kebanyakan kerja dalam tutorial ini akan dilakukan oleh objek pemberitahuan.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

Pada masa ini, kami hanya menentukan sama ada penyemak imbas menyokong pemberitahuan. Selepas mengesahkan, kita perlu tahu sama ada kita boleh memaparkan permintaan kebenaran kepada pelawat.

Kami menyimpan output harta kebenaran dalam pembolehubah. Sekiranya kebenaran telah diberikan atau ditolak, tiada apa yang dikembalikan. Jika kami belum meminta kebenaran sebelum ini, kami menggunakan kaedah permintaan untuk meminta kebenaran.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

anda harus melihat arahan yang serupa dengan imej di atas dalam penyemak imbas anda.

Sekarang kita telah meminta keizinan, mari kita ubah kod supaya pemberitahuan akan dipaparkan jika kebenaran dibenarkan:

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

Walaupun mudah, ia mempunyai fungsi yang berkesan.

Kami menggunakan sintaks berasaskan janji kaedah permintaan () di sini untuk memaparkan pemberitahuan selepas kebenaran diberikan. Kami menggunakan pembina pemberitahuan untuk memaparkan pemberitahuan. Pembina ini mengambil dua hujah, satu untuk tajuk pemberitahuan dan yang lain untuk pilihan. Sila rujuk pautan dokumentasi untuk senarai lengkap pilihan yang boleh diluluskan.

Versi Rangka Kerja Penyimpanan

Di atas disebutkan, kami akan menggunakan LocalStorage untuk membantu memaparkan pemberitahuan. Menggunakan LocalStorage adalah cara yang disyorkan untuk menyimpan maklumat klien yang berterusan dalam JavaScript. Kami akan mewujudkan kunci localStorage yang dipanggil ConcisEversion yang mengandungi versi semasa rangka kerja (mis. 1.0.0). Kami kemudian boleh menggunakan kekunci ini untuk memeriksa versi baru rangka kerja.

Bagaimana untuk mengemas kini nilai kekunci ConcisEversion menggunakan versi terkini rangka kerja? Kami memerlukan cara untuk menetapkan versi semasa apabila seseorang melawat laman web. Kami juga perlu mengemas kini nilai apabila versi baru dikeluarkan. Setiap kali perubahan nilai penyimpangan, pemberitahuan perlu dipaparkan kepada pelawat untuk mengumumkan versi baru rangka kerja.

kami akan menyelesaikan masalah ini dengan menambahkan elemen tersembunyi ke halaman. Elemen ini akan mempunyai kelas bernama JS-Currentversion dan hanya akan mengandungi versi semasa kerangka kerja. Oleh kerana elemen ini wujud di DOM, kita boleh berinteraksi dengan mudah menggunakan JavaScript.

Elemen tersembunyi ini akan digunakan untuk menyimpan versi rangka kerja dalam kunci penyimpangan kami. Kami juga akan menggunakan elemen ini untuk mengemas kini kunci apabila versi baru rangka kerja diterbitkan.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

kita boleh menggunakan sedikit CSS untuk menyembunyikan elemen ini:

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Nota: Oleh kerana elemen ini tidak mengandungi apa -apa yang bermakna, pembaca skrin tidak perlu mengakses elemen ini. Itulah sebabnya saya menetapkan harta yang tersembunyi di Aria kepada True dan Gunakan Paparan: Tiada sebagai kaedah untuk menyembunyikan unsur-unsur. Untuk maklumat lanjut mengenai kandungan tersembunyi, lihat artikel Webaim ini.

Sekarang kita boleh mendapatkan elemen ini dan berinteraksi dengannya dalam JavaScript. Kita perlu menulis fungsi untuk mengembalikan teks di dalam elemen tersembunyi yang baru saja kita buat.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

Fungsi ini menggunakan harta TextContent untuk menyimpan kandungan elemen .js-currentversion. Mari tambahkan pembolehubah lain untuk menyimpan kandungan kunci LocalStorage ConcisEversion.

<span class="js-currentVersion" aria-hidden="true">3.4.0</span>

Sekarang kita mempunyai versi terkini rangka kerja dalam pembolehubah dan kami menyimpan kunci LocalStorage ke dalam pembolehubah. Sudah tiba masanya untuk menambah logik untuk menentukan sama ada terdapat versi baru rangka kerja yang ada.

kita mula -mula memeriksa sama ada kunci penyimpangan wujud. Jika ia tidak wujud, kami akan menunjukkan pemberitahuan kepada pengguna kerana ini mungkin lawatan pertama mereka. Jika kunci wujud, kami periksa sama ada nilainya (disimpan dalam pemboleh ubah semasa) adalah lebih besar daripada nilai versi semasa (disimpan dalam pemboleh ubah terkini). Jika versi terbaru rangka kerja lebih besar daripada versi terakhir yang dilihat oleh pelawat, kita tahu bahawa versi baru telah dikeluarkan.

NOTA: Kami menggunakan perpustakaan Semver-Compare untuk mengendalikan membandingkan dua rentetan versi.

Selepas mengetahui ini, kami akan menunjukkan pemberitahuan kepada pelawat dan mengemas kini kunci kami dengan sewajarnya.

[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}

Untuk menggunakan fungsi ini, kita perlu mengubah suai kod kebenaran berikut.

function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}

Ini membolehkan kami memaparkan pemberitahuan apabila pengguna telah memberikan kebenaran sebelum atau hanya diberikan keizinan.

tunjukkan pemberitahuan

Setakat ini, kami hanya menunjukkan pengguna pemberitahuan mudah yang tidak mengandungi banyak maklumat. Mari kita tulis fungsi yang membolehkan kita membuat pemberitahuan penyemak imbas secara dinamik dan mengawal banyak aspek pemberitahuan yang berbeza.

Fungsi ini mempunyai parameter untuk teks badan, ikon, tajuk, dan pautan pilihan dan tempoh pemberitahuan. Secara dalaman, kami membuat objek pilihan untuk menyimpan teks dan ikon badan pemberitahuan kami. Kami juga membuat contoh baru objek pemberitahuan, lulus dalam tajuk pemberitahuan kami serta objek pilihan.

Seterusnya, jika kita mahu memaut ke pemberitahuan kami, kami akan menambah pengendali onclick. Kami menggunakan setTimeout () untuk mematikan pemberitahuan selepas masa yang ditentukan. Jika masa tidak ditentukan apabila fungsi ini dipanggil, lalai lima saat digunakan.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

Sekarang, mari ubah suai pemeriksaan () untuk memaparkan pemberitahuan lebih banyak maklumat kepada pengguna.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Kami menggunakan fungsi DisplayNotification untuk memberikan penerangan, imej, tajuk dan pautan ke pemberitahuan kami.

NOTA: Kami menggunakan literasi templat ES6 untuk membenamkan ekspresi ke dalam teks kami.

kod penuh dan ujian

Berikut adalah kod lengkap yang ditulis dalam tutorial ini.

(pautan codepen atau blok kod penuh hendaklah dimasukkan di sini)

Menjalankan kod ini harus menghasilkan pemberitahuan berikut dalam penyemak imbas anda.

Untuk melakukan ujian, anda perlu mengenali kebenaran pemberitahuan penyemak imbas anda. Berikut adalah beberapa rujukan cepat untuk menguruskan pemberitahuan di Google Chrome, Safari, Firefox, dan Microsoft Edge. Di samping itu, anda harus biasa dengan menggunakan konsol pemaju untuk memadam dan mengubah nilai LocalStorage untuk ujian mudah.

Anda boleh menguji contoh dengan menjalankan skrip sekali dan mengubah nilai elemen HTML JS-Currentversion ke skrip untuk melihat perbezaannya. Anda juga boleh berulang dengan versi yang sama untuk mengesahkan bahawa anda tidak akan menerima pemberitahuan yang tidak perlu.

pergi lebih jauh

Ini adalah segala -galanya yang kita perlukan untuk mempunyai pemberitahuan penyemak imbas dinamik! Jika anda mencari pemberitahuan penyemak imbas yang lebih fleksibel, disarankan agar anda memahami API Pekerja Perkhidmatan. Pekerja perkhidmatan boleh digunakan untuk bertindak balas terhadap pemberitahuan push, yang membolehkan pengguna menerima pemberitahuan tanpa mengira sama ada mereka sedang melawat laman web anda, dengan itu membolehkan kemas kini yang lebih tepat pada masanya.

Pemberitahuan penyemak imbas API FAQ

Apakah API Pemberitahuan Penyemak imbas dan bagaimana ia berfungsi?

API Pemberitahuan Pelayar membolehkan aplikasi web memaparkan pemberitahuan sistem kepada pengguna. Pemberitahuan ini sama dengan pemberitahuan push pada peranti mudah alih dan boleh dipaparkan walaupun laman web tidak fokus. API berfungsi dengan meminta kebenaran pengguna untuk memaparkan pemberitahuan. Sebaik sahaja kebenaran diperoleh, aplikasi web boleh membuat dan memaparkan pemberitahuan menggunakan objek pemberitahuan.

bagaimana meminta kebenaran untuk memaparkan pemberitahuan?

Untuk meminta kebenaran, anda boleh menggunakan kaedah pemberitahuan. Kaedah ini akan menunjukkan pengguna kotak dialog yang meminta mereka sama ada mereka membenarkan pemberitahuan dipaparkan. Kaedah ini mengembalikan janji, yang menyelesaikan status kebenaran, yang boleh "diberikan", "ditolak", atau "lalai".

Bagaimana untuk membuat dan memaparkan pemberitahuan?

Sebaik sahaja kebenaran diperoleh, pemberitahuan boleh dibuat dan dipaparkan menggunakan pembina pemberitahuan. Pembina ini menerima dua parameter: tajuk pemberitahuan dan objek pilihan. Objek pilihan boleh mengandungi sifat seperti badan (teks pemberitahuan), ikon (ikon yang akan dipaparkan), dan tag (pengenalpastian pemberitahuan).

Bolehkah saya memaparkan pemberitahuan walaupun laman web tidak fokus?

Ya, API Pemberitahuan Pelayar membolehkan anda memaparkan pemberitahuan walaupun laman web tidak fokus. Ini sangat berguna untuk aplikasi web yang perlu memberitahu pengguna peristiwa penting, walaupun mereka tidak aktif menggunakan aplikasi tersebut.

Bagaimana untuk menangani peristiwa klik pada pemberitahuan?

anda boleh mengendalikan peristiwa klik pada pemberitahuan dengan menambahkan pendengar acara ke objek pemberitahuan. Apabila pengguna mengklik pada pemberitahuan, fungsi pendengar acara dipanggil.

Bolehkah saya mematikan pemberitahuan secara pemrograman?

Ya, anda boleh memaklumkan pemberitahuan secara programatik dengan memanggil kaedah rapat () pada objek pemberitahuan. Ini berguna jika anda ingin mematikan pemberitahuan secara automatik selepas beberapa ketika.

Adakah semua pelayar menyokong pemberitahuan penyemak imbas?

Pelayar yang paling moden menyokong pemberitahuan penyemak imbas, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, sokongan mungkin berbeza antara versi pelayar yang berbeza, dan beberapa pelayar yang lebih tua mungkin tidak menyokong pemberitahuan sama sekali.

Bolehkah saya menyesuaikan penampilan pemberitahuan?

Kemunculan pemberitahuan sangat bergantung pada sistem operasi dan penyemak imbas. Walau bagaimanapun, anda boleh menyesuaikan aspek tertentu pemberitahuan menggunakan objek Opsyen yang dihantar kepada pembina pemberitahuan, seperti tajuk, teks badan, dan ikon.

Bagaimana untuk memeriksa sama ada pengguna telah memberikan kebenaran untuk memaparkan pemberitahuan?

anda boleh menyemak status kebenaran semasa dengan mengakses harta pemberitahuan. Harta ini akan "diberikan" jika pengguna telah memberikan keizinan;

Bolehkah saya menggunakan API Pemberitahuan Penyemak imbas dalam skrip pekerja saya?

Ya, API Pemberitahuan Penyemak imbas boleh digunakan dalam skrip pekerja. Ini membolehkan anda memaparkan pemberitahuan dari tugas latar belakang, walaupun halaman utama tidak fokus.

Atas ialah kandungan terperinci Memaparkan mesej dinamik menggunakan API Pemberitahuan Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!