{"id":119486,"date":"2018-04-10T06:54:28","date_gmt":"2018-04-10T06:54:28","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=119486"},"modified":"2026-01-22T07:30:12","modified_gmt":"2026-01-22T07:30:12","slug":"cs-cart-progressive-web-application-pwa","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/","title":{"rendered":"CS-Cart Progressive Web Application (PWA)"},"content":{"rendered":"<p><a href=\"https:\/\/store.webkul.com\/CS-Cart-Progressive-Web-Application-PWA.html\" target=\"_blank\" rel=\"noopener\">Progressive Web Application<\/a> (PWA) are the next big innovation and one of the most discussed advancements in modern web development.<\/p>\n<p data-start=\"278\" data-end=\"428\">A PWA delivers a mobile-app-like experience directly through the browser, without requiring users to download an app from the App Store or Play Store.<\/p>\n<p data-start=\"430\" data-end=\"601\">Since a large share of online shopping traffic comes from mobile devices, PWAs offer an ideal solution for retailers looking to increase user engagement and boost revenue.<\/p>\n<p data-start=\"603\" data-end=\"673\">To meet this demand, we have launched a PWA add-on for CS-Cart stores.<\/p>\n<p data-start=\"675\" data-end=\"774\">This add-on allows users to add your website to their mobile home screen directly from the browser.<\/p>\n<p data-start=\"776\" data-end=\"847\">Once added, the store works and feels like a native mobile application.<\/p>\n<p data-start=\"849\" data-end=\"998\">With simple installation and configuration, the store admin can launch a fully functional Progressive Web Application with push notification support.<\/p>\n<p>Check a brief overview of the mobile end workflow of the PWA &#8211;\u00a0<\/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=\"uvTI7qWPFiU\">\n<div class=\"components-placeholder__instructions\">uvTI7qWPFiU<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Check a brief overview of the backend configuration &#8211;\u00a0<\/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=\"2RBNtXQaHos\">\n<div class=\"components-placeholder__instructions\">2RBNtXQaHos<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3>Importance of Progressive Web Application:<\/h3>\n<p>Responsive Web and Native Apps Aren\u2019t Enough. It is a myth that the users will happily download the app for every website they visit frequently.<\/p>\n<p>Many retailers assume that responsive web design is the best way to optimize their website for mobile.<\/p>\n<p>But in reality, using responsive on its own simply reflows content from one device to another.<\/p>\n<p>It ignores the expectations of today\u2019s mobile customer for fast speeds, app-like experiences, and the latest features available on their device.<\/p>\n<p>When responsive doesn\u2019t produce the desired conversion rates, retailers often turn to native apps. While the app experience usually drives higher conversions,<\/p>\n<p>native apps are very expensive to build and maintain, and only reach a small audience.\u00a0<\/p>\n<p>\u00a0It does not mean that a native application is bad but there are few merits of the progressive web application in comparison to native applications.<\/p>\n<p>If you are running a business then you should reach all type of users.<\/p>\n<p data-start=\"263\" data-end=\"391\">A well-designed native app like <a href=\"https:\/\/store.webkul.com\/CS-Cart\/Mobile.html\" target=\"_blank\" rel=\"noopener\">Mobikul<\/a> gives high performance and uses less data.<\/p>\n<p data-start=\"393\" data-end=\"496\">However, to reach every type of customer, you should also choose a Progressive Web Application (PWA).<\/p>\n<p>In a nutshell, we can brief the benefits of PWA as mentioned below-<\/p>\n<ul>\n<li>The website becomes lightning fast.<\/li>\n<li>A user-friendly app experience.<\/li>\n<li>In addition it supports push notification.<\/li>\n<li>No need to download\/install.<\/li>\n<li>Moreover works fast even on a slow connection.<\/li>\n<li>Increases User engagement.<\/li>\n<li>Also Increase conversion rate.<\/li>\n<\/ul>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Features Of CS-Cart PWA<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<ul>\n<li>Well integrated with CS-Cart &amp; Multi-Vendor.<\/li>\n<li>Functionality to set the application name at admin end.<\/li>\n<li>Admin can upload and change the application icon.<\/li>\n<li>Functionality to set the splash background color of the Progressive Web Application.<\/li>\n<li>Option to set the theme color of the Progressive Web Application.<\/li>\n<li>Increases user engagement on the store by using push notification.<\/li>\n<li>Supports push notifications on Mozilla Firefox and Chrome browsers.<\/li>\n<li>Admin can upload the desired Push Notification Icon.<\/li>\n<li>Functionality to create and manage Push Notifications.<\/li>\n<li>Admin can Edit\/Delete\/Send\u00a0Push Notifications.<\/li>\n<li>Also admin can attach a Target URL for push notifications.<\/li>\n<li>Option to attach a separate Notification banner image for each Push Notification.<\/li>\n<li>Functionality to view and manage the push notifications subscribers.<\/li>\n<li>The user can be prompted to Add to Home Screen.<\/li>\n<li>More user-friendly than a web application.<\/li>\n<li>Works lightning fast if compared to the website.<\/li>\n<li>Supports push notification (With payload for PHP-7.0+).<\/li>\n<li>Launches with the low-quality Internet.<\/li>\n<li>Looks and feels like a native application.<\/li>\n<li>Also, users do not need to update progressive web applications.<\/li>\n<li>No app store is required for managing the application.\u00a0<\/li>\n<\/ul>\n<p><strong>Note:<\/strong> The GMP extension should be installed on your server to work the addon properly.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">How To Upload And Install The Add-on<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<ul>\n<li>After downloading the <strong style=\"color: initial;\">CS-Cart Progressive Web Application<\/strong><span style=\"color: initial;\"> add-on, you\u2019ll get the zip file, one install.txt file, and a relevant User Guide manual doc. <\/span><\/li>\n<li><span style=\"color: initial;\">Read it carefully for proper configuration. <\/span>Go to Manage Add-ons, click on \u201c+\u201d as shown below in the snapshot.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521009\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp\" alt=\"CS-Cart manual installation\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/>Click on <strong>\u201cLocal\u201d<\/strong> to browse the zip file and then click on <strong>\u201cUpload &amp; Install\u201d<\/strong> as shown below in the snapshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521012\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-installation.webp\" alt=\"CS-Cart pwa addon installation\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-installation.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-installation-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-installation-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-installation-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<h3 class=\"wp-block-heading\">Library installation<\/h3>\n<p>You can also download the library manually if needed.<\/p>\n<p>Navigate to the following location using the terminal:<\/p>\n<p><strong>app\/addons\/wk_pwa\/lib\/googleOauth<\/strong><\/p>\n<p>Run the command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">composer update<\/pre>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">PWA Configuration<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>After the add-on installation, click on <strong>Settings<\/strong> to configure the add-on.<a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/9.png\"><br \/><\/a><\/p>\n<p>In the add-on settings, there are 2 sections for PWA configuration and Push Notification Configuration.<\/p>\n<p><strong>PWA Configurations<\/strong> fields provide options to set:<\/p>\n<ol>\n<li>The Application Name<\/li>\n<li>The Application Short Name<\/li>\n<li>The theme color of the App<\/li>\n<li>Splash Background Color for the App<\/li>\n<li>Application Icon (<strong><em>Please note that<\/em>\u00a0<i>the app icon must be in .png format<\/i><\/strong>)<\/li>\n<\/ol>\n<p>The progressive web app will be installed in the device according to the parameters set here.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521017\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-configuration.webp\" alt=\"CS-Cart pwa addon configuration\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-configuration.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-configuration-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-configuration-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-addon-configuration-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>Push Notification Configuration fields include<\/strong><\/p>\n<ul>\n<li>Google FCM Project ID<\/li>\n<li>Google FCM Private key file<\/li>\n<li>Google FCM\u00a0 API Key<\/li>\n<li>\u00a0Google FCM Sender ID<\/li>\n<li>Google FCM App ID<\/li>\n<li>Google FCM Auth Domain<\/li>\n<li>Google FCM Storage Bucket<\/li>\n<li>Google FCM Measurement ID<\/li>\n<li>Google FCM Vapid key<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521019\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-notification-configuration.webp\" alt=\"CS-Cart pwa notification configuration\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-notification-configuration.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-notification-configuration-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-notification-configuration-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-pwa-notification-configuration-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>So, just set the parameters and <strong>save.<\/strong><\/p>\n<p>To know how to get these credentials, please <strong><a href=\"https:\/\/console.firebase.google.com\/?pli=1\" target=\"_blank\" rel=\"noopener\">click here.<\/a><\/strong><\/p>\n<p>click the link provided above and click on creating a firebase project as shown below in image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491228\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console.webp\" alt=\"console\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Now, create a project and enter a project name<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491229\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-1.webp\" alt=\"console\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>After you have successfully login, you have been landed to the dashboard page of firebase.<\/p>\n<p>Now, click on the project overview tab in top left corner.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491231\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-2.webp\" alt=\"console\n\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/console-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>We need to create app as shown in the snapshot below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491685\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/app.webp\" alt=\"app\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/app.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/app-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/app-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/app-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>The user needs to register as illustrated snapshot below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491689\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/register.webp\" alt=\"image\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/register.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/register-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/register-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/register-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>To add the Firebase SDK, one must select the <strong>script<\/strong> as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491690\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/script.webp\" alt=\"SCRIPT\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/script.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/script-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/script-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/script-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Then, select <strong>continue to console, <\/strong>as shown in the snapshot below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491691\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/continue-to-console.webp\" alt=\"console\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/continue-to-console.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/continue-to-console-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/continue-to-console-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/continue-to-console-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Now, we can see the interface as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491693\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/import.webp\" alt=\"import\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/import.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/import-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/import-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/import-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>In the project settings,click on general and as you can see the project details.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491233\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebas.webp\" alt=\"firebase\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebas.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebas-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebas-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebas-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Now for generating key pair navigate through cloud messaging and in the bottom you can click on generate key and then key will be generated.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/push-notifications-settings.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-491234\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase.webp\" alt=\"firebase\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Now, navigate through service accounts and below, click on generate new private key<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491235\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-1.webp\" alt=\"firebaae\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/firebase-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-success\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">How To Manage Push Notifications At Admin End<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<div class=\"text-block-right\">\n<p data-start=\"87\" data-end=\"226\">Navigate to <strong data-start=\"99\" data-end=\"160\">Website &gt;&gt; Progressive Web App &gt;&gt; Manage Push Notifications<\/strong> to manage notification templates and subscribers, as shown below.<\/p>\n<p data-start=\"228\" data-end=\"304\">Click the <strong data-start=\"238\" data-end=\"245\">\u201c+\u201d<\/strong> button to add a new notification template, as shown below.<\/p>\n<p data-start=\"228\" data-end=\"304\"><img decoding=\"async\" class=\"alignnone size-full wp-image-521038\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification.webp\" alt=\"CS-Cart manage notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p data-start=\"228\" data-end=\"304\">\u00a0<\/p>\n<p>Enter the details mentioned below for notifications and click on the <strong>Create Notification<\/strong> button to add the template.<\/p>\n<ol>\n<li>Title<\/li>\n<li>Message<\/li>\n<li>Banner Image if any<\/li>\n<li>Target URL for the notification<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521039\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-new-notification.webp\" alt=\"CS-Cart new notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-new-notification.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-new-notification-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-new-notification-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-new-notification-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>You can add as many template of the notifications as required. The added template can be edited and deleted at any time.<\/p>\n<p>To send an instant notification to all the subscribers, just click on the <strong>Notify<\/strong> or <strong>Resend<\/strong>\u00a0button as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521042\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-2.webp\" alt=\"CS-Cart manage notifications\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-notification-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>To view &amp; manage Subscribers, go to <strong>Manage Push Subscribers<\/strong> under the\u00a0<strong>Website &gt;&gt; Progressive Web App &gt;&gt; Manage Push Subscribers <\/strong>tab.<\/p>\n<p>Here you can view all the subscribed users who have allowed the push notifications &amp; will be notified whenever the notify button is pressed.<\/p>\n<p>There is also an option to delete multiple subscribers.<\/p>\n<p>Just mark the subscribers and delete selected ones as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-521043\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-subscribers.webp\" alt=\"CS-Cart manage subscribers\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-subscribers.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-subscribers-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-subscribers-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cs-cart-manage-subscribers-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\"><i class=\"fa fa-desktop\"><\/i>How A Customer Can Install Progressive Web App<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>A customer can open the website in a browser of the mobile device. On opening the site, he\/she will be asked to allow\/block Push Notifications as shown below.<\/p>\n<p>Please note that the screenshots here belong to the chrome browser.<\/p>\n<p>On allowing, the user will be notified and from here customer can click on menu icon of the browser to add the application on the home screen as shown below.<\/p>\n<div class=\"wk-two-columns wk-bg-radial-gradient\">\n<div class=\"wk-columns --left\"><img decoding=\"async\" class=\"alignnone size-full wp-image-491268\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification.webp\" alt=\"mobile\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/allownotification-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491269\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage.webp\" alt=\"homepage\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/cscarthomepage-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>From the browser menu, a user can select the <strong>Add to home screen<\/strong>\u00a0option to add the progressive web application to the home screen.<\/p>\n<p>Now a pop-up window will appear to add the progressive web application like this.<\/p>\n<div class=\"wk-two-columns wk-bg-radial-gradient\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491270\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen.webp\" alt=\"homescreen\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addtohomescreen-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491271\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install.webp\" alt=\"install\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/install-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>The app will seem to be getting installed like all other apps in the notification bar of your mobile device, as shown.<\/p>\n<div class=\"wk-two-columns wk-bg-radial-gradient\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491272\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled.webp\" alt=\"app installed\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/appinstalled-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491273\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage.webp\" alt=\"added to homepage\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>After installation, the user can see the application icon on the home screen of the mobile like this. A user can click on the application to launch it.<\/p>\n<p>After clicking on the application, the application launches with a splash screen. The splash screen shows the application to open with Chrome.<\/p>\n<div class=\"wk-two-columns wk-bg-radial-gradient\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491285\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1.webp\" alt=\"homepage\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/addedtohomepage-1-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491293\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1.webp\" alt=\"chrome\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/chrome-1-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p><strong>Push Notification View on Mobile:<\/strong><\/p>\n<div class=\"wk-two-columns wk-bg-radial-gradient\">\n<div class=\"wk-columns --left\">\u00a0<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-491292\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification.webp\" alt=\"push notification\" width=\"1080\" height=\"2408\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification.webp 1080w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification-135x300.webp 135w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification-459x1024.webp 459w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification-112x249.webp 112w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification-768x1712.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification-689x1536.webp 689w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/pushnotification-919x2048.webp 919w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>That&#8217;s how you can use the CS-Cart progressive Web App add-on to provide an app-like experience to your customers.<\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\"><i class=\"fa fa-desktop\"><\/i>Support<\/h3>\n<\/div>\n<\/div>\n\n\n<p>If you have any questions, suggestions, or customization requests, feel free to contact us at&nbsp;<a href=\"mailto:support@webkul.com\" target=\"_blank\" rel=\"noreferrer noopener\">support@webkul.com<\/a>&nbsp;or submit a ticket at&nbsp;<a href=\"http:\/\/webkul.uvdesk.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">webkul.uvdesk.com.<\/a><\/p>\n\n\n\n<p>Explore our premium-quality&nbsp;<a href=\"https:\/\/store.webkul.com\/CS-Cart.html\" target=\"_blank\" rel=\"noreferrer noopener\">CS Cart Extensions<\/a>&nbsp;to enhance your store functionality.<\/p>\n\n\n\n<p>You can also explore our&nbsp;<a href=\"https:\/\/webkul.com\/cs-cart-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">CS-Cart Development Services<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/marketplace.cs-cart.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Quality&nbsp;CS-Cart add-ons<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Progressive Web Application (PWA) are the next big innovation and one of the most discussed advancements in modern web development. A PWA delivers a mobile-app-like experience directly through the browser, without requiring users to download an app from the App Store or Play Store. Since a large share of online shopping traffic comes from mobile <a href=\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":108,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1496],"tags":[6500,5249,4371],"class_list":["post-119486","post","type-post","status-publish","format-standard","hentry","category-cs-cart","tag-cs-cart-pwa","tag-progressive-web-app","tag-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Progressive Web Application | CS-Cart PWA<\/title>\n<meta name=\"description\" content=\"Progressive Web Application (PWA) brings mobile-app-like experiences to users without requiring them to install an app from the play store.\" \/>\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\/cs-cart-progressive-web-application-pwa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progressive Web Application | CS-Cart PWA\" \/>\n<meta property=\"og:description\" content=\"Progressive Web Application (PWA) brings mobile-app-like experiences to users without requiring them to install an app from the play store.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\" \/>\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=\"2018-04-10T06:54:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-22T07:30:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp\" \/>\n<meta name=\"author\" content=\"Ranjana\" \/>\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=\"Ranjana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\"},\"author\":{\"name\":\"Ranjana\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d8695048868bbffb345306d7a8830687\"},\"headline\":\"CS-Cart Progressive Web Application (PWA)\",\"datePublished\":\"2018-04-10T06:54:28+00:00\",\"dateModified\":\"2026-01-22T07:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\"},\"wordCount\":1453,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp\",\"keywords\":[\"CS-Cart PWA\",\"progressive web app\",\"PWA\"],\"articleSection\":[\"Cs Cart\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\",\"url\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\",\"name\":\"Progressive Web Application | CS-Cart PWA\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp\",\"datePublished\":\"2018-04-10T06:54:28+00:00\",\"dateModified\":\"2026-01-22T07:30:12+00:00\",\"description\":\"Progressive Web Application (PWA) brings mobile-app-like experiences to users without requiring them to install an app from the play store.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp\",\"width\":1120,\"height\":880,\"caption\":\"CS-Cart manual installation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CS-Cart Progressive Web Application (PWA)\"}]},{\"@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\/d8695048868bbffb345306d7a8830687\",\"name\":\"Ranjana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a5d6243350656e4ff7e55a006cfea309695a8c16d21a9a74ccfe415191bc4f8?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\/2a5d6243350656e4ff7e55a006cfea309695a8c16d21a9a74ccfe415191bc4f8?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Ranjana\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/ranjana-rani726\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progressive Web Application | CS-Cart PWA","description":"Progressive Web Application (PWA) brings mobile-app-like experiences to users without requiring them to install an app from the play store.","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\/cs-cart-progressive-web-application-pwa\/","og_locale":"en_US","og_type":"article","og_title":"Progressive Web Application | CS-Cart PWA","og_description":"Progressive Web Application (PWA) brings mobile-app-like experiences to users without requiring them to install an app from the play store.","og_url":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-04-10T06:54:28+00:00","article_modified_time":"2026-01-22T07:30:12+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp","type":"","width":"","height":""}],"author":"Ranjana","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ranjana","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/"},"author":{"name":"Ranjana","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d8695048868bbffb345306d7a8830687"},"headline":"CS-Cart Progressive Web Application (PWA)","datePublished":"2018-04-10T06:54:28+00:00","dateModified":"2026-01-22T07:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/"},"wordCount":1453,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp","keywords":["CS-Cart PWA","progressive web app","PWA"],"articleSection":["Cs Cart"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/","url":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/","name":"Progressive Web Application | CS-Cart PWA","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp","datePublished":"2018-04-10T06:54:28+00:00","dateModified":"2026-01-22T07:30:12+00:00","description":"Progressive Web Application (PWA) brings mobile-app-like experiences to users without requiring them to install an app from the play store.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/04\/01-manual-installation-2.webp","width":1120,"height":880,"caption":"CS-Cart manual installation"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/cs-cart-progressive-web-application-pwa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CS-Cart Progressive Web Application (PWA)"}]},{"@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\/d8695048868bbffb345306d7a8830687","name":"Ranjana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a5d6243350656e4ff7e55a006cfea309695a8c16d21a9a74ccfe415191bc4f8?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\/2a5d6243350656e4ff7e55a006cfea309695a8c16d21a9a74ccfe415191bc4f8?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Ranjana"},"url":"https:\/\/webkul.com\/blog\/author\/ranjana-rani726\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/119486","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\/108"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=119486"}],"version-history":[{"count":44,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/119486\/revisions"}],"predecessor-version":[{"id":521045,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/119486\/revisions\/521045"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=119486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=119486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=119486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}