10-07-2022, 12:20 PM
Web Push Notifications in PHP
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/10/web-push-notifications-in-php.jpg" width="550" height="430" title="" alt="" /></div><div><div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on October 6th, 2022.</div>
<p>Web push notifications are a promising tool to increase traffic and conversions. We have already seen <a href="https://phppot.com/javascript/web-push-notification/">how to send web push notifications using JavaScript</a>.</p>
<p>This tutorial is for those who are looking for sending web push notifications with dynamic data using PHP. This is an alternate method of that JavaScript example but with server-side processing in PHP.</p>
<p>It gets the notification content from PHP. The hardcoded notification content can be replaced with any source of data from a database or a file.</p>
<p>If you want a fully <a href="https://phppot.com/php/facebook-like-header-notification-in-php/">PHP solution to send custom notifications</a>, the linked article will be useful.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19651" src="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-php-550x430.jpg" alt="web push notification php" width="550" height="430" srcset="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-php-550x430.jpg 550w, https://phppot.com/wp-content/uploads/20...00x235.jpg 300w, https://phppot.com/wp-content/uploads/20...68x601.jpg 768w, https://phppot.com/wp-content/uploads/20...on-php.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>About this example</h2>
<p>This example shows a web push notification on the browser. The notifications are sent every 10 minutes as configured. Then, the sent notifications are closed automatically. The notifications display time on a browser is configured as 5 minutes.</p>
<p>The notification instances are created and handled on the client side. The JavaScript <em>setTimeout</em> function is used to manage the timer of popping up or down the notifications.</p>
<h2>AJAX call to PHP to send the web push notification</h2>
<p>This HTML has the script to run the loop to send the notifications in a periodic interval.</p>
<p>It has the function <em>pushNotify()</em> that requests PHP via AJAX to send notifications. PHP returns the notification content in the form of a JSON object.</p>
<p>The AJAX callback handler reads the JSON and builds the notification. In this script, the <em>createNotification()</em> function sends the notification to the event target.</p>
<p>It maps the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification" target="_blank" rel="noopener">JavaScript Notification</a><em> click</em> property to open a URL from the PHP JSON response.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Web Push Notifications in PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" type="text/css" rel="stylesheet" />
<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 PHP in a Browser</h1> <p>This example shows a web push notification from PHP on browser automatically every 10 seconds. The notification also closes automatically just after 5 seconds.</p> </div> <script> // enable this if you want to make only one call and not repeated calls automatically // pushNotify(); // following makes an AJAX call to PHP to get notification every 10 secs setInterval(function() { pushNotify(); }, 10000); function pushNotify() { if (!("Notification" in window)) { // checking if the user's browser supports web push Notification alert("Web browser does not support desktop notification"); } if (Notification.permission !== "granted") Notification.requestPermission(); else { $.ajax({ url: "push-notify.php", type: "POST", success: function(data, textStatus, jqXHR) { // if PHP call returns data process it and show notification // if nothing returns then it means no notification available for now if ($.trim(data)) { var data = jQuery.parseJSON(data); console.log(data); notification = createNotification(data.title, data.icon, data.body, data.url); // closes the web browser notification automatically after 5 secs setTimeout(function() { notification.close(); }, 5000); } }, error: function(jqXHR, textStatus, errorThrown) { } }); } }; function createNotification(title, icon, body, url) { var notification = new Notification(title, { icon: icon, body: body, }); // url that needs to be opened on clicking the notification // finally everything boils down to click and visits right notification.onclick = function() { window.open(url); }; return notification; } </script>
</body>
</html>
</code></pre>
<h2>PHP code to prepare the JSON bundle with dynamic content of the notification</h2>
<p>This code supplies the notification data from the server side. Hook your application DAO in this PHP to change the content if you want it from a database.</p>
<p class="code-heading">push-notify.php</p>
<pre class="prettyprint"><code class="language-php"><?php
// if there is anything to notify, then return the response with data for
// push notification else just exit the code
$webNotificationPayload['title'] = 'Push Notification from PHP';
$webNotificationPayload['body'] = 'PHP to browser web push notification.';
$webNotificationPayload['icon'] = 'https://phppot.com/badge.png';
$webNotificationPayload['url'] = 'https://phppot.com';
echo json_encode($webNotificationPayload);
exit();
?></code></pre>
<p>Thus we have created the web push notification with dynamic content from PHP. There are various uses of it by having it in an application.</p>
<h2>Uses of push notifications</h2>
<ul>
<li>Push notification helps to increase website traffic by sending relevant content to subscribed users.</li>
<li>It’s a way to send pro ads to create entries to bring money into the business.</li>
<li>It helps to spread the brand and keep it on the customer’s minds that retain them with you.</li>
</ul>
<p><a class="download" href="https://phppot.com/downloads/php/web-push-notifications.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/php/web-push-notifications-php/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/10/...ns-in-php/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/10/web-push-notifications-in-php.jpg" width="550" height="430" title="" alt="" /></div><div><div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on October 6th, 2022.</div>
<p>Web push notifications are a promising tool to increase traffic and conversions. We have already seen <a href="https://phppot.com/javascript/web-push-notification/">how to send web push notifications using JavaScript</a>.</p>
<p>This tutorial is for those who are looking for sending web push notifications with dynamic data using PHP. This is an alternate method of that JavaScript example but with server-side processing in PHP.</p>
<p>It gets the notification content from PHP. The hardcoded notification content can be replaced with any source of data from a database or a file.</p>
<p>If you want a fully <a href="https://phppot.com/php/facebook-like-header-notification-in-php/">PHP solution to send custom notifications</a>, the linked article will be useful.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19651" src="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-php-550x430.jpg" alt="web push notification php" width="550" height="430" srcset="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-php-550x430.jpg 550w, https://phppot.com/wp-content/uploads/20...00x235.jpg 300w, https://phppot.com/wp-content/uploads/20...68x601.jpg 768w, https://phppot.com/wp-content/uploads/20...on-php.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>About this example</h2>
<p>This example shows a web push notification on the browser. The notifications are sent every 10 minutes as configured. Then, the sent notifications are closed automatically. The notifications display time on a browser is configured as 5 minutes.</p>
<p>The notification instances are created and handled on the client side. The JavaScript <em>setTimeout</em> function is used to manage the timer of popping up or down the notifications.</p>
<h2>AJAX call to PHP to send the web push notification</h2>
<p>This HTML has the script to run the loop to send the notifications in a periodic interval.</p>
<p>It has the function <em>pushNotify()</em> that requests PHP via AJAX to send notifications. PHP returns the notification content in the form of a JSON object.</p>
<p>The AJAX callback handler reads the JSON and builds the notification. In this script, the <em>createNotification()</em> function sends the notification to the event target.</p>
<p>It maps the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification" target="_blank" rel="noopener">JavaScript Notification</a><em> click</em> property to open a URL from the PHP JSON response.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Web Push Notifications in PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" type="text/css" rel="stylesheet" />
<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 PHP in a Browser</h1> <p>This example shows a web push notification from PHP on browser automatically every 10 seconds. The notification also closes automatically just after 5 seconds.</p> </div> <script> // enable this if you want to make only one call and not repeated calls automatically // pushNotify(); // following makes an AJAX call to PHP to get notification every 10 secs setInterval(function() { pushNotify(); }, 10000); function pushNotify() { if (!("Notification" in window)) { // checking if the user's browser supports web push Notification alert("Web browser does not support desktop notification"); } if (Notification.permission !== "granted") Notification.requestPermission(); else { $.ajax({ url: "push-notify.php", type: "POST", success: function(data, textStatus, jqXHR) { // if PHP call returns data process it and show notification // if nothing returns then it means no notification available for now if ($.trim(data)) { var data = jQuery.parseJSON(data); console.log(data); notification = createNotification(data.title, data.icon, data.body, data.url); // closes the web browser notification automatically after 5 secs setTimeout(function() { notification.close(); }, 5000); } }, error: function(jqXHR, textStatus, errorThrown) { } }); } }; function createNotification(title, icon, body, url) { var notification = new Notification(title, { icon: icon, body: body, }); // url that needs to be opened on clicking the notification // finally everything boils down to click and visits right notification.onclick = function() { window.open(url); }; return notification; } </script>
</body>
</html>
</code></pre>
<h2>PHP code to prepare the JSON bundle with dynamic content of the notification</h2>
<p>This code supplies the notification data from the server side. Hook your application DAO in this PHP to change the content if you want it from a database.</p>
<p class="code-heading">push-notify.php</p>
<pre class="prettyprint"><code class="language-php"><?php
// if there is anything to notify, then return the response with data for
// push notification else just exit the code
$webNotificationPayload['title'] = 'Push Notification from PHP';
$webNotificationPayload['body'] = 'PHP to browser web push notification.';
$webNotificationPayload['icon'] = 'https://phppot.com/badge.png';
$webNotificationPayload['url'] = 'https://phppot.com';
echo json_encode($webNotificationPayload);
exit();
?></code></pre>
<p>Thus we have created the web push notification with dynamic content from PHP. There are various uses of it by having it in an application.</p>
<h2>Uses of push notifications</h2>
<ul>
<li>Push notification helps to increase website traffic by sending relevant content to subscribed users.</li>
<li>It’s a way to send pro ads to create entries to bring money into the business.</li>
<li>It helps to spread the brand and keep it on the customer’s minds that retain them with you.</li>
</ul>
<p><a class="download" href="https://phppot.com/downloads/php/web-push-notifications.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/php/web-push-notifications-php/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/10/...ns-in-php/