{"id":63967,"date":"2016-11-09T17:53:21","date_gmt":"2016-11-09T17:53:21","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=63967"},"modified":"2025-02-20T10:21:50","modified_gmt":"2025-02-20T10:21:50","slug":"opencart-progressive-web-application","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/","title":{"rendered":"Opencart Progressive Web Application"},"content":{"rendered":"<div class=\"alert alert-success\">\n<h6>What is a Progressive Web Application?<\/h6>\n<\/div>\n<p>Progressive Web Applications uses web compatibilities and provides an application experience to the users. It develops from a browser tab and makes pages more immersive with a low friction user experience.<\/p>\n<p>The Progressive Web Application is lightning fast compared to the website and supports push notification.<\/p>\n<p>According to the Google developers &#8221; Flipkart, India\u2019s largest e-commerce site, decided to combine their web presence and native app into a Progressive Web Application that has resulted in a 70% increase in conversions&#8221;. For more details, please visit the following link-<a href=\"https:\/\/developers.google.com\/web\/showcase\/2016\/flipkart\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developers.google.com\/web\/showcase\/2016\/flipkart<\/a>.<\/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<h6><strong>Note &#8211;<\/strong><\/h6>\n<ul>\n<li><strong>Currently, this module only supports android chrome and opera browsers.<\/strong><\/li>\n<li><strong>Your store must be served over a secure server (HTTPS) for PWA<\/strong><\/li>\n<\/ul>\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>Accessibility without any\u00a0data 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 than a web application.<\/li>\n<li>Works lightning fast if compared to the website.<\/li>\n<li>Supports push notification.<\/li>\n<li>Completely responsive on all the platforms.<\/li>\n<li>Launches without the internet or low-quality internet.<\/li>\n<li>Looks and feels like a native application.<\/li>\n<li>Users do not need to update the progressive web application.<\/li>\n<li>No app store requires managing the application.<\/li>\n<li>Increases user engagement in the store.<\/li>\n<li>Increases store revenue due to user engagement.<\/li>\n<li>The admin can enter the application name.<\/li>\n<li>Also, the admin can upload and change the application icon.<\/li>\n<li>Further, the admin can set the splash background color of the Progressive Web Application.<\/li>\n<li>The admin can set the page background color of the Progressive Web Application.<\/li>\n<li>The admin can set the header and font color of the Progressive Web Application.<\/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_pwa_dev.js<\/strong> file.<\/p>\n<p>You just need to upload the admin, catalog and image folders with the\u00a0sw_pwa_dev.js file\u00a0to the root directory of your website.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation.png\"><img decoding=\"async\" class=\"alignnone wp-image-66827\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation.png\" alt=\"installation\" width=\"800\" height=\"276\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation.png 1268w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation-250x86.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation-300x103.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation-768x265.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Installation-1200x414.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/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 XML file. The XML file can be found in the <strong>&#8216;<\/strong><strong>ocmod&#8217;\u00a0<\/strong>folder.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml.png\"><img decoding=\"async\" class=\"alignnone wp-image-155500\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml.png\" alt=\"Upload XML\" width=\"800\" height=\"389\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml.png 1348w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml-250x121.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml-768x373.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-upload-xml-1200x583.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>On uploading the XML 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><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh.png\"><img decoding=\"async\" class=\"alignnone wp-image-155502\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh.png\" alt=\"Refresh\" width=\"800\" height=\"385\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh.png 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh-250x120.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh-300x144.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh-768x369.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-refresh-1200x577.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/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><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission.png\"><img decoding=\"async\" class=\"alignnone wp-image-155504\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission.png\" alt=\"Select Permission\" width=\"800\" height=\"500\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission.png 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission-250x156.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission-300x187.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission-768x480.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-select-permission-1200x749.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/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><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1.png\"><img decoding=\"async\" class=\"alignnone wp-image-155526\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1.png\" alt=\"Install Module\" width=\"800\" height=\"389\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1.png 1348w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1-768x374.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1-1200x584.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">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. 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>In order to use this module, you need to have Firebase Project Credentials, which will be used in the OpenCart configuration.<\/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<p>1. After opening the Firebase website, please click <strong>&#8216;Add project&#8217;<\/strong> button as shown in the below snapshot.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project.png\"><img decoding=\"async\" class=\"alignnone wp-image-155512\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project.png\" alt=\"Click Project\" width=\"800\" height=\"390\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project.png 1346w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project-768x375.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-click-project-1200x586.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>2. A small pop-up window will appear with the name of <strong>&#8216;Add a project&#8217;<\/strong>, here you have to enter your <strong>&#8216;Project Name&#8217;<\/strong> and then select your Country\/Region.<\/p>\n<p>3. After completing the details click <strong>&#8216;Create project&#8217;<\/strong> button as below image.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project.png\"><img decoding=\"async\" class=\"alignnone wp-image-155515\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project.png\" alt=\"Create Project\" width=\"800\" height=\"461\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project.png 1347w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project-250x144.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project-300x173.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project-768x442.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-add-project-1200x691.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Now, the project will be ready. Click on <strong>&#8216;Continue&#8217;<\/strong> to create the project.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added.png\"><img decoding=\"async\" class=\"alignnone wp-image-155519\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added.png\" alt=\"Project added\" width=\"800\" height=\"389\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added.png 1347w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added-768x373.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-added-1200x584.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>4. After creating your new project click settings menu button and select <strong>&#8216;Project Settings&#8217;<\/strong> option. Please view below snapshot.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings.png\"><img decoding=\"async\" class=\"alignnone wp-image-155521\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings.png\" alt=\"Project Settings\" width=\"800\" height=\"371\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings.png 1349w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings-250x116.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings-300x139.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings-768x356.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-project-settings-1200x556.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>5. After entering the Settings page, click <strong>&#8216;Cloud Messaging&#8217;<\/strong> tab, here you will find your Project Credentials, copy\u00a0 your <strong>&#8216;Server Key&#8217;<\/strong> and <strong>&#8216;Sender ID&#8217;<\/strong> as displayed below.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys.png\"><img decoding=\"async\" class=\"alignnone wp-image-155522\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys.png\" alt=\"Keys\" width=\"800\" height=\"390\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys.png 1349w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys-768x374.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-firebase-keys-1200x584.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>These credentials will be used in the next step of the Module configuration.<\/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><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module.png\"><img decoding=\"async\" class=\"alignnone wp-image-155508\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module.png\" alt=\"Module Configuration\" width=\"800\" height=\"389\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module.png 1348w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-768x374.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-installation-install-module-1200x584.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Here the admin can configure all the required fields as below image.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration.png\"><img decoding=\"async\" class=\"alignnone wp-image-155523\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration.png\" alt=\"Module Configuration\" width=\"800\" height=\"583\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration.png 1365w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration-250x182.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration-300x219.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration-768x560.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webkul-opencart-pwa-configuration-1200x875.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<p><em><strong>Status &#8211; <\/strong><\/em>Admin can choose between\u00a0<strong>&#8216;Enabled&#8217;\u00a0<\/strong>and\u00a0<strong>&#8216;Disabled&#8217;\u00a0<\/strong>enable or disable the module as per the requirement.<\/p>\n<p><em><strong>Application:-<\/strong><\/em><\/p>\n<ul>\n<li><em><strong>Name &#8211; <\/strong><\/em>Here the admin will enter the name of the Application that will be displayed on the home screen.<\/li>\n<li><em><strong>short name &#8211; <\/strong><\/em>Here the admin will enter the short name of the Application.<\/li>\n<li><em><strong>icon &#8211; <\/strong><\/em>Upload icon of the application to be displayed on the homepage.<\/li>\n<\/ul>\n<p><em><strong>Sender Id &#8211; <\/strong><\/em>Enter Sender Id collected from firebase.<\/p>\n<p><em><strong>Server Key &#8211;\u00a0<\/strong><\/em>Enter Sender Key collected from firebase.<\/p>\n<p><strong><span style=\"color: #ff0000;\">Note<\/span>: For complete steps to collect the Sender Id and Server Key click <a href=\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/#panel-3\">here<\/a>.<\/strong><\/p>\n<p><em><strong>Splash background color &#8211; <\/strong><\/em>Select the splash background color of the PWA Application.<\/p>\n<p><em><strong>Application header color &#8211; <\/strong><\/em>Select the application header color of the PWA Application.<\/p>\n<p><em><strong>Custom homepage background color\u00a0 &#8211; <\/strong><\/em>Select the custom homepage background color of the PWA Application.<\/p>\n<p><em><strong>Custom homepage font color &#8211; <\/strong><\/em>Select the custom homepage font color of the PWA Application.<\/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><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-209528\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification.png\" alt=\"Webkul Progressive Web Application-opencart-add-push-notification\" width=\"1275\" height=\"698\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification.png 1275w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification-300x164.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification-1200x657.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification-250x137.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Webkul-Progressive-Web-Application-opencart-add-push-notification-768x420.png 768w\" sizes=\"(max-width: 1275px) 100vw, 1275px\" loading=\"lazy\" \/><\/a><\/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>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<p>That\u2019s all for the Opencart Progressive Web Application module, still, have any issue feel free to add a ticket and let us know your views to make the module better\u00a0<a href=\"http:\/\/webkul.uvdesk.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/webkul.uvdesk.com\/<\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What is a Progressive Web Application? Progressive Web Applications uses web compatibilities and provides an application experience to the users. It develops from a browser tab and makes pages more immersive with a low friction user experience. The Progressive Web Application is lightning fast compared to the website and supports push notification. According to 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>Opencart Progressive Web Application | Module for PWA<\/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=\"Opencart Progressive Web Application | Module for PWA\" \/>\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=\"2025-02-20T10:21:50+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\":\"Opencart Progressive Web Application\",\"datePublished\":\"2016-11-09T17:53:21+00:00\",\"dateModified\":\"2025-02-20T10:21:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/\"},\"wordCount\":1584,\"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\":\"Opencart Progressive Web Application | Module for PWA\",\"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\":\"2025-02-20T10:21:50+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\":\"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":"Opencart Progressive Web Application | Module for PWA","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":"Opencart Progressive Web Application | Module for PWA","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":"2025-02-20T10:21:50+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":"Opencart Progressive Web Application","datePublished":"2016-11-09T17:53:21+00:00","dateModified":"2025-02-20T10:21:50+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/opencart-progressive-web-application\/"},"wordCount":1584,"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":"Opencart Progressive Web Application | Module for PWA","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":"2025-02-20T10:21:50+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":"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":59,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/63967\/revisions"}],"predecessor-version":[{"id":397411,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/63967\/revisions\/397411"}],"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}]}}