{"id":30,"date":"2019-04-16T10:33:13","date_gmt":"2019-04-16T10:33:13","guid":{"rendered":"http:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&#038;p=30"},"modified":"2022-08-05T13:34:50","modified_gmt":"2022-08-05T13:34:50","slug":"how-to-use-push-notifications-in-pwa","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-use-push-notifications-in-pwa\/","title":{"rendered":"How to use Push Notifications in PWA"},"content":{"rendered":"<p>This tutorial is to show you how you can set up and use the <strong>Push notification<\/strong>. So just follow the below complete procedure for configuring push notifications and firebase, please refer following screenshot.<\/p>\n<p><strong>let\u2019s get started.<\/strong><\/p>\n<ul>\n<li>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt;<strong> PWA<\/strong> -&gt; <strong>Settings<\/strong> -&gt; <b>Features <\/b>-&gt; Enable &#8220;<strong>Push Notification&#8221; <\/strong>option -&gt; Click on the &#8220;<strong>gear<\/strong>&#8221; icon like below the screenshot.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-499\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1.png\" alt=\"\" width=\"1098\" height=\"492\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1.png 1098w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1-300x134.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1-768x344.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1-1024x459.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1-50x22.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1-60x27.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/1-100x45.png 100w\" sizes=\"auto, (max-width: 1098px) 100vw, 1098px\" \/><\/p>\n<p>Once you click on gear icon you can access the Settings page.In this page can set Push notification integration<\/p>\n<p><strong>Here is two type of Push notification integration<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-use-push-notifications-in-pwa\/#1-pushnotifications-io\">PushNotifications.io<\/a><\/li>\n<li><a href=\"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-use-push-notifications-in-pwa\/#2-fcm-push-notification\">FCM push notification<\/a><\/li>\n<\/ol>\n<h3><mark style=\"background-color: #eeeeee;\">1. PushNotifications.io<\/mark><\/h3>\n<p><strong>Setp 1:<\/strong> Once you select PushNotifications.io option you need to click on the install\u00a0 plugin button like belwo the screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-878 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18-300x83.png\" alt=\"\" width=\"550\" height=\"152\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18-300x83.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18-768x212.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18-50x14.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18-60x17.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18-100x28.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-35-18.png 774w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/p>\n<p><strong>Step 2:<\/strong> Click on the &#8220;<strong>View Setting&#8221;<\/strong> Button like below the screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-880 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52-300x86.png\" alt=\"\" width=\"569\" height=\"163\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52-300x86.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52-768x219.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52-50x14.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52-60x17.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52-100x29.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Desktop-2019-12-28-16-38-52.png 775w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/p>\n<p><strong>Step 3:<\/strong> After installing plugin you need API key\u00a0 for this click on the <a href=\"http:\/\/pushnotifications.io\/\"><strong>Get the Key<\/strong><\/a> link like below the screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-899 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1-300x70.png\" alt=\"\" width=\"579\" height=\"135\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1-300x70.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1-768x180.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1-50x12.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1-60x14.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1-100x23.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/14-1.png 785w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/p>\n<p><strong>Step 4:<\/strong> You can get the &#8220;<strong>API Key<\/strong>&#8221; manually from <strong>PushNotifications.io<\/strong> dashboard by going to <strong>Settings<\/strong> copy the <strong>API Key <\/strong>like below the screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-892 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-300x102.png\" alt=\"\" width=\"638\" height=\"217\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-300x102.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-768x260.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-1024x347.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-50x17.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-60x20.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1-100x34.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/13-1.png 1115w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/p>\n<p><strong>Step 5:<\/strong> Please copy the API Key and paste this Push Notification Options and then click on the &#8220;<strong>Validate<\/strong>&#8221; button like below the screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-901 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/15-1-300x71.png\" alt=\"\" width=\"596\" height=\"141\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/15-1-300x71.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/15-1-50x12.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/15-1-60x14.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/15-1-100x24.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/15-1.png 707w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/p>\n<p><strong>Step 6:<\/strong> Once you click on the Validate button it will redirected to Push Notification Option fill the information as per your requirement.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-882 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-300x193.png\" alt=\"\" width=\"560\" height=\"360\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-300x193.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-768x494.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-1024x659.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-50x32.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-60x39.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50-100x64.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/screencapture-localhost-wordpress-wp-admin-admin-php-2019-12-28-16_44_50.png 1366w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/p>\n<h3><mark style=\"background-color: #eeeeee;\">2. FCM push notification<\/mark><\/h3>\n<p><strong>Step 1:<\/strong> Once you click on gear icon you can access the Settings page. In the Push notification section please click on <strong>Firebase link<\/strong> to create a new Firebase project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-908 aligncenter\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/17-300x202.png\" alt=\"\" width=\"480\" height=\"323\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/17-300x202.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/17-50x34.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/17-60x40.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/17-100x67.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/17.png 767w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p><strong>Step 2:<\/strong> Then on the top right side, you will be able to see <strong>Go To Console<\/strong>. Please click on it and sign into your Gmail account.<\/p>\n<p><a href=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-38\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console.png\" alt=\"\" width=\"541\" height=\"169\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console.png 541w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console-300x94.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console-50x16.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console-60x19.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Go-To-Console-100x31.png 100w\" sizes=\"auto, (max-width: 541px) 100vw, 541px\" \/><\/a><\/p>\n<p><strong>Step 3:<\/strong> After signing in, you will be redirected to below screenshot, please click on <strong>Add project<\/strong>, then add project name.<\/p>\n<p><a href=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-34\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project.png\" alt=\"\" width=\"747\" height=\"569\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project.png 747w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project-300x229.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project-50x38.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project-60x46.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Add-Project-100x76.png 100w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/a><\/p>\n<p><strong>Step 4:<\/strong> Then you will be redirected to another page, in that you need to select the <strong>Embed option<\/strong>.<\/p>\n<p><a href=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-36\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed.png\" alt=\"\" width=\"788\" height=\"567\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed.png 788w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed-300x216.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed-768x553.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed-50x36.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed-60x43.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Embed-100x72.png 100w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/a><\/p>\n<p><strong>Step 5:<\/strong> Please copy the only <strong>relevant code<\/strong> and paste it in our <strong>Config settings<\/strong> of our PWA for WP plugin.<\/p>\n<p><a href=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-35\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code.png\" alt=\"\" width=\"765\" height=\"531\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code.png 765w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code-300x208.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code-50x35.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code-60x42.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/code-100x69.png 100w\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" \/><\/a><\/p>\n<p><strong>Step 6:<\/strong>\u00a0\u00a0Click on Settings, Cloud Messaging. The section Cloud Messaging API (Legacy) will show as disabled<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1534\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-300x111.png\" alt=\"\" width=\"835\" height=\"309\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-300x111.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-1024x378.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-768x284.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-50x18.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-60x22.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry-100x37.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/frthjfrtudretudfuhfrtuydftruydry.png 1365w\" sizes=\"auto, (max-width: 835px) 100vw, 835px\" \/><\/p>\n<p><strong>Step 7: <\/strong>Click on Settings, Cloud Messaging. The section Cloud Messaging API (Legacy) will show as disabled<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1546\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1-300x112.png\" alt=\"\" width=\"750\" height=\"280\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1-300x112.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1-1024x381.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1-50x19.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1-60x22.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1-100x37.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_1.png 1294w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<p><strong>Step 8: <\/strong>This will open the Google Cloud Console. Click on the enable button<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1549\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44-300x135.png\" alt=\"\" width=\"793\" height=\"357\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44-300x135.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44-768x345.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44-50x22.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44-60x27.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44-100x45.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_44.png 849w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/p>\n<p><strong>Step 9: <\/strong>Back in the project settings the Cloud Messaging API (Legacy) will now be enabled and have a server key. Copy the new server API key from the Firebase settings panel to your clipboard<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1553\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-300x120.png\" alt=\"\" width=\"805\" height=\"322\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-300x120.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-1024x411.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-768x308.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-50x20.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-60x24.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99-100x40.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/Screenshot_99.png 1265w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/p>\n<p><strong>Step 10: <\/strong>Add the API key to your\u00a0 Notification app dashboard.<\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope we\u2019ve clear your doubts in case If you have any feedback or questions, Just contact us\u00a0<strong><a href=\"http:\/\/pwa-for-wp.com\/contact-us\/\">here<\/a><\/strong>\u00a0and we are always available for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is to show you how you can set up and use the Push notification. So just follow the below complete procedure for configuring push notifications and firebase, please refer following screenshot. let\u2019s get started. You will find this option in the WordPress Dashboard -&gt; PWA -&gt; Settings -&gt;&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[],"class_list":["post-30","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-getting-started"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":62,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/30\/revisions"}],"predecessor-version":[{"id":1557,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/30\/revisions\/1557"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=30"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}