{"id":128590,"date":"2022-10-03T14:53:16","date_gmt":"2022-10-03T14:53:16","guid":{"rendered":"https:\/\/phppot.com\/?p=19629"},"modified":"2022-10-03T14:53:16","modified_gmt":"2022-10-03T14:53:16","slug":"how-to-do-web-push-notification-on-browser-using-javascript","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/10\/03\/how-to-do-web-push-notification-on-browser-using-javascript\/","title":{"rendered":"How to do Web Push Notification on Browser using JavaScript"},"content":{"rendered":"
\n
by Vincy<\/a>. Last modified on October 3rd, 2022.<\/div>\n

Web push notifications are messages pushed asynchronously from a website and mobile application to an event target.<\/p>\n

There are two types of web push notifications:<\/p>\n

    \n
  1. Desktop notifications are shown when the foreground application is running and they are simple to use.<\/li>\n
  2. Notifications that are shown from the background even after the application is not running. It\u2019s via a background service worker<\/a> sync with the page or app.<\/li>\n<\/ol>\n

    This tutorial implements the first type of sending the push notification via JavaScript. It uses the JavaScript Notification<\/em> class to create and manage notification instances.<\/p>\n

    Note: <\/strong>To show the notifications, permission should be granted by the user.<\/p>\n

    \"web<\/p>\n

    About the example<\/h2>\n

    This example sends the web push notifications by calling the JavaScript Notification.<\/p>\n

    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>\n

    This code uses the following steps to push the notification to the event target.<\/p>\n

      \n
    1. It checks if the client has the required permissions and popups content window to have user acceptance.<\/li>\n
    2. It creates a notification instance by supplying the title, body and icon (path).<\/li>\n
    3. It refers to the on-click event mapping with the notification instance.<\/li>\n<\/ol>\n

      When the user clicks on the notification, it opens the target URL passed while creating the JavaScript Notification<\/em> class.<\/p>\n

      index.php<\/p>\n

      <!DOCTYPE html>\n<html>\n<head>\n<title>Web Push Notification using JavaScript in a Browser<\/title>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.1.min.js\" integrity=\"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=\" crossorigin=\"anonymous\"><\/script>\n<\/head>\n<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>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
      Permissions required<\/h2>\n
      The following screenshot shows the settings to enable notification in the browser level and the system level.<\/p>\n
      Browser level permission<\/h3>\n
      \"browser<\/p>\n
      OS level permission<\/h3>\n
      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>\n
      \"system<\/p>\n
        <\/p>\n
      \n
      Popular Articles<\/h2>\n<\/p><\/div>\n
       \u2191 Back to Top<\/a> <\/p>\n<\/p><\/div>\n
      \n
      Share this page<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
      by Vincy. Last modified on October 3rd, 2022. Web push notifications are messages pushed asynchronously from a website and mobile application to an event target. There are two types of web push notifications: Desktop notifications are shown when the foreground application is running and they are simple to use. Notifications that are shown from the […]<\/p>\n","protected":false},"author":2,"featured_media":128591,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-128590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/128590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=128590"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/128590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/128591"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=128590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=128590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=128590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}