{"id":160078,"date":"2019-01-29T06:02:25","date_gmt":"2019-01-29T06:02:25","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=160078"},"modified":"2023-02-02T07:37:55","modified_gmt":"2023-02-02T07:37:55","slug":"progressive-web-application-for-shopify","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/","title":{"rendered":"Progressive Application for Shopify"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong><span class=\"has-inline-color has-vivid-red-color\">Note<\/span>: PWAfy is not available for new users<\/strong>.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">What is PWA?<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>PWA (Progressive Web Application) is a midway of web pages and applications. <\/p>\n\n\n\n<p>These are the web\u00a0applications that load like regular web pages\/websites but provide us with benefits like easy to load, no installation hassle, working offline, and push notification feature. <\/p>\n\n\n\n<p>What else do we want without actually installing the apps in our devices and bulking our phones with heavy GBs of applications but still experiencing an app-like interface!<\/p>\n\n\n\n<p>This app comes with two different plans, i.e., <strong>Monthly<\/strong> &amp; <strong>Yearly<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Executive Plan (monthly): $9<\/li>\n\n\n\n<li>Premium Plan (yearly): $99<\/li>\n<\/ul>\n\n\n\n<p>\u223cPlans related details are discussed ahead in this blog.<\/p>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">PWA FEATURES<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Highlighting some of the features of PWA here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No need to install. Simply just add on your&nbsp;home screen.<\/li>\n\n\n\n<li>Very light on memory.<\/li>\n\n\n\n<li>Less data-hungry.<\/li>\n\n\n\n<li>Works well on flaky networks.<\/li>\n\n\n\n<li>Loaded pages can be viewed even if you don&#8217;t have access to your internet i.e., works offline.<\/li>\n\n\n\n<li>Push notification&nbsp;is&nbsp;one appreciated&nbsp;feature of PWA.<\/li>\n\n\n\n<li>A hassle-free way to turn your store into an app.<\/li>\n\n\n\n<li>Makes your&nbsp;website lightning fast.<\/li>\n\n\n\n<li>Configure app name &amp; icon on android\/iOS.<\/li>\n\n\n\n<li>Completely responsive on almost all platforms.<\/li>\n\n\n\n<li>Admin can upload and change the application icon.<\/li>\n\n\n\n<li>He can set the splash background color of the Progressive Web Application.<\/li>\n\n\n\n<li>The Admin can add a store app link on the frontend.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">How to install this application?<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Go to <a href=\"http:\/\/app-sp.webkul.com\/pwa\/\" target=\"_blank\" rel=\"noreferrer noopener\">Landing Page<\/a>, enter the shop URL where you want this app to be installed and click on the &#8216;install&#8217; menu.<\/p>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1286\" height=\"657\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png\" alt=\"Landing page for PWA Shopify by Webkul\" class=\"wp-image-160145\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul-1200x613.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">WORKFLOW<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Once you install the app, you can find it in the app section of your Shopify&nbsp;store backend.<\/p>\n<\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1286\" height=\"603\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Shopify.png\" alt=\"progressive application for shopify by webkul\" class=\"wp-image-167549\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Shopify.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Shopify-250x117.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Shopify-300x141.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Shopify-768x360.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Shopify-1200x563.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Once you double click on the app&#8217;s name you will be introduced with the &#8216;Home Page&#8217;.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">HOME<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>This is the Home Page:<\/p>\n<\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1085\" height=\"615\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/jls14la1s-1301\u00d7672-.png\" alt=\"Homepage of PWA for Shopify by Webkul\" class=\"wp-image-162605\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/jls14la1s-1301\u00d7672-.png 1085w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/jls14la1s-1301\u00d7672--250x142.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/jls14la1s-1301\u00d7672--300x170.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/jls14la1s-1301\u00d7672--768x435.png 768w\" sizes=\"(max-width: 1085px) 100vw, 1085px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Under this, we have four sections: Home (the one we are currently at), Configuration, Push Notification, and Configure Frontend. Below that we have some of the PWA features displayed.<\/p>\n\n\n\n<p>On the Home page, we have a menu of FAQ&nbsp;which will redirect you to a page where you will get all FAQs related to this application.<\/p>\n\n\n\n<p>Moving ahead, you will see an option of feature configuration. Clicking on the &#8216;Configure App&#8217; menu will redirect you to the Configuration section (will be discussed ahead in this manual). Next, you have a brief definition of PWA with &#8216;View App Feature&#8217; and &#8216;Take a tour&#8217; menu. Go ahead and explore these options.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1003\" height=\"362\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1.png\" alt=\"feature configuration PWA for Shopify by Webkul\" class=\"wp-image-160152\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1.png 1003w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-250x90.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-300x108.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-768x277.png 768w\" sizes=\"(max-width: 1003px) 100vw, 1003px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Lastly, on the Home page we have these two menus:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"957\" height=\"278\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-2.png\" alt=\"support PWA for Shopify by Webkul\" class=\"wp-image-160153\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-2.png 957w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-2-250x73.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-2-300x87.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-2-768x223.png 768w\" sizes=\"(max-width: 957px) 100vw, 957px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Click on the &#8216;Schedule Booking&#8217; menu if you want to get one to one live support from our best executives and if you have any queries, you can create a ticket by clicking on the &#8216;Create Ticket&#8217; menu and your request will be resolved as soon as possible.<\/p>\n\n\n\n<p>This is all for the Home page, moving ahead to the Configuration section.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">CONFIGURATION<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Configuration section will be displayed like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1286\" height=\"601\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-Progressive-Application-Shopify-1-e1552040068355.png\" alt=\"configuration PWA for Shopify by Webkul\" class=\"wp-image-160605\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-Progressive-Application-Shopify-1-e1552040068355.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-Progressive-Application-Shopify-1-e1552040068355-250x117.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-Progressive-Application-Shopify-1-e1552040068355-300x140.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-Progressive-Application-Shopify-1-e1552040068355-768x359.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-Progressive-Application-Shopify-1-e1552040068355-1200x561.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Firstly, you will have to manage General Configuration settings where you basically need to enter a name for your app (which will be displayed below the web app launcher icon when your users will install it in their devices), the Tagline (this will be the welcome line which will be displayed on the screen for once when you are done installing the web app on your device) and you also need to upload the&nbsp;Launcher icon (which will represent your web app).<\/p>\n\n\n\n<p>Next, in general configuration, you need to check the box which says &#8216;Show App Features to customers while App Installation&#8217; if you want your customers to see your apps feature while installing it with a brief description. Upload a &#8216;splash screen&#8217;, which could be any picture that you want to display on the background of your app while installation (refer to the image below). &#8216;Save &amp; Publish&#8217; to save all the changes made.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1097\" height=\"538\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-4.png\" alt=\"configuration PWA for Shopify by Webkul\" class=\"wp-image-160178\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-4.png 1097w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-4-250x123.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-4-300x147.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-4-768x377.png 768w\" sizes=\"(max-width: 1097px) 100vw, 1097px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Under the &#8216;General Configuration&#8217; setting, you have the &#8216;Push Notification Configuration&#8217;.<\/p>\n\n\n\n<p>Here you need to enter your Firebase Sender ID, Server Key, Application Public Server Key, Application Private Server Key (<a href=\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#how-to-get-your-firebase-id-and-keys\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">know how to get these keys<\/a>). Then you need to upload a &#8216;Push Notification Icon&#8217;, which will be shown on the very first welcome notification just after you install the web app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"623\" height=\"511\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-5.png\" alt=\"push notification PWA for Shopify by Webkul\" class=\"wp-image-160180\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-5.png 623w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-5-250x205.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-5-300x246.png 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Lastly under &#8216;Push Notification Configuration&#8217;, you need to enter &#8216;Push Notification Title&#8217; and &#8216;Push Notification Description&#8217; which will be displayed on the welcome notification sent to your customers once they install your web app. After this, click on &#8216;Save&#8217;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"573\" height=\"339\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/b-2.png\" alt=\"push notification PWA for Shopify by Webkul\" class=\"wp-image-160212\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/b-2.png 573w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/b-2-250x148.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/b-2-300x177.png 300w\" sizes=\"(max-width: 573px) 100vw, 573px\" loading=\"lazy\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">How to get your Firebase ID and keys?<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Firstly <a href=\"https:\/\/console.firebase.google.com\" target=\"_blank\" rel=\"noreferrer noopener\">login<\/a> to your Firebase account using your credentials. This will be the page where you will land on:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1286\" height=\"657\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console.png\" alt=\"firebase console PWA for Shopify by Webkul\" class=\"wp-image-160186\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-1200x613.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, click on &#8216;Add Project&#8217;, this action will give you this pop up:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1286\" height=\"657\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-2-1.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160563\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-2-1.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-2-1-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-2-1-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-2-1-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Firebase-console-2-1-1200x613.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Enter the project name, check the &#8216;I accept&#8217; message and then click on &#8216;Create Project&#8217;. After a few blinks, your project will be created and then after clicking &#8216;continue&#8217;, you will land on this Home page:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1286\" height=\"657\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Overview-\u2013-Firebase-console.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160189\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Overview-\u2013-Firebase-console.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Overview-\u2013-Firebase-console-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Overview-\u2013-Firebase-console-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Overview-\u2013-Firebase-console-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Overview-\u2013-Firebase-console-1200x613.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Click on the &#8216;setting&#8217; menu below the Home icon (as shown in the image above) and then go to &#8216;Project Settings&#8217;.<\/p>\n\n\n\n<p>This is what you will get:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1286\" height=\"657\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Settings-\u2013-Firebase-console.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160190\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Settings-\u2013-Firebase-console.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Settings-\u2013-Firebase-console-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Settings-\u2013-Firebase-console-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Settings-\u2013-Firebase-console-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-Project-\u2013-Settings-\u2013-Firebase-console-1200x613.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>From &#8216;Settings&#8217;, go to &#8216;Cloud Messaging&#8217;, here you will get your Sender ID as well as Server Key. Now, scroll down to the bottom of this page, you will get this &#8216;Web Push certificates&#8217; section:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"979\" height=\"353\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160191\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console.png 979w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-250x90.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-300x108.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-768x277.png 768w\" sizes=\"(max-width: 979px) 100vw, 979px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Click on &#8216;Generate Key Pair&#8217;, it will give you this page:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"938\" height=\"330\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-1.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160192\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-1.png 938w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-1-250x88.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-1-300x106.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-1-768x270.png 768w\" sizes=\"(max-width: 938px) 100vw, 938px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, you will have your &#8216;Application public server key&#8217;. For &#8216;Application private server key&#8217;, click on the three dots as shown in the image above. It will give you an option to &#8216;Show Private Key&#8217; (refer image below).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"996\" height=\"323\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-2.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160193\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-2.png 996w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-2-250x81.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-2-300x97.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-2-768x249.png 768w\" sizes=\"(max-width: 996px) 100vw, 996px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Clicking on the &#8216;Show private key&#8217; will give you a pop up with &#8216;Application private server key&#8217;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"883\" height=\"272\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-3.png\" alt=\"firebase PWA for Shopify by Webkul\" class=\"wp-image-160197\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-3.png 883w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-3-250x77.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-3-300x92.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/edfeds-\u2013-Settings-\u2013-Firebase-console-3-768x237.png 768w\" sizes=\"(max-width: 883px) 100vw, 883px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Copy all these keys and paste it in the &#8216;Push Notification Configuration&#8217;.<\/p>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">PUSH NOTIFICATION<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>This will be the page that you will get once you click on the \u2018Push Notification\u2019 menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1286\" height=\"601\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-7-e1552040115664.png\" alt=\"push notification PWA for Shopify by Webkul\" class=\"wp-image-160205\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-7-e1552040115664.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-7-e1552040115664-250x117.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-7-e1552040115664-300x140.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-7-e1552040115664-768x359.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-7-e1552040115664-1200x561.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>On the top right of the page, you have the \u2018Add Push Notification\u2019 menu.<\/p>\n\n\n\n<p>Below that, you have a table with Title, Description, Push Notification Icon, Schedule Date, Push Notification, Status, and Action.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Title: This is the heading of the notification that will be sent to your customers like if you are having a sale on your store, you can put up a title like \u2018sale\u2019.<\/li>\n\n\n\n<li>Description: This is the details about your notification like what is the sale about or offers your giving.<\/li>\n\n\n\n<li>Push Notification Icon: This icon will be shown with the notification depicting the reason for the notification or can be your store logo.<\/li>\n\n\n\n<li>Schedule Date: This is the duration for which you want your customers to be notified about this particular notification.<\/li>\n\n\n\n<li>Push Notification: This is a button for manual notifications. You can press it any time you want to send your customers that particular notification.<\/li>\n\n\n\n<li>Status: If the status is active, notifications will be sent to your customers as per the duration defined. If it is inactive, notifications will not be sent to your customers. Though, you may send manual notifications even if the status is inactive.<\/li>\n\n\n\n<li>Action: This allows us to perform three actions on the notification, i.e., Delete, Edit and Inactive.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">How to add Push Notification?<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Click on the \u2018Add Push Notification\u2019 menu on the top right and this action will display a pop up on your screen like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1286\" height=\"610\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-1-e1552040155650.png\" alt=\"push notification PWA for Shopify by Webkul\" class=\"wp-image-160206\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-1-e1552040155650.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-1-e1552040155650-250x119.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-1-e1552040155650-300x142.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-1-e1552040155650-768x364.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-progressive-application-Shopify-1-1-e1552040155650-1200x569.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Enter FROM and TO date, Title, Description, Push Notification icon and click on \u2018add notification\u2019.<\/p>\n\n\n\n<p>When you click on the \u2018edit\u2019 menu in the \u2018more actions\u2019 option, a similar pop up will appear, make the desired changes and click on \u2018add notification\u2019 to save the changes made.<\/p>\n\n\n\n<p>This is all about \u2018Push Notification\u2019. Let\u2019s move on to the last section \u2018Configure Frontend\u2019.<\/p>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">CONFIGURE FRONTEND<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>This page will be displayed when you go to the \u2018Configure Frontend\u2019:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1286\" height=\"640\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/11133243\/AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66.png\" alt=\"AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66\" class=\"wp-image-185922\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/11133243\/AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/11133243\/AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/11133243\/AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/11133243\/AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/11133243\/AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Here you have an option to auto inject the code or you may even copy the code and paste it in your theme.liquid file, manually.<\/p>\n\n\n\n<p>You can find the &#8216;theme.liquid&#8217; file from your store\u2019s backend section. Go to Online Store &gt; themes &gt; Actions &gt; edit code &gt; search for theme.liquid file and paste the provided code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">My Plan<\/h3>\n\n\n\n<p>PWAfy comes with two different plans, i.e., monthly &amp; yearly:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"620\" height=\"412\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify.png\" alt=\"pwa demo shop PWAfy Shopify\" class=\"wp-image-175066\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify.png 620w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-250x166.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-300x199.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>The <strong>My Plan&nbsp;<\/strong>section of the app will display your current plan details.<\/p>\n\n\n\n<p>You can click on the &#8216;View All Plans&#8217; button to change your PWAfy plan.<\/p>\n\n\n\n<p>If you are using the executive plan then you can change your current plan before 7-days of the plan expiry date or in the trial period only.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1286\" height=\"657\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-1.png\" alt=\"pwa demo shop PWAfy Shopify (1)\" class=\"wp-image-175068\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-1.png 1286w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-1-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-1-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-1-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/pwa-demo-shop-PWAfy-Shopify-1-1200x613.png 1200w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" loading=\"lazy\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">FRONTEND DISPLAY<\/h3><\/div><div class=\"margin-bottom-50\">\n<h2 class=\"wp-block-heading\"><strong>PWA for Android Devices:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Splash Screen: When your customers will&nbsp;visit your store using your store URL on their Android device, they will get the splash screen.<\/li>\n\n\n\n<li>Users can add the app to your homescreen either clicking on the &#8216;Add PWA to Homescreen&#8217; text at the bottom of the page (refer image 1) or clicking on the &#8216;Add to homescreen&#8217; header message (refer image 2).<\/li>\n\n\n\n<li>After that, a dialog box will open, click on &#8216;Add&#8217;. Refer to image 3.<\/li>\n\n\n\n<li>The app will be added to the home screen (encircled app icon in image 4).<\/li>\n\n\n\n<li>Once you open the app, you will see this display having the shop logo and tagline (refer to image 5). <\/li>\n\n\n\n<li>The last image (6) shows the push notifications!<\/li>\n<\/ul>\n<\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"370\" height=\"700\" data-id=\"212878\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/1-3.png\" alt=\"1-3\" class=\"wp-image-212878\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/1-3.png 370w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/1-3-159x300.png 159w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/1-3-132x249.png 132w\" sizes=\"(max-width: 370px) 100vw, 370px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"362\" height=\"687\" data-id=\"212891\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/6-1-1.png\" alt=\"6-1-1\" class=\"wp-image-212891\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/6-1-1.png 362w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/6-1-1-158x300.png 158w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/6-1-1-131x249.png 131w\" sizes=\"(max-width: 362px) 100vw, 362px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"370\" height=\"700\" data-id=\"212881\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/2-4.png\" alt=\"2-4\" class=\"wp-image-212881\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/2-4.png 370w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/2-4-159x300.png 159w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/2-4-132x249.png 132w\" sizes=\"(max-width: 370px) 100vw, 370px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"370\" height=\"700\" data-id=\"212885\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/3-6.png\" alt=\"3-6\" class=\"wp-image-212885\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/3-6.png 370w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/3-6-159x300.png 159w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/3-6-132x249.png 132w\" sizes=\"(max-width: 370px) 100vw, 370px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"370\" height=\"700\" data-id=\"212883\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/4-1.png\" alt=\"4-1\" class=\"wp-image-212883\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/4-1.png 370w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/4-1-159x300.png 159w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/4-1-132x249.png 132w\" sizes=\"(max-width: 370px) 100vw, 370px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"363\" height=\"691\" data-id=\"212886\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/5-1.png\" alt=\"5-1\" class=\"wp-image-212886\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/5-1.png 363w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/5-1-158x300.png 158w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/5-1-131x249.png 131w\" sizes=\"(max-width: 363px) 100vw, 363px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>PWA for iOS Devices:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When your customers will&nbsp;visit your store using your store URL on their iOS device, they will get the splash screen (refer to image 1).<\/li>\n\n\n\n<li>After clicking on the button shown in image 1, they need to click on the <strong>Add to Home Screen <\/strong>button as shown in image 2.<\/li>\n\n\n\n<li>Click on the <strong>Add <\/strong>button (shown in image 3) to add the app on the home screen (refer image 4 of the app added to homescreen).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-4 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"337\" height=\"609\" data-id=\"212833\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage.png\" alt=\"collage\" class=\"wp-image-212833\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage.png 337w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage-166x300.png 166w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage-138x249.png 138w\" sizes=\"(max-width: 337px) 100vw, 337px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"332\" height=\"610\" data-id=\"212840\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage2.png\" alt=\"collage2\" class=\"wp-image-212840\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage2.png 332w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage2-163x300.png 163w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage2-136x249.png 136w\" sizes=\"(max-width: 332px) 100vw, 332px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"324\" height=\"610\" data-id=\"212843\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage3.png\" alt=\"collage3\" class=\"wp-image-212843\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage3.png 324w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage3-159x300.png 159w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage3-132x249.png 132w\" sizes=\"(max-width: 324px) 100vw, 324px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"327\" height=\"610\" data-id=\"212846\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage4.png\" alt=\"collage4\" class=\"wp-image-212846\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage4.png 327w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage4-161x300.png 161w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/collage4-133x249.png 133w\" sizes=\"(max-width: 327px) 100vw, 327px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Progressive Application for Shopify<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p><strong>Note:<\/strong> PWAfy doesn&#8217;t support push notifications on iOS for now.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWA DEMO<\/h2>\n\n\n\n<p>Frontend Demo Link:<a href=\"https:\/\/pwa-demo-shop.myshopify.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"> https:\/\/pwa-demo-shop.myshopify.com\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need help with the PWA?<\/h2>\n\n\n\n<p>Furthermore, if you need any kind of support\/consultancy then please raise a ticket at&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/webkul.uvdesk.com\/\" target=\"_blank\">https:\/\/webkul.uvdesk.com\/<\/a>&nbsp;or drop an email at <strong>support@webkul.com<\/strong>.<\/p>\n\n\n\n<p>Thank you for reading this blog!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: PWAfy is not available for new users. Once you double click on the app&#8217;s name you will be introduced with the &#8216;Home Page&#8217;. Under this, we have four sections: Home (the one we are currently at), Configuration, Push Notification, and Configure Frontend. Below that we have some of the PWA features displayed. On the <a href=\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":241,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[841],"tags":[8091,8092,8093,8650,8649,7299,8648,2722,4371,837],"class_list":["post-160078","post","type-post","status-publish","format-standard","hentry","category-shopify","tag-light-weight-apps","tag-lighting-fast-websites","tag-no-installation","tag-progressive-application-for-shopify","tag-progressive-apps-builder","tag-progressive-web-application","tag-progressive-web-apps","tag-push-notification","tag-pwa","tag-shopify"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>PWA - Progressive Applications - Lighting fast websites<\/title>\n<meta name=\"description\" content=\"Convert your store into a PWA today, making it lighting fast which works well on flaky networks\/offline mode with no installation hassel and push notification feature.\" \/>\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\/progressive-web-application-for-shopify\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PWA - Progressive Applications - Lighting fast websites\" \/>\n<meta property=\"og:description\" content=\"Convert your store into a PWA today, making it lighting fast which works well on flaky networks\/offline mode with no installation hassel and push notification feature.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-29T06:02:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-02T07:37:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png\" \/>\n<meta name=\"author\" content=\"Mansi Rana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mansi Rana\" \/>\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\/progressive-web-application-for-shopify\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\"},\"author\":{\"name\":\"Mansi Rana\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/579102321abcaed83b1e60f0af3c0b9d\"},\"headline\":\"Progressive Application for Shopify\",\"datePublished\":\"2019-01-29T06:02:25+00:00\",\"dateModified\":\"2023-02-02T07:37:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\"},\"wordCount\":1723,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png\",\"keywords\":[\"light weight apps\",\"Lighting fast websites\",\"no installation\",\"progressive application for shopify\",\"progressive apps builder\",\"Progressive Web Application\",\"progressive web apps\",\"push notification\",\"PWA\",\"shopify\"],\"articleSection\":[\"Shopify\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\",\"url\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\",\"name\":\"PWA - Progressive Applications - Lighting fast websites\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png\",\"datePublished\":\"2019-01-29T06:02:25+00:00\",\"dateModified\":\"2023-02-02T07:37:55+00:00\",\"description\":\"Convert your store into a PWA today, making it lighting fast which works well on flaky networks\/offline mode with no installation hassel and push notification feature.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png\",\"width\":1286,\"height\":657,\"caption\":\"page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Progressive Application for Shopify\"}]},{\"@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\/579102321abcaed83b1e60f0af3c0b9d\",\"name\":\"Mansi Rana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/81e851f84dacc9f7d76f77082f49d76fbb83788fea5123c43a4fbd3b6497f766?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/81e851f84dacc9f7d76f77082f49d76fbb83788fea5123c43a4fbd3b6497f766?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Mansi Rana\"},\"description\":\"Quora\",\"url\":\"https:\/\/webkul.com\/blog\/author\/mansi-rana628\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PWA - Progressive Applications - Lighting fast websites","description":"Convert your store into a PWA today, making it lighting fast which works well on flaky networks\/offline mode with no installation hassel and push notification feature.","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\/progressive-web-application-for-shopify\/","og_locale":"en_US","og_type":"article","og_title":"PWA - Progressive Applications - Lighting fast websites","og_description":"Convert your store into a PWA today, making it lighting fast which works well on flaky networks\/offline mode with no installation hassel and push notification feature.","og_url":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-01-29T06:02:25+00:00","article_modified_time":"2023-02-02T07:37:55+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png","type":"","width":"","height":""}],"author":"Mansi Rana","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Mansi Rana","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/"},"author":{"name":"Mansi Rana","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/579102321abcaed83b1e60f0af3c0b9d"},"headline":"Progressive Application for Shopify","datePublished":"2019-01-29T06:02:25+00:00","dateModified":"2023-02-02T07:37:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/"},"wordCount":1723,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png","keywords":["light weight apps","Lighting fast websites","no installation","progressive application for shopify","progressive apps builder","Progressive Web Application","progressive web apps","push notification","PWA","shopify"],"articleSection":["Shopify"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/","url":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/","name":"PWA - Progressive Applications - Lighting fast websites","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png","datePublished":"2019-01-29T06:02:25+00:00","dateModified":"2023-02-02T07:37:55+00:00","description":"Convert your store into a PWA today, making it lighting fast which works well on flaky networks\/offline mode with no installation hassel and push notification feature.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/PWA-by-Webkul.png","width":1286,"height":657,"caption":"page"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-for-shopify\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Progressive Application for Shopify"}]},{"@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\/579102321abcaed83b1e60f0af3c0b9d","name":"Mansi Rana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/81e851f84dacc9f7d76f77082f49d76fbb83788fea5123c43a4fbd3b6497f766?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/81e851f84dacc9f7d76f77082f49d76fbb83788fea5123c43a4fbd3b6497f766?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Mansi Rana"},"description":"Quora","url":"https:\/\/webkul.com\/blog\/author\/mansi-rana628\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/160078","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\/241"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=160078"}],"version-history":[{"count":72,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/160078\/revisions"}],"predecessor-version":[{"id":367160,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/160078\/revisions\/367160"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=160078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=160078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=160078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}