{"id":71309,"date":"2017-01-13T15:10:01","date_gmt":"2017-01-13T15:10:01","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=71309"},"modified":"2025-11-24T05:05:50","modified_gmt":"2025-11-24T05:05:50","slug":"web-push-notification-for-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/","title":{"rendered":"Guide of Web Push Notification for Magento 2"},"content":{"rendered":"<p><a href=\"https:\/\/store.webkul.com\/magento2-push-notification.html\" target=\"_blank\" rel=\"noopener\">Magento 2 Push Notification<\/a> extension allows you to send real-time push notifications to your customers.<\/p>\n<p>The subscribed users can see the push notifications on their web browser. The advantage of <span style=\"color: initial; font-size: revert;\">using push notifications is that it delivers the message immediately.<\/span><\/p>\n<p>Unlike emails that sometimes fail to deliver or go to the spam folder. Moreover, Web push notifications are always delivered and seen by the users.<\/p>\n<p>As long as the browser is running, a subscribed user will get a message even without opening up your website. This improves user engagement and retention.\u00a0<\/p>\n<p>Note- If you want to check Magento 2 push notifications on your smartwatch then use our <a href=\"https:\/\/webkul.com\/blog\/magento2-watch-app-documentation\/\" target=\"_blank\" rel=\"noopener\">Magento 2 Watch app<\/a> for the same.\u00a0<\/p>\n<h3 class=\"panel-title\">Features<\/h3>\n<ul>\n<li>It is very well integrated with Magento 2 Platform.<\/li>\n<li>Compatible with Mozilla Firefox, Google Chrome web browser, and mobile browsers.<\/li>\n<li>Designed to work with the <strong>SSL<\/strong>(Secure Sockets Layer) certificate websites.<\/li>\n<li>There is no monthly subscription required to notify customers.<\/li>\n<li>The admin can view the subscribed users list.<\/li>\n<li>There is no limitation on the number of subscribed users.<\/li>\n<li>The admin can create, edit and delete notification messages in the back end.<\/li>\n<li>A custom icon and target URL for their notification message can be set.<\/li>\n<li>Notifications can be sent to either all registered users or selected users.<\/li>\n<\/ul>\n<p>Check the updated plugin overview and backend configuration as well in the video mentioned below &#8211;<\/p>\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video wk-block-yt-classic components-placeholder\">\n<div class=\"wk-block--yt-video-frame\">\n<div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"l2L9159ORVc\">\n<div class=\"components-placeholder__instructions\">l2L9159OR<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Installation process<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>Initially, download the <strong>zip file<\/strong> and extract its content on your computer. The extracted folder will have a folder named\u00a0 as <strong>src<\/strong>, inside this folder, you will find <strong>app\u00a0<\/strong>folder.<\/p>\n<p>Copy this <strong>app<\/strong> folder\u00a0into <strong>Magento 2<\/strong> root directory on the server as shown below.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/Move-app-folder-2.png\"><img decoding=\"async\" class=\"aligncenter\" style=\"filter: invert(0);\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/Move-app-folder-2.png\" alt=\"Installation Of Magento2 Accordion FAQ\" loading=\"lazy\" \/><\/a><\/p>\n<h3>#Run Commands\u00a0<\/h3>\n<p>After the successful installation, you need to run the following commands in the Magento 2 root directory.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">composer require google\/auth<\/pre>\n<\/div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento setup:upgrade<\/pre>\n<div class=\"panel-body\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento setup:di:compile<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento setup:static-content:deploy<\/pre>\n<p>After running both commands, you need to flush the cache from the Magento admin panel. Navigate through <strong>System-&gt;Cache management<\/strong> as shown below.<\/p>\n<p>After flushing the Cache storage you will get a confirmation message as shown below.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/Flush-Cache-1.png\"><img decoding=\"async\" style=\"filter: invert(0);\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/Flush-Cache-1.png\" alt=\"Installation Of Magento2 Accordion FAQ\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Multi-Lingual Configuration<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>Further, for Multilingual support, please navigate to <strong>Store&gt;Configuration&gt;General &gt;Locale Options<\/strong>. And select your desired language from the <strong>Locale <\/strong>option.<a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/05\/change-language-magento-2-locale.png\"><img decoding=\"async\" class=\"size-full wp-image-88033 aligncenter\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/05\/change-language-magento-2-locale.png\" alt=\"change language-magento 2 locale\" width=\"800\" height=\"636\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Language Translation<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>Moreover, if you need to do the module translation, please navigate to the following path in your system <strong>app\/code\/Webkul\/PushNotification\/i18n<\/strong>.<\/p>\n<p>Open the file named <strong>en_US.CSV <\/strong>for editing as shown in the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/22-3.png\" alt=\"Magento2 Change CSV language file\" width=\"800\" height=\"400\" loading=\"lazy\" \/><\/p>\n<p>Once you have opened the file for editing. Replace the words after the<strong>\u2020comma(,)<\/strong>\u2020on the right with your translated words.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/33-2.png\" alt=\"Magento2 Change Language\" width=\"800\" height=\"316\" loading=\"lazy\" \/><\/p>\n<p>After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as &#8211;<strong> de_DE.CSV<\/strong>.<\/p>\n<p>Then upload the translated file to the same folder from where you have obtained it. Now your module translation is complete.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2016-05-02_16-25-34-3.png\" alt=\"Magento2 Change CSV Language file\" width=\"800\" height=\"399\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">How to Get API Credentials?<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>To use <strong>Magento 2 Push Notification<\/strong>, you need to have Firebase Project Credentials. Meanwhile, it is required during module configuration.<\/p>\n<p>Please click <strong><a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><\/strong> and <strong>create a new project<\/strong> with your <strong>Google<\/strong> account.<\/p>\n<p><strong>1.<\/strong>\u00a0 After opening the Firebase page. Please create a project by clicking <b>Get Started with a Firebase project<\/b>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474854\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-1.webp\" alt=\"firebase interface\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>2. <\/strong>Then, create a new project, enter the name of the project, and click continue.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474855\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-2.webp\" alt=\"web-push-notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>\u00a0The next step will ask you to set up Google Analytics. Let&#8217;s go ahead and set it up.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474857\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-3.webp\" alt=\"web-push-notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-3.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-3-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-3-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-3-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>(Optional) Enable Google Analytics for your project, then follow the prompts to select or create a Google Analytics account.<\/p>\n<p>If you don&#8217;t want to set google analytics disable the toggle button or you can click &#8220;Continue&#8221; and you will be taken to the project home page.\u00a0<\/p>\n<p>Choose or create new Google Analytics, and click &#8220;<strong>Create project&#8221;<\/strong><b>.<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474858\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-4.webp\" alt=\"web-push-notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-4.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-4-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-4-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-4-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Finally, select your Google Analytics location (the United States by default) and read and configure the sharing settings.<\/p>\n<p>Finally, accept the Google Analytics Terms of Use and create a project. The process only takes a few seconds. When finished, click &#8220;Continue&#8221; and you will be taken to the project home page.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-474933 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-5-1.webp\" alt=\"push notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-5-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-5-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-5-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-5-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>After checking on the Continue button, it brings up the below section.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474934\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-1.webp\" alt=\"push-notification-6\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>3.<\/strong> After creating your new project, click on the <strong>Settings <\/strong>cog\u00a0icon. Then select the <strong>Project Settings<\/strong> option. Please view the screenshot below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-474935 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-7-1.webp\" alt=\"push-notification-7\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-7-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-7-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-7-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-7-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>4.<\/strong> Moreover, navigate through <strong>Project Settings &gt; General <\/strong>will find the other Firebase Project Credentials under web apps. Now, you can see the general settings here.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474936\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-1.webp\" alt=\"general settings\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<h3><strong>Further Steps<\/strong><\/h3>\n<p>Now, click on the web app option then t<span style=\"font-size: revert; color: initial;\">his brings up the below section. Enter the new web app name and proceed further.<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474929\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6.webp\" alt=\"push-notification-6\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-6-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/>After that, add Firebase SDK as required.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-474991 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification.webp\" alt=\"notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<div class=\"panel-body\">\n<p>Lastly, tap <strong>C<\/strong><strong>ontinue to console<\/strong> and you can check the required details. and you need to enter these credentials into the admin configuration.<\/p>\n<\/div>\n<p>So, after following the above steps we will get these credentials \u2013\u00a0\u00a0<\/p>\n<ul>\n<li>Web API Key<\/li>\n<li>FCM Auth Domain<\/li>\n<li>FCM Project ID<\/li>\n<li>FCM Storage Bucket<\/li>\n<li>Messaging Sender ID<\/li>\n<li>FCM App ID<\/li>\n<li>Measurement ID<\/li>\n<\/ul>\n<p><strong>5. <\/strong>Then<strong>, <\/strong>go to the <strong>Cloud Messaging<\/strong> option. <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">You will find your\u00a0<strong>Project<\/strong>\u00a0<strong>Credentials here<\/strong><\/span>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474989\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-2.webp\" alt=\"push-notification-9\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>To create the key, click the Generate Key pair button.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474959\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-12-1.webp\" alt=\"web-push-notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-12-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-12-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-12-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-12-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<div class=\"wk-index-wrap\">\n<h3 id=\"how-to-get-auth-json-file\" class=\"index-title copy-index\">How to Get \u2013 Auth JSON file<\/h3>\n<\/div>\n<p>Navigate to your particular project\u2019s settings section and go to the Service Accounts tab.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474931\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8.webp\" alt=\"push-notification-8\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-8-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Here, tap the Generate New Private Key button, that brings up a popup. Tap to continue and download the JSON file.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-474932\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9.webp\" alt=\"push-notification-9\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/push-notification-9-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>The file gets downloaded on your system and when opened looks like as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-475018 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/firebase-creds.webp\" alt=\"firebase creds\" width=\"1262\" height=\"534\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/firebase-creds.webp 1262w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/firebase-creds-300x127.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/firebase-creds-1200x508.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/firebase-creds-250x106.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/firebase-creds-768x325.webp 768w\" sizes=\"(max-width: 1262px) 100vw, 1262px\" loading=\"lazy\" \/><\/p>\n<h3 class=\"panel-title\">Module Configuration &#8211; By Admin<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p><span data-offset-key=\"calte-0-0\">After installing this module,\u00a0 log in to the Magento 2 backend admin panel and navigate through <\/span><strong>Stores &gt; Con<\/strong><strong>figuration &gt; <\/strong><strong>Push Notification<\/strong>.<img decoding=\"async\" class=\"alignnone size-full wp-image-474863\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-9.webp\" alt=\"web-push-notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-9.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-9-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-9-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-9-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>Here, you have to make use of the <strong>credentials<\/strong> that you have <strong>generated<\/strong> as shown under the section &#8220;<strong>How to Get API Credentials?<\/strong>&#8220;.\u00a0<\/p>\n<ul>\n<li><strong>Web API Key:<\/strong> The admin can get the Web API key from the Firebase in the General tab under the project setting.<\/li>\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\"><strong>FCM(Firebase Cloud Messaging) Details:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Auth Domain<\/strong>: Enter the auth domain name here from the Firebase web app.<\/li>\n\n\n\n<li><strong>FCM Auth Domain Auth JSON File Path<\/strong>: Here attach the downloaded auth JSON file.<\/li>\n\n\n\n<li><strong>Project Id:<\/strong>&nbsp;Enter the generated FCM Project ID here.<\/li>\n\n\n\n<li><strong>FCM Storage Bucket<\/strong>: Enter storage bucket id here.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Messaging Sender ID<\/strong>: Enter the sender ID here.<\/li>\n\n\n\n<li><strong>FCM App Id:<\/strong>&nbsp;Enter the FCM App ID here.<\/li>\n\n\n\n<li><strong>Public Key: <\/strong>Enter the public key here and it can be found in cloud messaging under the project setting as web push certificates.<\/li>\n\n\n\n<li><strong>Measurement ID<\/strong>: Enter the measurement ID here.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Push Notification Rule<\/strong>:<\/h3>\n\n\n\n<p>Here, the admin can enable the automatic push notification rule by enabling this option. <\/p>\n\n\n\n<p>The admin can add a new rule by setting up the time when the push notification will be sent out automatically to the subscribers and choosing the respective template for the same.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-10.webp\" alt=\"web-push-notification config\" class=\"wp-image-474864\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-10.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-10-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-10-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-10-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After entering the required values, tap the <strong>Save Config<\/strong> button at the top right-hand corner.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-13.webp\" alt=\"web-push-notification\" class=\"wp-image-474867\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-13.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-13-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-13-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-13-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p><span data-offset-key=\"5j8c1-0-0\">Once you have installed this module, you find a <strong>Push Notification<\/strong> menu option on the left side admin panel. Tap it and you will have two sub-menu options to configure &#8211; <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Notifications Templates <\/strong><\/li>\n\n\n\n<li><strong>Registered Users<\/strong><span data-offset-key=\"5j8c1-0-4\">.<\/span><\/li>\n<\/ul>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">\nCreating a New Notification Template\n<\/h3>\n<\/div><\/div>\n\n\n\n<p><span data-offset-key=\"4fo3d-0-0\">After clicking the Notification Templates option, you will find all the push notification messages already created. <\/span><\/p>\n\n\n\n<p><span data-offset-key=\"4fo3d-0-0\">Here, you can find the template title, message, redirect URL, logo, tags, creation date and time. <\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-14.webp\" alt=\"web-push-notification\" class=\"wp-image-474869\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-14.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-14-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-14-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-14-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p><span data-offset-key=\"4fo3d-0-2\">Further, the admin can add, edit or delete notification messages. To create a new push notification message, please click <\/span><span data-offset-key=\"4fo3d-0-3\"><strong>Create New<\/strong>.<\/span><\/p>\n\n\n\n<p><span data-offset-key=\"ff941-0-0\">After clicking <\/span><strong>Create New<\/strong><span data-offset-key=\"ff941-0-2\"> button you will arrive at <\/span><strong>Template Field set<\/strong><span data-offset-key=\"ff941-0-4\"> page. Here you need to fill out all the necessary information about your new template. <\/span><\/p>\n\n\n\n<p><span data-offset-key=\"ff941-0-4\">After that, please click <\/span><strong>Save Template<\/strong><span data-offset-key=\"ff941-0-6\"> button to save your new template message.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Template Fieldset:<\/h3>\n\n\n\n<p><strong>Title<\/strong> &#8211; This will be your title of your notification message.<\/p>\n\n\n\n<p><strong>Template Message<\/strong> &#8211; This is where you have to enter the content of your message.<\/p>\n\n\n\n<p><strong>Redirect URL<\/strong> &#8211; The web page link will be displayed on the notification message.<\/p>\n\n\n\n<p><strong>Template Tags<\/strong> &#8211; Add tags to your messages to identify them.<\/p>\n\n\n\n<p><strong>Template Logo<\/strong> &#8211; You can upload any customized logo for the notification.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-15.webp\" alt=\"web-push-notification\" class=\"wp-image-474870\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-15.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-15-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-15-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-15-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">\nHow to Select Users for the New Web Push Notification?\n<\/h3>\n<\/div><\/div>\n\n\n\n<p><span data-offset-key=\"dq5lu-0-0\">After creating the template in the previous step, you need to select your recipients. Go to <\/span><strong>Push Notification<\/strong>&gt;<strong>Registered Users<\/strong><span data-offset-key=\"dq5lu-0-4\"> option.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6.png\"><img decoding=\"async\" width=\"1220\" height=\"530\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6.png\" alt=\"registered users section with details \" class=\"wp-image-99736\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6.png 1220w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6-250x109.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6-300x130.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6-768x334.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot_1-6-1200x521.png 1200w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><span data-offset-key=\"4uqfk-0-0\">On this page, you can manage all the <strong>Registered<\/strong> <strong>Users<\/strong>. These are the subscribed users of your website. <\/span><\/p>\n\n\n\n<p><span data-offset-key=\"4uqfk-0-0\">You can either delete or send them notification messages. Meanwhile, the admin can view subscribed user ID, name, browser, and subscribed time &amp; date.<\/span><\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">\nSend Web Push Notification\n<\/h3>\n<\/div><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/send-notification.png\"><img decoding=\"async\" width=\"412\" height=\"247\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/send-notification.png\" alt=\"sending web push notifications when required\" class=\"wp-image-99742\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/send-notification.png 412w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/send-notification-250x150.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/send-notification-300x180.png 300w\" sizes=\"(max-width: 412px) 100vw, 412px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><span data-offset-key=\"6e5m0-0-0\">After creating a template the admin can select all or few subscribed users. To select all users click the small drop-down menu and click Select All option. <\/span><\/p>\n\n\n\n<p><span data-offset-key=\"6e5m0-0-0\">To select few users use the checkbox option.&nbsp;After selecting the users. Go to <\/span><strong>Actions<\/strong>&gt;<span data-offset-key=\"85u33-0-3\"><strong>Send Notification<\/strong>, then select the template.<\/span><\/p>\n\n\n\n<p>Click <strong>OK<\/strong> button to send the notification.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">\nDelete Template\n<\/h3>\n<\/div><\/div>\n\n\n\n<p><span data-offset-key=\"58fr1-0-0\">For deleting the <\/span>template go to the PUSH NOTIFICATION menu and select the <strong>Notification Templates<\/strong><span data-offset-key=\"58fr1-0-4\"> option. <\/span><\/p>\n\n\n\n<p><span data-offset-key=\"58fr1-0-4\">Then select the message <\/span>and go to the Actions<span data-offset-key=\"58fr1-0-6\"> drop-down menu and click <\/span><strong>Delete<\/strong><span data-offset-key=\"58fr1-0-8\">. A confirmation message will appear, click <\/span><strong>OK<\/strong><span data-offset-key=\"58fr1-0-10\">.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-16.webp\" alt=\"web-push-notification\" class=\"wp-image-474871\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-16.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-16-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-16-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-16-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Web Push Notification &#8211; Front-End view <\/h3><\/div><div class=\"margin-bottom-50\">\n<p>After the installation of the module, the user will see a push notification on their website.<\/p>\n\n\n\n<p>The users have to click the <strong>Allow<\/strong> button to receive notifications from your website. Please refer to the below screenshot:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1.png\"><img decoding=\"async\" width=\"1340\" height=\"769\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1.png\" alt=\"visible webstore fronetnd notification\" class=\"wp-image-73232\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1.png 1340w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1-250x143.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1-300x172.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1-768x441.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Screenshot-from-2017-01-23-11-19-16-1-1200x689.png 1200w\" sizes=\"(max-width: 1340px) 100vw, 1340px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">\nSample Push Notification\n<\/h3>\n<\/div><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-frontend-1.png\"><img decoding=\"async\" width=\"1056\" height=\"635\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-frontend-1.png\" alt=\"sample push notification\" class=\"wp-image-99747\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-frontend-1.png 1056w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-frontend-1-250x150.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-frontend-1-300x180.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/web-push-notification-frontend-1-768x462.png 768w\" sizes=\"(max-width: 1056px) 100vw, 1056px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>You can check how the sent push notification will appear on the webstore front-end. Template Title, Template Logo, Template Message, and the Redirect URL are visible to the users.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sample Push Notification (Mobile browser)<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"500\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract-500x1024.png\" alt=\"Web Push notification\" class=\"wp-image-293216\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract-500x1024.png 500w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract-147x300.png 147w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract-122x249.png 122w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract-768x1572.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract-751x1536.png 751w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/extract.png 859w\" sizes=\"(max-width: 500px) 100vw, 500px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>For any queries or more information please feel free to contact us by creating a ticket at <a href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/\" target=\"_blank\" rel=\"noopener noreferrer\">our HelpDesk system.<\/a> <\/p>\n\n\n\n<p>You can also check our quality <a href=\"https:\/\/store.webkul.com\/Magento-2.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Magento 2 Extensions<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 Push Notification extension allows you to send real-time push notifications to your customers. The subscribed users can see the push notifications on their web browser. The advantage of using push notifications is that it delivers the message immediately. Unlike emails that sometimes fail to deliver or go to the spam folder. Moreover, Web <a href=\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":135,"featured_media":77628,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[2070,2722,3812],"class_list":["post-71309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-magento2","tag-push-notification","tag-web-push-notification"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide of Web Push Notification for Magento 2<\/title>\n<meta name=\"description\" content=\"Send web push notification to your customers on Chrome and Firefox web-browsers. Inform them about updates related to offers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide of Web Push Notification for Magento 2\" \/>\n<meta property=\"og:description\" content=\"Send web push notification to your customers on Chrome and Firefox web-browsers. Inform them about updates related to offers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/rk225\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-13T15:10:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-24T05:05:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rohit Kashyap\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/rohitk225\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rohit Kashyap\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\"},\"author\":{\"name\":\"Rohit Kashyap\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6\"},\"headline\":\"Guide of Web Push Notification for Magento 2\",\"datePublished\":\"2017-01-13T15:10:01+00:00\",\"dateModified\":\"2025-11-24T05:05:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\"},\"wordCount\":1605,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png\",\"keywords\":[\"Magento2\",\"push notification\",\"Web Push Notification\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\",\"name\":\"Guide of Web Push Notification for Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png\",\"datePublished\":\"2017-01-13T15:10:01+00:00\",\"dateModified\":\"2025-11-24T05:05:50+00:00\",\"description\":\"Send web push notification to your customers on Chrome and Firefox web-browsers. Inform them about updates related to offers.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide of Web Push Notification for Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6\",\"name\":\"Rohit Kashyap\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rohit Kashyap\"},\"description\":\"Rohit Kashyap drives global promotion of digital commerce services through client success documentation, social media management, and video podcast sessions, enhancing the visibility and market reach.\",\"sameAs\":[\"https:\/\/webkul.com\/\",\"https:\/\/www.facebook.com\/rk225\",\"https:\/\/www.instagram.com\/rk225\",\"https:\/\/in.linkedin.com\/in\/rk225\",\"https:\/\/x.com\/https:\/\/twitter.com\/rohitk225\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/rohit-kashyap971\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide of Web Push Notification for Magento 2","description":"Send web push notification to your customers on Chrome and Firefox web-browsers. Inform them about updates related to offers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/","og_locale":"en_US","og_type":"article","og_title":"Guide of Web Push Notification for Magento 2","og_description":"Send web push notification to your customers on Chrome and Firefox web-browsers. Inform them about updates related to offers.","og_url":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"https:\/\/www.facebook.com\/rk225","article_published_time":"2017-01-13T15:10:01+00:00","article_modified_time":"2025-11-24T05:05:50+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png","type":"image\/png"}],"author":"Rohit Kashyap","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/rohitk225","twitter_site":"@webkul","twitter_misc":{"Written by":"Rohit Kashyap","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/"},"author":{"name":"Rohit Kashyap","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6"},"headline":"Guide of Web Push Notification for Magento 2","datePublished":"2017-01-13T15:10:01+00:00","dateModified":"2025-11-24T05:05:50+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/"},"wordCount":1605,"commentCount":8,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png","keywords":["Magento2","push notification","Web Push Notification"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/","url":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/","name":"Guide of Web Push Notification for Magento 2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png","datePublished":"2017-01-13T15:10:01+00:00","dateModified":"2025-11-24T05:05:50+00:00","description":"Send web push notification to your customers on Chrome and Firefox web-browsers. Inform them about updates related to offers.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/download-17-1.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/web-push-notification-for-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Guide of Web Push Notification for Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6","name":"Rohit Kashyap","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rohit Kashyap"},"description":"Rohit Kashyap drives global promotion of digital commerce services through client success documentation, social media management, and video podcast sessions, enhancing the visibility and market reach.","sameAs":["https:\/\/webkul.com\/","https:\/\/www.facebook.com\/rk225","https:\/\/www.instagram.com\/rk225","https:\/\/in.linkedin.com\/in\/rk225","https:\/\/x.com\/https:\/\/twitter.com\/rohitk225"],"url":"https:\/\/webkul.com\/blog\/author\/rohit-kashyap971\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/71309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/135"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=71309"}],"version-history":[{"count":123,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/71309\/revisions"}],"predecessor-version":[{"id":514342,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/71309\/revisions\/514342"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/77628"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=71309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=71309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=71309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}