[Tut] How to do Web Push Notification on Browser using JavaScript - Printable Version +- Sick Gaming (https://www.sickgaming.net) +-- Forum: Programming (https://www.sickgaming.net/forum-76.html) +--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html) +--- Thread: [Tut] How to do Web Push Notification on Browser using JavaScript (/thread-100022.html) |
[Tut] How to do Web Push Notification on Browser using JavaScript - xSicKxBot - 10-04-2022 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/2022/10/web-push-notification-290x300.jpg 290w, https://phppot.com/wp-content/uploads/2022/10/web-push-notification.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/2022/10/browser-permission-300x108.jpg 300w, https://phppot.com/wp-content/uploads/2022/10/browser-permission-768x277.jpg 768w, https://phppot.com/wp-content/uploads/2022/10/browser-permission.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/2022/10/system-permission-264x300.jpg 264w, https://phppot.com/wp-content/uploads/2022/10/system-permission.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/03/how-to-do-web-push-notification-on-browser-using-javascript/ |