Bagaimana melakukan Pemberitahuan Push Web di browser menggunakan JavaScript

Programming

oleh Vinci terakhir diubah pada 3 Oktober 2022.

Pemberitahuan push web adalah pesan yang dikirim secara asinkron dari situs web dan aplikasi seluler ke target acara.

Ada dua jenis pemberitahuan push web:

  1. Notifikasi desktop ditampilkan saat aplikasi latar belakang berjalan dan mudah digunakan.
  2. Pemberitahuan yang ditampilkan di latar belakang bahkan setelah aplikasi tidak berjalan. Ini disinkronkan dengan halaman atau aplikasi melalui pekerja layanan latar belakang.

Tutorial ini mengimplementasikan jenis pertama dari pengiriman pemberitahuan push melalui JavaScript. Ini menggunakan JavaScript pemberitahuan Kelas untuk membuat dan mengelola item notifikasi.

Catatan: Pengguna harus memberikan izin untuk menampilkan notifikasi.

Pemberitahuan push web

Tentang contoh

Contoh ini mengirimkan pemberitahuan push web dengan memanggil javascript notify.

Menjalankan skrip ini hanya mengirimkan pemberitahuan. Itu juga dapat diatur pada siklus untuk secara otomatis mengirim pemberitahuan pada interval berkala.

Kode ini menggunakan langkah-langkah berikut untuk mengirim pemberitahuan ke target acara.

  1. Ini memeriksa apakah klien memiliki izin yang diperlukan dan membuka jendela konten popup untuk menerima pengguna.
  2. Membuat instance notifikasi dengan memberikan judul, isi, dan ikon (jalur).
  3. Ini mengacu pada pemetaan peristiwa klik dengan instance notifikasi.

Saat pengguna mengklik notifikasi, itu membuka URL target yang dikirim saat JavaScript dibuat pemberitahuan Kelas

index.php

<!DOCTYPE html>
<html>
<head>
<title>Web Push Notification using JavaScript in a Browser</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></script>
</head>
<body>
    <div class="phppot-container">
        <h1>Web Push Notification using JavaScript in a Browser</h1>
        <script>
            pushNotify();
            function pushNotify() {
            	if (!("Notification" in window)) {
            		// checking if the user's browser supports web push Notification
            		alert("Web browser does not support desktop notification");
            	} else if (Notification.permission === "granted") {
            		console.log("Permission to show web push notifications granted.");
            		// if notification permissions is granted,
            		// then create a Notification object
            		createNotification();
            	} else if (Notification.permission !== "denied") {
            		alert("Going to ask for permission to show web push notification");
            		// User should give explicit permission
            		Notification.requestPermission().then((permission) => {
            			// If the user accepts, let's create a notification
            			createNotification();
            		});
            	}
            	// User has not granted to show web push notifications via Browser
            	// Let's honor his decision and not keep pestering anymore
            }

            function createNotification() {
            	var notification = new Notification('Web Push Notification', {
            		icon: 'https://phppot.com/badge.png',
            		body: 'New article published!',
            	});
            	// url that needs to be opened on clicking the notification
            	// finally everything boils down to click and visits right
            	notification.onclick = function() {
            		window.open('https://phppot.com');
            	};
            }
        </script>
    </div>
</body>
</html>

lisensi yang diperlukan

Tangkapan layar di bawah menunjukkan pengaturan pengaktifan pemberitahuan tingkat browser dan tingkat sistem.

Izin tingkat peramban

Izin peramban

Lisensi tingkat sistem operasi

Ini memungkinkan aplikasi Google Chrome menerima pemberitahuan. Demikian pula, pilih program browser yang sesuai seperti Safai dan Firefox untuk mengaktifkan notifikasi.

Izin sistem

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *