10-04-2022, 11:37 AM
How to do Web Push Notification on Browser using JavaScript
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/10/how-to-do-web-push-notification-on-browser-using-javascript.jpg" width="550" height="570" title="" alt="" /></div><div><div id="tutorial" readability="43.625138274336">
<div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on October 3rd, 2022.</div>
<p>Web push notifications are messages pushed asynchronously from a website and mobile application to an event target.</p>
<p>There are two types of web push notifications:</p>
<ol>
<li>Desktop notifications are shown when the foreground application is running and they are simple to use.</li>
<li>Notifications that are shown from the background even after the application is not running. It’s via a background <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank" rel="noopener">service worker</a> sync with the page or app.</li>
</ol>
<p>This tutorial implements the first type of sending the push notification via JavaScript. It uses the JavaScript <em>Notification</em> class to create and manage notification instances.</p>
<p><strong>Note: </strong>To show the notifications, permission should be granted by the user.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19659" src="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-550x570.jpg" alt="web push notification" width="550" height="570" srcset="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-550x570.jpg 550w, https://phppot.com/wp-content/uploads/20...90x300.jpg 290w, https://phppot.com/wp-content/uploads/20...cation.jpg 590w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>About the example</h2>
<p>This example sends the web push notifications by calling the JavaScript Notification.</p>
<p>It sends only one notification by running this script. It can also be put into a cycle to automatically send notifications at a periodic interval.</p>
<p>This code uses the following steps to push the notification to the event target.</p>
<ol>
<li>It checks if the client has the required permissions and popups content window to have user acceptance.</li>
<li>It creates a notification instance by supplying the title, body and icon (path).</li>
<li>It refers to the on-click event mapping with the notification instance.</li>
</ol>
<p>When the user clicks on the notification, it opens the target URL passed while creating the JavaScript <em>Notification</em> class.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-php-template"><!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>
</code></pre>
<h2>Permissions required</h2>
<p>The following screenshot shows the settings to enable notification in the browser level and the system level.</p>
<h3>Browser level permission</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-19655" src="https://phppot.com/wp-content/uploads/2022/10/browser-permission-550x199.jpg" alt="browser permission" width="550" height="199" srcset="https://phppot.com/wp-content/uploads/2022/10/browser-permission-550x199.jpg 550w, https://phppot.com/wp-content/uploads/20...00x108.jpg 300w, https://phppot.com/wp-content/uploads/20...68x277.jpg 768w, https://phppot.com/wp-content/uploads/20...ission.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>OS level permission</h3>
<p>This is to allow the Google Chrome application to receive notifications. Similarly, select appropriate browser applications like Safai and Firefox to allow notification in them.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19656" src="https://phppot.com/wp-content/uploads/2022/10/system-permission-550x624.jpg" alt="system permission" width="550" height="624" srcset="https://phppot.com/wp-content/uploads/2022/10/system-permission-550x624.jpg 550w, https://phppot.com/wp-content/uploads/20...64x300.jpg 264w, https://phppot.com/wp-content/uploads/20...ission.jpg 663w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/web-push-notification/#top" class="top">↑ Back to Top</a> </p>
</p></div>
<div id="social-icon">
<p>Share this page</p>
</p></div>
</div>
https://www.sickgaming.net/blog/2022/10/...avascript/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/10/how-to-do-web-push-notification-on-browser-using-javascript.jpg" width="550" height="570" title="" alt="" /></div><div><div id="tutorial" readability="43.625138274336">
<div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on October 3rd, 2022.</div>
<p>Web push notifications are messages pushed asynchronously from a website and mobile application to an event target.</p>
<p>There are two types of web push notifications:</p>
<ol>
<li>Desktop notifications are shown when the foreground application is running and they are simple to use.</li>
<li>Notifications that are shown from the background even after the application is not running. It’s via a background <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank" rel="noopener">service worker</a> sync with the page or app.</li>
</ol>
<p>This tutorial implements the first type of sending the push notification via JavaScript. It uses the JavaScript <em>Notification</em> class to create and manage notification instances.</p>
<p><strong>Note: </strong>To show the notifications, permission should be granted by the user.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19659" src="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-550x570.jpg" alt="web push notification" width="550" height="570" srcset="https://phppot.com/wp-content/uploads/2022/10/web-push-notification-550x570.jpg 550w, https://phppot.com/wp-content/uploads/20...90x300.jpg 290w, https://phppot.com/wp-content/uploads/20...cation.jpg 590w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>About the example</h2>
<p>This example sends the web push notifications by calling the JavaScript Notification.</p>
<p>It sends only one notification by running this script. It can also be put into a cycle to automatically send notifications at a periodic interval.</p>
<p>This code uses the following steps to push the notification to the event target.</p>
<ol>
<li>It checks if the client has the required permissions and popups content window to have user acceptance.</li>
<li>It creates a notification instance by supplying the title, body and icon (path).</li>
<li>It refers to the on-click event mapping with the notification instance.</li>
</ol>
<p>When the user clicks on the notification, it opens the target URL passed while creating the JavaScript <em>Notification</em> class.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-php-template"><!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>
</code></pre>
<h2>Permissions required</h2>
<p>The following screenshot shows the settings to enable notification in the browser level and the system level.</p>
<h3>Browser level permission</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-19655" src="https://phppot.com/wp-content/uploads/2022/10/browser-permission-550x199.jpg" alt="browser permission" width="550" height="199" srcset="https://phppot.com/wp-content/uploads/2022/10/browser-permission-550x199.jpg 550w, https://phppot.com/wp-content/uploads/20...00x108.jpg 300w, https://phppot.com/wp-content/uploads/20...68x277.jpg 768w, https://phppot.com/wp-content/uploads/20...ission.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>OS level permission</h3>
<p>This is to allow the Google Chrome application to receive notifications. Similarly, select appropriate browser applications like Safai and Firefox to allow notification in them.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19656" src="https://phppot.com/wp-content/uploads/2022/10/system-permission-550x624.jpg" alt="system permission" width="550" height="624" srcset="https://phppot.com/wp-content/uploads/2022/10/system-permission-550x624.jpg 550w, https://phppot.com/wp-content/uploads/20...64x300.jpg 264w, https://phppot.com/wp-content/uploads/20...ission.jpg 663w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/web-push-notification/#top" class="top">↑ Back to Top</a> </p>
</p></div>
<div id="social-icon">
<p>Share this page</p>
</p></div>
</div>
https://www.sickgaming.net/blog/2022/10/...avascript/