Dans ce tutoriel, vous apprendrez à Implémenter une notification push Web dynamique utilisant PHP et Javascript. Le didacticiel vise à fournir aux étudiants en informatique/informatique une référence pour apprendre l’utilisation de l’API de notification JavaScript et l’intégrer au langage PHP et aux requêtes Ajax. Ici, des extraits d’un exemple d’application seront fournis. En outre, j’ai fourni le fichier zip de code source de travail du programme simple qui illustre la mise en œuvre des notifications push Web dynamiques.
Qu’est-ce que l’API de notification JavaScript ?
JavaScript est livré avec un Notification interface de programme d’application (API). Il s’agit d’une interface utilisée pour configurer les notifications d’affichage sur les appareils des utilisateurs finaux. Les méthodes de notification sont disponibles dans divers navigateurs Web. Pour en savoir plus sur la compatibilité des navigateurs de cette API, visitez Compatibilité du navigateur de JS Notification.
Comment pouvons-nous implémenter des notifications push Web dynamiques en utilisant PHP et JS ?
Comme je l’ai mentionné plus haut, Notification est une API JavaScript, ce qui signifie que les notifications push seront déclenchées à l’aide de JavaScript. Pour intégrer ladite API afin d’avoir un contenu ou des informations de notification dynamiques à l’aide de PHP et de la base de données MySQL, nous pouvons simplement utiliser Requêtes HTTP pour récupérer ou récupérer les données de notification.
Exemple
Voici les extraits suivants d’une application Web simple qui illustrent la mise en œuvre de Notification push Web dynamique en utilisant PHP et JavaScript.
Schéma MySQL
Pour cette application de démonstration, nous utiliserons le schéma MySQL suivant. Créer une base de données nommée dummy_db et la table où les détails de la notification seront stockés à la notifications table.
Connexion à la base de données
L’extrait suivant est un script PHP nommé db-connect.php. Il s’agit d’un fichier PHP qui contient les scripts permettant de gérer la connexion entre l’application et la base de données.
<?php
// Server Host
$host = "localhost";
// Server DB Username
$uname = "root";
// Server DB Password
$password = "";
// Server DB Name
$dbname = "dummy_db";
$conn = new mysqli($host, $uname, $password, $dbname);
if(!$conn){
}
Interface
L’extrait de code suivant est un fichier HTML appelé index.html. Il contient le script HTML ou les éléments d’interface de page permettant d’afficher le formulaire d’enregistrement des détails de la notification dans la base de données.
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
html, body{
height: 100%;
width: 100%;
}
body{
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
}
body>nav, body>footer{
flex-shrink: 1;
}
body>main{
flex-shrink: 1;
flex-grow: 1;
overflow: auto;
margin: 1em 0;
}
pre{
min-height:20vh
}
<body style="background:#eff3fc"><nav class="navbar navbar-expand-lg navbar-dark" style="background:#495C83">
</nav>
<main class="container-fluid">
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 mx-auto">
<div class="card mt-3 rounded-0"> <div class="card-header"> <div class="card-body rounded-0"> <div class="container-fluid"> <form action="" id="notif-form"> <input type="text" class="form-control rounded-0" id="title" name="title" required="required"> <input type="url" class="form-control rounded-0" id="url" name="url" required="required"> <input type="url" class="form-control rounded-0" id="image_url" name="image_url"> <div class="card-footer py-2"> <div class="row justify-content-center"> <div class="col-lg-4 col-md-6 col-sm-10 col-xs-12"> <div class="col-lg-4 col-md-6 col-sm-10 col-xs-12"></main>
<footer class="container-fluid py-3" style="background:#495C83; color:#fff">
<div class="container-fluid my-2"> <div class="text-center"></footer>
API PHP
Enregistrer la notification
L’extrait suivant est un script PHP nommé save_notification.php. L’extrait enregistre les détails de la notification dans la base de données. Par défaut, l’état des détails de la notification est défini sur « non envoyé ».
<?php
require_once("db-connect.php");
$insert_sql = "INSERT INTO `notifications` (`title`, `url`, `image_url`, `description`) VALUES ('{$title}', '{$url}', '{$image_url}', '$description')";
$insert = $conn->query($insert_sql);
if($insert){
$response['status'] = 'success';
$response['msg'] = 'Notification has been added successfully.';
}else{
$response['status'] = 'error';
$response['msg'] = 'Notification has failed to save. Error: ' . $conn->error;
}
?>
Récupérer les notifications en attente
Le script suivant est un fichier PHP nommé get_notifications.php. Le script récupère les détails de la notification en attente qui seront utilisés pour créer la notification push dynamique.
<?php
require_once('db-connect.php');
$notif_sql = "SELECT * FROM `notifications` where `status` = 'unsent'";
$notif_qry = $conn->query($notif_sql);
$notifs = [];
if($notif_qry->num_rows > ){
$notifs = $notif_qry->fetch_all(MYSQLI_ASSOC);
}
Notifications de mise à jour
L’extrait suivant est un fichier PHP nommé update_notification.php. Il s’agit d’un script PHP qui met à jour les détails de la notification tels qu’ils sont envoyés après la création de la notification push Web.
<?php
require_once("db-connect.php");
$update_sql = "UPDATE `notifications` set `status` = 'sent' where `id` = '{$_POST['id']}' ";
$update = $conn->query($update_sql);
if($update){
$response['status'] = 'success';
}else{
$response['error'] = "An error occurred. Erro: ".$conn->error;
}
Javascript
Enfin, l’extrait de code suivant est un fichier JavaScript appelé script.js. Il contient les scripts permettant de soumettre les détails du formulaire de notification, de récupérer les notifications en attente, de créer une notification et d’afficher une notification sur les appareils des utilisateurs.
/**
* Get Pending Notifications
*/
const send_notif = () =>{
if("Notification" in window){
if(Notification.permission === 'granted'){
$.ajax({
url:"get_notifications.php",
dataType:'json',
error: err => {
console.error(err)
},
success:function(data){
Object.values(data).forEach(notif => {
var notif_data = {}
notif_data.icon = "http://localhost/web_notification/test-icon.png";
notif_data.body = notif.description;
notif_data.image = notif.image_url;
var webNotification = WebPushNotification(notif.title, notif.url, notif_data)
// console.log(webNotification)
if(webNotification !== undefined){
/**
* Update Notification
*/
update_notification(notif.id)
}
})
},
complete: ()=>{
setTimeout(()=>{
send_notif();
}, 3000)
}
})
}
}
}
/**
* Update Notification to sent
* @param {int(notfication ID)} $id
* @returns
*/
const update_notification = ($id) =>{
return $.ajax({
url:"update_notification.php",
method:'POST',
data:{id:$id},
dataType:'json',
error:err=>{
console.error(err)
},
success:function(response){
if(!!response.status){
if(response.status == 'success'){
console.log(`Notification [${$id}] has been updated to sent.`)
}else{
console.error(response)
}
}else if(!!response.error){
console.error(response.error)
}else{
console.error(response)
}
}
})
}
$(document).ready(function(){
wpn_ask_permission();
send_notif();
/**
* Form Submission
*/
$('#notif-form').submit(function(e){
e.preventDefault();
var _this = $(this)
_this.find('button').attr('disabled', true)
var msg = $("<div>")
msg.hide()
msg.addClass("alert form-msg")
$('.form-msg').remove()
$.ajax({
url:"save_notification.php",
method:'POST',
data:_this.serialize(),
dataType:"json",
error: err =>{
alert("An error occurred while saving the notifcation data.");
console.error(err)
_this.find('button').attr('disabled', true)
},
success:function(response){
if(!!response.status){
if(response.status == 'success'){
msg.text(response.msg)
msg.addClass('alert-success')
_this.prepend(msg)
msg.show('toggle')
}else{
msg.text(response.msg)
msg.addClass('alert-danger')
_this.prepend(msg)
msg.show('toggle')
}
}else{
alert("An error occurred while saving the notifcation data.");
console.error(response)
}
_this[].reset()
_this.find('button').attr('disabled', true)
}
})
})
})
window.wpn_ask_permission = function (){
if(!("Notification" in window)){
alert("Your browser does not support Desktop Notification.");
console.error("Your browser does not support Desktop Notification.");
}else{
console.log(Notification.permission)
if(Notification.permission !== 'granted' && Notification.permission !== 'denied'){
Notification.requestPermission().then( permission =>{
if(permission ==='granted'){
alert("Notification Permission is granted");
}else if(permission ==='denied'){
alert("Notification Permission is not granted");
}
location.reload();
} )
}
}
}
window.WebPushNotification = function (title="", $action="", data = {}){
var notification ;
if(("Notification" in window)){
if(Notification.permission === 'default'){
wpn_ask_permission()
}else if(Notification.permission === 'granted'){
notification = new Notification(title,data)
notification.onclick = (event) => {
window.open($action)
}
}
}
return notification;
}
Veuillez remplacer l’icône de notification dans le script par votre logo ou icône de notification préféré et téléchargé.
Voilà! Vous pouvez maintenant tester l’application de votre côté et voir si elle fonctionne correctement. J’ai également fourni le fichier zip complet du code source sur cet article et il est téléchargeable gratuitement. Le bouton de téléchargement se trouve sous cet article.
Instantané
Voici les images du résultat de l’application de démonstration.
Interface des pages
Notification
Vidéo de démonstration
C’est ça! J’espère Cela Notification dynamique Web Push utilisant PHP et JavaScript Tutoriel vous aide avec ce que vous cherchez et vous le trouverez utile pour vos projets actuels et futurs.
Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.