Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tut] How to do Web Push Notification on Browser using JavaScript

#1
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&nbsp;<em>Notification</em> class.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-php-template">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Web Push Notification using JavaScript in a Browser&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt; &lt;div class="phppot-container"&gt; &lt;h1&gt;Web Push Notification using JavaScript in a Browser&lt;/h1&gt; &lt;script&gt; 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) =&gt; { // 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'); }; } &lt;/script&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</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/
Reply



Forum Jump:


Users browsing this thread:
2 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016