{"id":63967,"date":"2016-11-09T17:53:21","date_gmt":"2016-11-09T17:53:21","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=63967"},"modified":"2026-04-29T11:45:43","modified_gmt":"2026-04-29T11:45:43","slug":"opencart-progressive-web-application","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/","title":{"rendered":"User Guide For Opencart Progressive Web Application"},"content":{"rendered":"<div class=\"alert alert-success\">\n<p><a href=\"https:\/\/store.webkul.com\/Opencart-Progressive-Web-Application.html\" target=\"_blank\" rel=\"noopener\"><strong data-start=\"115\" data-end=\"142\">Opencart PWA Mobile App<\/strong><\/a> provides customers with a fast and engaging app-like shopping experience directly from the browser.<\/p>\n<\/div>\n<p>With the help of Progressive Web App technology, the store can be accessed from the mobile home screen and works smoothly even on slow internet connections.<\/p>\n<p>Customers can browse products, receive push notifications, and interact with the store seamlessly without requiring any app store installation.<\/p>\n<p>With the use of this feature, the website works faster on a slower internet connection. Due to the faster performance, user engagement increases on the website and results in a very high conversion rate.<\/p>\n<p><strong>Note: <\/strong>Your store must be served over a secure server (HTTPS) to enable and use the PWA Mobile App features properly.<\/p>\n<div class=\"alert alert-success\">\n<h6>What is the need for a Progressive Web Application?<\/h6>\n<\/div>\n<p>The Progressive Web Application is recommended because it is more immersive and lightning-fast than a website or native application. Progressive Web Application also user-friendly if compared to the website and supports the push notification.<\/p>\n<p>The best part of\u00a0Progressive Web Application is that a user can use many of the features without an\u00a0internet connection and once the mobile is connected to the\u00a0internet the data gets synced.<\/p>\n<p>In short, you can say that if you are providing a platform to your user which is userfriendly and faster then it will definitely increase the engagement of the users and increase in sale.<\/p>\n<ul>\n<li>The website becomes lightning fast.<\/li>\n<li>More user-friendly.<\/li>\n<li>Supports push notification.<\/li>\n<li>No need to download\/install.<\/li>\n<li>Works fast even on a slow connection.<\/li>\n<li>Increases User engagement.<\/li>\n<li>Increase conversion rate.<\/li>\n<\/ul>\n<h6><strong>I have developed a native application for my store, do I still need the Progressive Web Application?\u00a0<\/strong><\/h6>\n<p>For a native application, users first need to search the application in the relative store, download and install it, and then they can open and use the application.<\/p>\n<p>According to a study, an application loses 20% of its users on every step, from search to start using the app feature. However, a user can start using a progressive web application as soon as they find the application.<\/p>\n<p>There, is no need to search, download, and install the application. Also, you need to upgrade the native application with every version of Android or iOS.<\/p>\n<p>You can check that many of the applications are not available for the most recent or past very old version of Android. However, the Progressive Web Application works with the browser and designed to enhance browser compatibility.<\/p>\n<p>We are not at all saying that a native application is bad but these are few merits of the progressive web application in comparison to native applications. If you are running a business then you should reach to all type of users.<\/p>\n<p>If you are using a well-designed native application like Mobikul then it will surely give you high performance and consume low data but if you want to reach all types of customers then you should definitely go for Progressive Web Application.<\/p>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Features Of Opencart Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<ul>\n<li>More user-friendly compared to traditional web applications<\/li>\n<li>Delivers faster performance than standard websites<\/li>\n<li>Supports real-time push notifications<\/li>\n<li>Fully responsive across all devices and platforms<\/li>\n<li>Works smoothly even on low or slow internet connections<\/li>\n<li>Provides a native app-like look and feel<\/li>\n<li>Allows users to add the store to the home screen<\/li>\n<li>No need for users to manually update the application<\/li>\n<li>Does not require app store installation or management<\/li>\n<li>Enhances user engagement on the store<\/li>\n<li>Helps improve store conversions through better engagement<\/li>\n<li>Admin can set the application name<\/li>\n<li>Admin can upload and update the application icon<\/li>\n<li>Admin can configure splash screen background color<\/li>\n<li>Admin can set page background color<\/li>\n<li>Admin can customize header and font colors<\/li>\n<li>Supports Firebase configuration for push notifications<\/li>\n<li>Provides easy PWA setup and configuration from the admin panel<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Installation Of Opencart Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>Installation of\u00a0Opencart Progressive Web Application module is easy. In the zip file of the module, you will find 4 folders, namely\u00a0<strong>admin, catalog, image<\/strong>, and\u00a0<strong>ocmod <\/strong>with <strong>sw.js, firebase-messaging-sw.js<\/strong> files.<\/p>\n<p>You just need to upload the admin, catalog and image folders with the sw.js, firebase-messaging-sw.js files to the root directory of your website.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536748\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/01-upload-module.webp\" alt=\"upload module\" width=\"1329\" height=\"479\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/01-upload-module.webp 1329w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/01-upload-module-300x108.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/01-upload-module-1200x433.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/01-upload-module-250x90.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/01-upload-module-768x277.webp 768w\" sizes=\"(max-width: 1329px) 100vw, 1329px\" loading=\"lazy\" \/><\/p>\n<p>Once you have uploaded the file then login to admin and go to <strong>&#8220;Extensions &gt; Extension Installer&#8221;<\/strong> and upload the ZIP file. The ZIP file can be found in the <strong>&#8216;<\/strong><strong>ocmod&#8217;\u00a0<\/strong>folder.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536749\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/02-upload-ocmod.webp\" alt=\"upload ocmod file\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/02-upload-ocmod.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/02-upload-ocmod-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/02-upload-ocmod-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/02-upload-ocmod-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>On uploading the ZIP file go to the <strong>&#8220;Extensions &gt; Modifications&#8221;<\/strong> and click on the refresh button to rebuild the modification cache.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536750\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/03-modification.webp\" alt=\"modification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/03-modification.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/03-modification-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/03-modification-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/03-modification-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>After that in the admin panel go to <strong>&#8220;System &gt; Users &gt; User Groups&#8221;<\/strong> and edit <strong>&#8220;Administrator&#8221;<\/strong> and\u00a0select all for both <strong>&#8216;Access Permission&#8217;<\/strong> and <strong>&#8216;Modify Permission&#8217;<\/strong> then save it.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536752\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/04-user-group-permission.webp\" alt=\"user group permission\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/04-user-group-permission.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/04-user-group-permission-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/04-user-group-permission-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/04-user-group-permission-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>After that under <strong>&#8220;Extension &gt; Extensions&#8221;<\/strong>\u00a0select <strong>&#8216;Modules&#8217;<\/strong> from the dropdown and install the <strong>&#8216;Opencart Progressive Web Application&#8217;<\/strong> by clicking the install button.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536753\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list.webp\" alt=\"extension list\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Module Translation<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>As this Opencart Progressive Web Application module supports multiple languages so this section will describe how to make the module work in different languages.<\/p>\n<p>Please check this link for\u00a0<a href=\"http:\/\/webkul.com\/blog\/opencart-language-installation-and-translation\/\" target=\"_blank\" rel=\"noopener noreferrer\">language translation<\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">How to create Firebase Project Credentials<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>To configure the Opencart PWA Mobile App, you need to generate Firebase project credentials. Follow the steps below:<\/p>\n<p>Please visit <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">this<\/a> link and create a new project with your Gmail account.<\/p>\n<h3 data-section-id=\"pds0gt\" data-start=\"349\" data-end=\"390\"><span role=\"text\"><strong data-start=\"353\" data-end=\"390\">Step 1: Login to Firebase Console<\/strong><\/span><\/h3>\n<p data-start=\"392\" data-end=\"560\">First, visit the Firebase Console and log in using your Google account.<br data-start=\"463\" data-end=\"466\" \/>Here, you will see the dashboard with existing projects and an option to create a new project.<\/p>\n<p data-start=\"392\" data-end=\"560\"><img decoding=\"async\" class=\"alignnone size-full wp-image-536823\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/12-firebase-dashboard.webp\" alt=\"firebase dashboard\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/12-firebase-dashboard.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/12-firebase-dashboard-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/12-firebase-dashboard-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/12-firebase-dashboard-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<h3 data-section-id=\"5uwemo\" data-start=\"691\" data-end=\"727\"><span role=\"text\"><strong data-start=\"695\" data-end=\"727\">Step 2: Create a New Project<\/strong><\/span><\/h3>\n<p data-start=\"729\" data-end=\"850\">Click on <strong data-start=\"738\" data-end=\"773\">\u201cCreate a new Firebase project\u201d<\/strong>.<br data-start=\"774\" data-end=\"777\" \/>Enter your project name (e.g., opencart-pwa) and click on <strong data-start=\"837\" data-end=\"849\">Continue<\/strong>.<\/p>\n<p data-start=\"729\" data-end=\"850\"><img decoding=\"async\" class=\"alignnone size-full wp-image-536825\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/13-firebase-project-name.webp\" alt=\"firebase project name\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/13-firebase-project-name.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/13-firebase-project-name-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/13-firebase-project-name-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/13-firebase-project-name-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<h3 data-section-id=\"1vh3j0r\" data-start=\"966\" data-end=\"1006\"><span role=\"text\"><strong data-start=\"970\" data-end=\"1006\">Step 3: Project Setup Completion<\/strong><\/span><\/h3>\n<p data-start=\"1008\" data-end=\"1119\">After entering the details, Firebase will create your project.<br data-start=\"1070\" data-end=\"1073\" \/>Once done, you will see a confirmation screen.<\/p>\n<p data-start=\"1121\" data-end=\"1154\">Click on <strong data-start=\"1130\" data-end=\"1142\">Continue<\/strong> to proceed.<\/p>\n<p data-start=\"1121\" data-end=\"1154\"><img decoding=\"async\" class=\"alignnone size-full wp-image-536826\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/14-firbase-project-ready.webp\" alt=\"firebase project ready\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/14-firbase-project-ready.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/14-firbase-project-ready-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/14-firbase-project-ready-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/14-firbase-project-ready-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<h3 data-section-id=\"1lx294v\" data-start=\"1267\" data-end=\"1305\"><span role=\"text\"><strong data-start=\"1271\" data-end=\"1305\">Step 4: Open Project Dashboard<\/strong><\/span><\/h3>\n<p data-start=\"1307\" data-end=\"1433\">Now, you will be redirected to the Firebase project dashboard.<br data-start=\"1369\" data-end=\"1372\" \/>From here, you can manage all Firebase services and settings.<\/p>\n<p data-start=\"1307\" data-end=\"1433\"><img decoding=\"async\" class=\"alignnone size-full wp-image-536827\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/15-firebase-project-dasboard.webp\" alt=\"firebase project dashboard\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/15-firebase-project-dasboard.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/15-firebase-project-dasboard-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/15-firebase-project-dasboard-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/15-firebase-project-dasboard-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<h3 data-section-id=\"emtxu1\" data-start=\"1553\" data-end=\"1608\"><span role=\"text\"><strong data-start=\"1557\" data-end=\"1608\">Step 5: Add Web App &amp; Get Configuration Details<\/strong><\/span><\/h3>\n<p data-start=\"1610\" data-end=\"1742\">Click on the <strong data-start=\"1623\" data-end=\"1641\">Web (&lt;\/&gt;) icon<\/strong> to add your web app.<br data-start=\"1662\" data-end=\"1665\" \/>After registering the app, Firebase will generate configuration details like:<\/p>\n<ul data-start=\"1744\" data-end=\"1840\">\n<li data-section-id=\"zqcoo7\" data-start=\"1744\" data-end=\"1755\">API Key<\/li>\n<li data-section-id=\"k5l2qo\" data-start=\"1756\" data-end=\"1771\">Auth Domain<\/li>\n<li data-section-id=\"idycs0\" data-start=\"1772\" data-end=\"1786\">Project ID<\/li>\n<li data-section-id=\"eaqipr\" data-start=\"1787\" data-end=\"1805\">Storage Bucket<\/li>\n<li data-section-id=\"1sifin4\" data-start=\"1806\" data-end=\"1829\">Messaging Sender ID<\/li>\n<li data-section-id=\"1ergxfo\" data-start=\"1830\" data-end=\"1840\">App ID<\/li>\n<\/ul>\n<p data-start=\"1842\" data-end=\"1923\">Copy these credentials and paste them into the Opencart PWA module configuration.<\/p>\n<p data-start=\"1842\" data-end=\"1923\"><img decoding=\"async\" class=\"alignnone size-full wp-image-536828\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config.webp\" alt=\"firebase web app configuration\" width=\"2240\" height=\"2166\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config.webp 2240w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config-300x290.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config-1059x1024.webp 1059w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config-250x242.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config-768x743.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config-1536x1485.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/16-firbase-web-app-config-2048x1980.webp 2048w\" sizes=\"(max-width: 2240px) 100vw, 2240px\" loading=\"lazy\" \/><\/p>\n<h3 data-section-id=\"aj9bd0\" data-start=\"2043\" data-end=\"2088\"><span role=\"text\"><strong data-start=\"2047\" data-end=\"2088\">Step 6: Generate Firebase Private Key<\/strong><\/span><\/h3>\n<p data-start=\"2090\" data-end=\"2142\">Go to:<br data-start=\"2096\" data-end=\"2099\" \/><strong data-start=\"2099\" data-end=\"2142\">Project Settings &gt; Service Accounts tab<\/strong><\/p>\n<p data-start=\"2144\" data-end=\"2210\">Click on <strong data-start=\"2153\" data-end=\"2183\">\u201cGenerate new private key\u201d<\/strong> to download the JSON file.<\/p>\n<p data-start=\"2212\" data-end=\"2282\">Upload this file in the <strong data-start=\"2236\" data-end=\"2260\">Firebase Private Key<\/strong> field in your module.<\/p>\n<p data-start=\"2212\" data-end=\"2282\"><img decoding=\"async\" class=\"alignnone size-full wp-image-536830\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/17-firebase-private-key-generation.webp\" alt=\"firebase private key generation\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/17-firebase-private-key-generation.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/17-firebase-private-key-generation-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/17-firebase-private-key-generation-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/17-firebase-private-key-generation-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Configuration of Opencart Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>After successful installation under <strong>&#8220;Extension &gt; Extensions&#8221;<\/strong>\u00a0select <strong>&#8216;Modules&#8217;<\/strong> from the drop-down and click the edit button of <strong>&#8216;Opencart Progressive Web Application&#8217;<\/strong> for configuration.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536753\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list.webp\" alt=\"extension list\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/05-extension-list-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Here the admin can configure all the required fields as below image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536754\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration.webp\" alt=\"module configuration\n\" width=\"1120\" height=\"1709\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration-197x300.webp 197w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration-671x1024.webp 671w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration-163x249.webp 163w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration-768x1172.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/06-module-configuration-1007x1536.webp 1007w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<h3 data-section-id=\"4oc5ub\" data-start=\"177\" data-end=\"207\"><span role=\"text\"><strong data-start=\"181\" data-end=\"207\">Configuration Settings<\/strong><\/span><\/h3>\n<p data-start=\"209\" data-end=\"274\"><strong data-start=\"209\" data-end=\"219\">Status: <\/strong>Enable or disable the PWA module as per requirement.<\/p>\n<h3 data-section-id=\"1wgoomx\" data-start=\"197\" data-end=\"225\"><span role=\"text\"><strong data-start=\"201\" data-end=\"225\">Application Settings<\/strong><\/span><\/h3>\n<p data-start=\"227\" data-end=\"333\"><strong data-start=\"227\" data-end=\"247\">Application Name<\/strong><br data-start=\"247\" data-end=\"250\" \/>Enter the name of the application that will be displayed on the mobile home screen.<\/p>\n<p data-start=\"335\" data-end=\"418\"><strong data-start=\"335\" data-end=\"361\">Application Short Name<\/strong><br data-start=\"361\" data-end=\"364\" \/>Provide a short name for the application icon display.<\/p>\n<p data-start=\"420\" data-end=\"508\"><strong data-start=\"420\" data-end=\"440\">Application Icon<\/strong><br data-start=\"440\" data-end=\"443\" \/>Upload the icon that will represent the app on the user\u2019s device.<\/p>\n<h3 data-section-id=\"hpf0pn\" data-start=\"515\" data-end=\"545\"><span role=\"text\"><strong data-start=\"519\" data-end=\"545\">Firebase Configuration<\/strong><\/span><\/h3>\n<p data-start=\"547\" data-end=\"625\"><strong data-start=\"547\" data-end=\"567\">Firebase API Key<\/strong><br data-start=\"567\" data-end=\"570\" \/>Enter the API key generated from your Firebase project.<\/p>\n<p data-start=\"627\" data-end=\"749\"><strong data-start=\"627\" data-end=\"651\">Firebase Auth Domain<\/strong><br data-start=\"651\" data-end=\"654\" \/>Provide the authentication domain from Firebase, which is required for authentication services.<\/p>\n<p data-start=\"751\" data-end=\"841\"><strong data-start=\"751\" data-end=\"774\">Firebase Project ID<\/strong><br data-start=\"774\" data-end=\"777\" \/>Enter the unique project ID associated with your Firebase setup.<\/p>\n<p data-start=\"843\" data-end=\"939\"><strong data-start=\"843\" data-end=\"870\">Firebase Storage Bucket<\/strong><br data-start=\"870\" data-end=\"873\" \/>Add the storage bucket URL to manage file storage within Firebase.<\/p>\n<p data-start=\"941\" data-end=\"1033\"><strong data-start=\"941\" data-end=\"973\">Firebase Messaging Sender ID<\/strong><br data-start=\"973\" data-end=\"976\" \/>Enter the sender ID used for enabling push notifications.<\/p>\n<p data-start=\"1035\" data-end=\"1127\"><strong data-start=\"1035\" data-end=\"1054\">Firebase App ID<\/strong><br data-start=\"1054\" data-end=\"1057\" \/>Provide the app ID to connect your application with Firebase services.<\/p>\n<p data-start=\"1129\" data-end=\"1232\"><strong data-start=\"1129\" data-end=\"1153\">Firebase Private Key<\/strong><br data-start=\"1153\" data-end=\"1156\" \/>Upload the private key file to establish secure communication with Firebase.<\/p>\n<h3 data-section-id=\"12qcht5\" data-start=\"1138\" data-end=\"1166\"><span role=\"text\"><strong data-start=\"1142\" data-end=\"1166\">Design Customization<\/strong><\/span><\/h3>\n<p data-start=\"1168\" data-end=\"1249\"><strong data-start=\"1168\" data-end=\"1195\">Splash Background Color<\/strong><br data-start=\"1195\" data-end=\"1198\" \/>Set the background color for the app splash screen.<\/p>\n<p data-start=\"1251\" data-end=\"1328\"><strong data-start=\"1251\" data-end=\"1279\">Application Header Color<\/strong><br data-start=\"1279\" data-end=\"1282\" \/>Customize the header color of the application.<\/p>\n<p data-start=\"1330\" data-end=\"1416\"><strong data-start=\"1330\" data-end=\"1367\">Custom Home Page Background Color<\/strong><br data-start=\"1367\" data-end=\"1370\" \/>Define the background color for the home page.<\/p>\n<p data-start=\"1418\" data-end=\"1497\"><strong data-start=\"1418\" data-end=\"1449\">Custom Home Page Font Color<\/strong><br data-start=\"1449\" data-end=\"1452\" \/>Set the font color for the home page content.<\/p>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Push Notification<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>The admin can configure the push notification from the here to share the updates on store. For this the admin needs to click on <strong>push notification icon<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-536755\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/07-push-notification.webp\" alt=\"push notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/07-push-notification.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/07-push-notification-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/07-push-notification-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/07-push-notification-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Here, the admin needs to enter the details that is meant to be shared in the notification.<\/p>\n<ul>\n<li><strong>Previous Message-<\/strong> In case the admin wish to share any message shared earlier.<\/li>\n<li><strong>Title-<\/strong> The intial title of the notification that admin needs to share.<\/li>\n<li><strong>Body-<\/strong> The text of the notification that is to be shared by the admin.<\/li>\n<li><strong>Traget URL-<\/strong> This url is where the customers will be redirected on clicking the Push Notification.<\/li>\n<li><strong>Icon-<\/strong> The repersentative image related to the notification.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">How a Customer can use Opencart Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>A customer can open the website on a browser of the mobile device. Here we have shown the working on chrome. From here customer can click on the menu icon of chrome to add the application to the home screen.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome.png\"><img decoding=\"async\" class=\"alignnone wp-image-155565 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome.png\" alt=\"Chrome browser view\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome.png\">\u00a0<\/a><\/p>\n<p>In the chrome menu, a user can select &#8216;Add to home screen&#8217; option to add the progressive web application to the home screen.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-add-to-home-screen.png\"><img decoding=\"async\" class=\"alignnone wp-image-155564 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-add-to-home-screen.png\" alt=\"Add to home screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-add-to-home-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-add-to-home-screen-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-add-to-home-screen-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-add-to-home-screen-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Now a pop window will appear to add the name of the progressive web application like this.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-enter-name-of-application.png\"><img decoding=\"async\" class=\"alignnone wp-image-155566 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-enter-name-of-application.png\" alt=\"Enter name for home screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-enter-name-of-application.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-enter-name-of-application-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-enter-name-of-application-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-enter-name-of-application-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Now 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><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-application-added-over-home-screen.png\"><img decoding=\"async\" class=\"alignnone wp-image-155567 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-application-added-over-home-screen.png\" alt=\"Launch application\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-application-added-over-home-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-application-added-over-home-screen-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-application-added-over-home-screen-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-application-added-over-home-screen-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<p>After clicking on the application, the application launches with a splash screen. The splash screen shows the application name and icon. The application launches in the same way as the native app.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-splash-screen.png\"><img decoding=\"async\" class=\"alignnone wp-image-155568 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-splash-screen.png\" alt=\"Splash screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-splash-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-splash-screen-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-splash-screen-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-splash-screen-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<p>After the splash screen, a user can see the home screen of the application. From here a user can search product or browse categories.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-home-screen.png\"><img decoding=\"async\" class=\"alignnone wp-image-155569 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-home-screen.png\" alt=\"PWA homepage\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-home-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-home-screen-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-home-screen-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-home-screen-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<p>If a user selects the option to browse categories then the category list will be displayed as below image.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-category-view.png\"><img decoding=\"async\" class=\"alignnone wp-image-155570 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-category-view.png\" alt=\"PWA Category view\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-category-view.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-category-view-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-category-view-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-chrome-category-view-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/a><\/p>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Push Notification<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>The customer in addition can also visualize the notification in the frontend as in the below image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-209571\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-1.png\" alt=\"notification\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-1-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-1-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-1-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Support<\/h3>\n<\/div>\n<p>If you have any questions, suggestions, or customization requests, feel free to contact us at\u00a0<a href=\"mailto:support@webkul.com\" target=\"_blank\" rel=\"noreferrer noopener\">support@webkul.com<\/a>\u00a0or submit a ticket at\u00a0<a href=\"http:\/\/webkul.uvdesk.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">webkul.uvdesk.com.<\/a><\/p>\n<p>Explore our premium-quality <a href=\"https:\/\/store.webkul.com\/OpenCart-Modules.html\" target=\"_blank\" rel=\"noreferrer noopener\">Opencart Extensions <\/a>to enhance your store functionality.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Opencart PWA Mobile App provides customers with a fast and engaging app-like shopping experience directly from the browser. With the help of Progressive Web App technology, the store can be accessed from the mobile home screen and works smoothly even on slow internet connections. Customers can browse products, receive push notifications, and interact with the <a href=\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":127,"featured_media":63968,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[305,1990],"tags":[7945,7944,2071,4371],"class_list":["post-63967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-opencart","category-opencart-marketplace","tag-offline-approach","tag-offline-first","tag-opencart","tag-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>User Guide For Opencart Progressive Web Application Webkul Blog<\/title>\n<meta name=\"description\" content=\"Opencart Progressive Web Applications uses web compatibilities and provides an application experience to the users with a lighting fast speed.\" \/>\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\/opencart-progressive-web-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"User Guide For Opencart Progressive Web Application Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Opencart Progressive Web Applications uses web compatibilities and provides an application experience to the users with a lighting fast speed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/surajkumardagur\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-09T17:53:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-29T11:45:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Suraj Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/surajkumardagur\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suraj Kumar\" \/>\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\/opencart-progressive-web-application\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\"},\"author\":{\"name\":\"Suraj Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/a861f02af05ea1787d27f4a75ae0899f\"},\"headline\":\"User Guide For Opencart Progressive Web Application\",\"datePublished\":\"2016-11-09T17:53:21+00:00\",\"dateModified\":\"2026-04-29T11:45:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\"},\"wordCount\":1672,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png\",\"keywords\":[\"Offline Approach\",\"Offline First\",\"opencart\",\"PWA\"],\"articleSection\":[\"opencart\",\"Opencart Marketplace\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\",\"url\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\",\"name\":\"User Guide For Opencart Progressive Web Application Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png\",\"datePublished\":\"2016-11-09T17:53:21+00:00\",\"dateModified\":\"2026-04-29T11:45:43+00:00\",\"description\":\"Opencart Progressive Web Applications uses web compatibilities and provides an application experience to the users with a lighting fast speed.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Guide For Opencart Progressive Web Application\"}]},{\"@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\/a861f02af05ea1787d27f4a75ae0899f\",\"name\":\"Suraj Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/78ddcf76738543c4d72ca8c63c8e0e396332b18e34a0619acbbfaa882c7f8504?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/78ddcf76738543c4d72ca8c63c8e0e396332b18e34a0619acbbfaa882c7f8504?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Suraj Kumar\"},\"description\":\"Learning eCommerce and marketplaces from ground zero and passionate about AI.\",\"sameAs\":[\"https:\/\/webkul.com\/blog\/author\/suraj.kumar981\/\",\"https:\/\/www.facebook.com\/surajkumardagur\",\"https:\/\/www.linkedin.com\/in\/surajkumardagur\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/surajkumardagur\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/suraj-kumar981\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"User Guide For Opencart Progressive Web Application Webkul Blog","description":"Opencart Progressive Web Applications uses web compatibilities and provides an application experience to the users with a lighting fast speed.","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\/opencart-progressive-web-application\/","og_locale":"en_US","og_type":"article","og_title":"User Guide For Opencart Progressive Web Application Webkul Blog","og_description":"Opencart Progressive Web Applications uses web compatibilities and provides an application experience to the users with a lighting fast speed.","og_url":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"https:\/\/www.facebook.com\/surajkumardagur","article_published_time":"2016-11-09T17:53:21+00:00","article_modified_time":"2026-04-29T11:45:43+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png","type":"image\/png"}],"author":"Suraj Kumar","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/surajkumardagur","twitter_site":"@webkul","twitter_misc":{"Written by":"Suraj Kumar","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/"},"author":{"name":"Suraj Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/a861f02af05ea1787d27f4a75ae0899f"},"headline":"User Guide For Opencart Progressive Web Application","datePublished":"2016-11-09T17:53:21+00:00","dateModified":"2026-04-29T11:45:43+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/"},"wordCount":1672,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png","keywords":["Offline Approach","Offline First","opencart","PWA"],"articleSection":["opencart","Opencart Marketplace"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/","url":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/","name":"User Guide For Opencart Progressive Web Application Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png","datePublished":"2016-11-09T17:53:21+00:00","dateModified":"2026-04-29T11:45:43+00:00","description":"Opencart Progressive Web Applications uses web compatibilities and provides an application experience to the users with a lighting fast speed.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Oprncart-Progressive-Web-Application.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"User Guide For Opencart Progressive Web Application"}]},{"@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\/a861f02af05ea1787d27f4a75ae0899f","name":"Suraj Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/78ddcf76738543c4d72ca8c63c8e0e396332b18e34a0619acbbfaa882c7f8504?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/78ddcf76738543c4d72ca8c63c8e0e396332b18e34a0619acbbfaa882c7f8504?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Suraj Kumar"},"description":"Learning eCommerce and marketplaces from ground zero and passionate about AI.","sameAs":["https:\/\/webkul.com\/blog\/author\/suraj.kumar981\/","https:\/\/www.facebook.com\/surajkumardagur","https:\/\/www.linkedin.com\/in\/surajkumardagur\/","https:\/\/x.com\/https:\/\/twitter.com\/surajkumardagur"],"url":"https:\/\/webkul.com\/blog\/author\/suraj-kumar981\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/63967","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\/127"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=63967"}],"version-history":[{"count":72,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/63967\/revisions"}],"predecessor-version":[{"id":536838,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/63967\/revisions\/536838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/63968"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=63967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=63967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=63967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}