{"id":205724,"date":"2019-11-06T05:53:47","date_gmt":"2019-11-06T05:53:47","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=205724"},"modified":"2025-02-27T12:24:15","modified_gmt":"2025-02-27T12:24:15","slug":"opencart-headless-pwa-app","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/","title":{"rendered":"Opencart Headless PWA"},"content":{"rendered":"\n<p><a href=\"https:\/\/store.webkul.com\/opencart-headless-pwa.html\" target=\"_blank\" rel=\"noreferrer noopener\">Opencart Headless PWA<\/a> (Progressive Web Applications) uses web compatibilities to provide fast, reliable and engaging mobile application experience to your users.<\/p>\n\n\n\n<p>Front-end of Opencart Headless PWA is build using the React-Js which provides an advanced and rich experience to its users.<\/p>\n\n\n\n<p>Opncart Headless PWA is developed in a way that offers the same experience to the users as a native Android or iOS application. <\/p>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Features<\/h3><\/div><div class=\"margin-bottom-50\">\n<ul class=\"wp-block-list\">\n<li>It provides a fast user experience to the users as it is lightweight.<\/li>\n\n\n\n<li>The users can also use the PWA&#8217;s in the poor network connection too.<\/li>\n\n\n\n<li>Easy to customize because the frontend is built on React JS.<\/li>\n\n\n\n<li>Support Push Notifications<\/li>\n\n\n\n<li>Works in offline mode.<\/li>\n\n\n\n<li>Support Android and IOS.<\/li>\n\n\n\n<li>PWA&#8217;s are responsive on all the platforms which provide cross-browser compatibility.<\/li>\n\n\n\n<li>It provides a feel of a native app.<\/li>\n\n\n\n<li>There is no need to update the app regularly as it is not a native app.<\/li>\n\n\n\n<li>The users can easily add the app to the home screen by visiting the website.<\/li>\n\n\n\n<li>The App provides a better User Interface and fast experience to the users which helps to increase the sale and generate more revenue.<\/li>\n\n\n\n<li>The admin can set the splash background color, application header color, application icon, application name, and application&#8217;s short name.<\/li>\n\n\n\n<li><span style=\"font-size: inherit;\">The Admin can manage or add banner images, notifications, featured products, category icons, and <\/span>custom collection.<\/li>\n<\/ul>\n\n\n\n<p><strong>Note: The Opencart Headless PWA runs on HTTPS (Hyper Test Transfer Protocol secure) only.<\/strong><\/p>\n<\/div>\n\n\n\n<p>Watch the below video tutorial to understand the extension workflow :<\/p>\n\n\n\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video\"><div class=\"wk-block--yt-video-frame\"><div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"3nVfSyBn8dI\"><\/div><\/div><\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Installation<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>The installation of the&nbsp;<strong>Opencart Headless PWA<\/strong>&nbsp;is very simple. The admin just needs to move or&nbsp;upload&nbsp;the<strong>&nbsp;admin<\/strong>,<strong> catalog, and react-app<\/strong>&nbsp;folders into the Opencart root folder.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1131\" height=\"383\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png\" alt=\"installation\" class=\"wp-image-205931\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png 1131w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png 768w\" sizes=\"(max-width: 1131px) 100vw, 1131px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong><em>Note<\/em><\/strong><em>&nbsp;\u2013 You can also install the&nbsp;<\/em><strong>Opencart Headless PWA<\/strong><em>&nbsp;module by uploading the&nbsp;ZIP or XML file from the&nbsp;<\/em><strong><em>ocmod<\/em><\/strong><em>&nbsp;folder. Please upload the ZIP file for version 3.X and upload the XML&nbsp; file for version 2.X.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>After transferring the folders, use the extension installer for uploading the<strong> wkpwa.ocmod.zip<\/strong>&nbsp;file&nbsp;which you will find in the ocmod folder.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1283\" height=\"671\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/upload-file.png\" alt=\"upload file\" class=\"wp-image-206145\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/upload-file.png 1283w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/upload-file.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/upload-file.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/upload-file.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/upload-file.png 1200w\" sizes=\"(max-width: 1283px) 100vw, 1283px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now go to the&nbsp;<strong>Extensions&gt;Modification<\/strong>&nbsp;then click on refresh button as shown in the image below \u2013<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1294\" height=\"581\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png\" alt=\"modification\" class=\"wp-image-205889\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png 1294w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/modification-1.png 604w\" sizes=\"(max-width: 1294px) 100vw, 1294px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now in the Admin panel go to&nbsp;<strong>System&gt;Users&gt;Usergroup<\/strong>&nbsp;and edit \u2018<strong>Administrator<\/strong>\u2019 and select all for both Access and Modify Permission then save it.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1283\" height=\"782\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/users-group.png\" alt=\"refresh users group\" class=\"wp-image-205890\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/users-group.png 1283w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/users-group.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/users-group.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/users-group.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/users-group.png 1200w\" sizes=\"(max-width: 1283px) 100vw, 1283px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After that under&nbsp;<strong>Extensions&gt;Modules<\/strong>, you can install or edit the module.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1264\" height=\"716\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/edit-module.png\" alt=\"edit module\" class=\"wp-image-205891\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/edit-module.png 1264w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/edit-module.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/edit-module.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/edit-module.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/edit-module.png 1200w\" sizes=\"(max-width: 1264px) 100vw, 1264px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><br><\/p>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Module Configuration<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Using the&nbsp;<strong>Opencart Headless PWA<\/strong>, the admin can configure the module from the admin panel easily and it can be done by navigating to&nbsp;<strong>Extensions&gt; Extensions&gt; Modules&gt; PWA-Webkul<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1285\" height=\"1047\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/module-configuration.png\" alt=\"module configuration\" class=\"wp-image-205894\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/module-configuration.png 1285w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/module-configuration.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/module-configuration.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/module-configuration.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/module-configuration.png 1200w\" sizes=\"(max-width: 1285px) 100vw, 1285px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, the admin can &#8211;<\/p>\n\n\n\n<p><strong>Status &#8211; Enable<\/strong> or <strong>Disable<\/strong> the module as per their requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Edit General Settings &#8211;<\/h2>\n\n\n\n<p><strong>FCM Authorization Key &#8211; <\/strong>The admin can enter the <strong>FCM Authorization Key <\/strong>here. It can be generated after registering for the Firebase Console. Click <a href=\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#panel-3\">here<\/a> to know how to get <strong>FCM Authorization Key<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Edit Notification Settings &#8211;<\/h2>\n\n\n\n<p><strong>Notification Status &#8211; <\/strong>The admin can <strong>Enable <\/strong>or <strong>Disable <\/strong>the notification as per their needs.<\/p>\n\n\n\n<p><strong>Application Name &#8211; <\/strong>The admin can enter the <strong>Application Name <\/strong>here.<\/p>\n\n\n\n<p><strong>Application&#8217;s Short Name &#8211;<\/strong> The admin can enter the <strong>Application&#8217;s Short Name <\/strong>here.<\/p>\n\n\n\n<p><strong>Application Icon &#8211; <\/strong>The admin can upload the <strong>Application Icon <\/strong>here that will be displayed to the users.<\/p>\n\n\n\n<p><strong>Splash Background Colour &#8211; <\/strong>The admin can select the <strong>Background Colour <\/strong>for the <strong>Splash Screen.<\/strong><\/p>\n\n\n\n<p><strong>Application Header Colour &#8211; <\/strong>The admin can select the <strong>Header Colour <\/strong>for the Progressive Web Application.<\/p>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">How to Run and Deploy Opencart Headless PWA On Server<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>You will need to navigate <strong>react-app\/src\/constants\/constants.js<\/strong> and then change the base_url with your opencartbase_url.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/constants.png\" alt=\"run command\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now you will need to run and deploy Opencart Headless PWA on your server. You will need to run these commands where you have installed the application.<\/p>\n\n\n\n<p>First Command &#8211; <strong>npm install<\/strong><\/p>\n\n\n\n<p>Second Command &#8211; <strong>npm run-script build<\/strong><\/p>\n\n\n\n<p>This will create a <strong>build<\/strong> folder in the <strong>react-app folder<\/strong> that will contain some files as shown in the image below, and then you will need to copy and paste this <strong>build folder <\/strong>on the server where you have installed the Opencart Headless PWA.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1110\" height=\"466\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/build.png\" alt=\"build folder\" class=\"wp-image-206165\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/build.png 1110w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/build.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/build.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/build.png 768w\" sizes=\"(max-width: 1110px) 100vw, 1110px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">How to Get FCM Authorization Key &#8211;<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>In order to use this module, you need to have <strong>Firebase Project Credentials, <\/strong>which will be used in the Opencart Headless PWA configuration. Please visit <a href=\"https:\/\/console.firebase.google.com\/\">this<\/a> link&nbsp;and create a new project with your Gmail account.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png\" alt=\"firebase\" class=\"wp-image-187121\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 1280w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 1200w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>1.<\/strong>&nbsp; After opening the<strong> Firebase<\/strong>&nbsp;website, please click the <strong>CREATE NEW PROJECT<\/strong> button as shown in the above screenshot.<\/p>\n\n\n\n<p><strong>2. <\/strong>A small pop-up window will appear with the name of <strong>Create a project<\/strong>, here you have to enter your <strong>Project Name<\/strong> and then select your <strong>Country\/Region<\/strong>.<\/p>\n\n\n\n<p><strong>3<\/strong>. After completing the details click the <strong>CREATE PROJECT<\/strong>. Thus you will receive the message displaying your new project is ready and then click on the continue.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"778\" height=\"498\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-created-successfully.png\" alt=\"add new project\" class=\"wp-image-206092\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-created-successfully.png 778w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-created-successfully.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-created-successfully.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-created-successfully.png 768w\" sizes=\"(max-width: 778px) 100vw, 778px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>4.<\/strong> After creating your new project add firebase to the app.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1287\" height=\"656\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-firebase-to-project.png\" alt=\"add firebase to app\" class=\"wp-image-206095\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-firebase-to-project.png 1287w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-firebase-to-project.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-firebase-to-project.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-firebase-to-project.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-firebase-to-project.png 1200w\" sizes=\"(max-width: 1287px) 100vw, 1287px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now register the app by providing the app nickname and click on the register as shown in the image below &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1188\" height=\"492\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-firebase-to-the-app.png\" alt=\"add-firebase-to-the-app\" class=\"wp-image-212067\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-firebase-to-the-app.png 1188w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-firebase-to-the-app-300x124.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-firebase-to-the-app-250x104.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-firebase-to-the-app-768x318.png 768w\" sizes=\"(max-width: 1188px) 100vw, 1188px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After registering the app now click on the Project Setting as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1278\" height=\"629\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-setting.png\" alt=\"project setting\" class=\"wp-image-206097\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-setting.png 1278w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-setting.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-setting.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-setting.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/project-setting.png 1200w\" sizes=\"(max-width: 1278px) 100vw, 1278px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now move to the <strong>Cloud Messaging <\/strong>tab from here and you can get the <strong>Server Key <\/strong>(<strong>FCM Authorization Key<\/strong>) which will be used to configure the module. <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1301\" height=\"623\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/server-key.png\" alt=\"get fcm key\" class=\"wp-image-206099\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/server-key.png 1301w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/server-key.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/server-key.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/server-key.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/server-key.png 1200w\" sizes=\"(max-width: 1301px) 100vw, 1301px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Manage PWA<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Now from the admin dashboard, the admin can manage the PWA and its features. Here, the admin can manage the &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Banner<\/strong><\/li>\n\n\n\n<li><strong>Notification<\/strong><\/li>\n\n\n\n<li><strong>Featured<\/strong><\/li>\n\n\n\n<li><strong>Category icons<\/strong><\/li>\n\n\n\n<li><strong>Custom Collection<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1284\" height=\"665\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-pwa.png\" alt=\"manage pwa from admin dashboard\" class=\"wp-image-205932\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-pwa.png 1284w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-pwa.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-pwa.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-pwa.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-pwa.png 1200w\" sizes=\"(max-width: 1284px) 100vw, 1284px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Manage Banner &#8211;<\/h2>\n\n\n\n<p>The admin can manage the banner for the PWA here. The admin can view the already created banner, create a new banner, select the type i.e. product or category here, link the selected product\/ category, upload the image of the banner, sort the order of the banner and also delete the banner from here.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1282\" height=\"582\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-banner-2.png\" alt=\"add new banner\" class=\"wp-image-206430\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-banner-2.png 1282w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-banner-2.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-banner-2.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-banner-2.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-banner-2.png 1200w\" sizes=\"(max-width: 1282px) 100vw, 1282px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>To create a new banner, the admin can click on the &#8220;<strong>Add button<\/strong>&#8221; and create a new banner. Here, the admin can enter the title of the banner, select the type for the banner i.e. product\/ category, link the product or category accordingly, upload the banner image, sort the order of the banner, and can also delete the created banner as shown in the image below &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1278\" height=\"741\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/create-new-banner-1.png\" alt=\"create new banner\" class=\"wp-image-206103\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/create-new-banner-1.png 1278w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/create-new-banner-1.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/create-new-banner-1.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/create-new-banner-1.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/create-new-banner-1.png 1200w\" sizes=\"(max-width: 1278px) 100vw, 1278px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Manage Notification &#8211;<\/h2>\n\n\n\n<p>From the notification menu, the admin can create and manage the notification. This notification is used to send push notifications to the customer on a PWA.<\/p>\n\n\n\n<p>Here, the admin can also edit the already created notification, filter the notification based on notification title, notification status, notification type, and date added.<\/p>\n\n\n\n<p>To send a push notification, the admin will have to select the notification, and then click on the send button, that is showing on the top-right near to the add button. In this way, push notification will be sent to the users who opt-in to receive the push notification.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1283\" height=\"670\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-notification-1.png\" alt=\"manage notification\" class=\"wp-image-206434\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-notification-1.png 1283w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-notification-1.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-notification-1.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-notification-1.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/manage-notification-1.png 1200w\" sizes=\"(max-width: 1283px) 100vw, 1283px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>To add a new notification the admin can click on the &#8220;<strong>Add button<\/strong>&#8221; and then fill the required details to create a new notification as shown in the image below &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1285\" height=\"891\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification-manage.png\" alt=\"manage push notification\" class=\"wp-image-205966\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification-manage.png 1285w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification-manage.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification-manage.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification-manage.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification-manage.png 1200w\" sizes=\"(max-width: 1285px) 100vw, 1285px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, the admin can enter the Notification title, notification content, type of the notification for which the admin wants to create the notification i.e. products, categories,  other, etc. Now, the admin can select the product or categories based on the previously selected notification type. <\/p>\n\n\n\n<p>Moreover, the admin can enable or disable the notification, and also select the banner for the notification and then can click on the send &amp; save or save button according to their needs.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1284\" height=\"985\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/new-created-notification-banner.png\" alt=\"new created notification\" class=\"wp-image-205968\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/new-created-notification-banner.png 1284w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/new-created-notification-banner.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/new-created-notification-banner.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/new-created-notification-banner.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/new-created-notification-banner.png 1200w\" sizes=\"(max-width: 1284px) 100vw, 1284px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>The admin can now see the newly created push notification as shown in the image above.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Manage Featured Product &#8211;<\/h2>\n\n\n\n<p>The admin can manage the featured products that will be displayed to the customers at the front-end. The customer can select the product and then click on the Save button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"497\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/featured-products.png\" alt=\"featured-products\" class=\"wp-image-212069\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/featured-products.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/featured-products-300x124.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/featured-products-250x104.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/featured-products-768x318.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Manage Category Icons &#8211;<\/h2>\n\n\n\n<p>Here, the admin can assign the icons for the available categories. These icons will be displayed to the customers on progressive web applications. <\/p>\n\n\n\n<p>The admin can assign these icons to the categories by navigating to <strong>category icons <\/strong>under the <strong>PWA menu.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1272\" height=\"622\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-icons.png\" alt=\"category icons\" class=\"wp-image-206015\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-icons.png 1272w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-icons.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-icons.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-icons.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-icons.png 1200w\" sizes=\"(max-width: 1272px) 100vw, 1272px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Create And Manage Custom Collection &#8211;<\/h2>\n\n\n\n<p>The admin can create the custom collection by clicking on the &#8220;<strong>Add button<\/strong>&#8221; and then add the products to the custom created collection. The admin can also delete the created custom collection by clicking on the delete button next to the custom collection.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1296\" height=\"583\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/custom-collection.png\" alt=\"create custom collection\" class=\"wp-image-206021\" style=\"width:800px;height:undefinedpx\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/custom-collection.png 1296w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/custom-collection.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/custom-collection.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/custom-collection.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/custom-collection.png 1200w\" sizes=\"(max-width: 1296px) 100vw, 1296px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, the admin can add the products to the newly created collection based on the &#8211;<\/p>\n\n\n\n<p><strong>Product Ids &#8211; <\/strong>The admin can add the products to the custom created collection and select the products as shown in the image below &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"545\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-custom-collection-based-on-product-id.png\" alt=\"add-custom-collection-based-on-product-id\" class=\"wp-image-212073\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-custom-collection-based-on-product-id.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-custom-collection-based-on-product-id-300x136.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-custom-collection-based-on-product-id-250x114.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/add-custom-collection-based-on-product-id-768x349.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Customer View<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Now when a customer will visit an Opencart Headless PWA enabled website, the customer will receive a popup to enable notification. The customer will need to allow permission to receive the push notifications using the PWA.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/allow-push-notification.png\" alt=\"allow push notification\" class=\"wp-image-206052\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/allow-push-notification.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/allow-push-notification.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/allow-push-notification.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/allow-push-notification.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Now, when a customer will click on the <strong>&#8220;allow&#8221; <\/strong>button, the customer will be able to receive the push notification on the PWA.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add To Home Screen &#8211;<\/h2>\n\n\n\n<p>After allowing the permission to receive the notification, the customer can click on the &#8220;<strong>Add OC-PWA to Home screen<\/strong>&#8221; to add the app to the home screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-to-home-screen-576x1024.png\" alt=\"add to home screen\" style=\"width:144px;height:256px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Now a pop-up will display to the customer to add the app to the home screen. The customer can now click on the &#8220;<strong>Add&#8221;<\/strong> button to add the app to the home screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/add-to-home-screen-notification-576x1024.png\" alt=\"add to home screen\" style=\"width:144px;height:256px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>after clicking on the <strong>&#8220;Add&#8221; <\/strong>button, the PWA app will be added to the customer&#8217;s home screen as shown in the image below &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/added-to-the-home-screen.png\" alt=\"added to home screen\" class=\"wp-image-206059\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/added-to-the-home-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/added-to-the-home-screen.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/added-to-the-home-screen.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/added-to-the-home-screen.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Splash Screen &#8211;<\/h2>\n\n\n\n<p>Now when the customer will open the Headless PWA App, the customer can see the Splash Screen that enables a rich experience for the customers just like a native app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/splash-screen.png\" alt=\"splash screen\" class=\"wp-image-206060\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/splash-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/splash-screen.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/splash-screen.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/splash-screen.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Home Page &#8211;<\/h2>\n\n\n\n<p>Now when a customer will open the Headless PWA App, the customer will experience and feel the same as in a native app. After opening the app the customer will be able to see the home page of the admin&#8217;s website as shown in the image below &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/home-screen.png\" alt=\"pwa home screen customer's website\" class=\"wp-image-206061\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/home-screen.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/home-screen.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/home-screen.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/home-screen.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>the customer can view the Popular Products, New Products, Featured Products from the homepage using the Opencart Headless PWA.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/featured-products-1.png\" alt=\"view featured products\" class=\"wp-image-206105\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/featured-products-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/featured-products-1.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/featured-products-1.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/featured-products-1.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">View Navigation Drawer &#8211;<\/h2>\n\n\n\n<p>Customers can view the categories, and manage their profiles from the navigation drawer. The customer can also log in and signup from here as shown in the image below &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-with-icon.png\" alt=\"view navigation drawer\" class=\"wp-image-206107\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-with-icon.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-with-icon.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-with-icon.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/category-with-icon.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p> to log in or sign up, click on the profile and log in or sign up if you don&#8217;t have an account already.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/signin.png\" alt=\"sign in\" class=\"wp-image-206108\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/signin.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/signin.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/signin.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/signin.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Add Product To The Cart &#8211;<\/h2>\n\n\n\n<p>Now, the customer can visit the product page <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-page.png\" alt=\"product page\" class=\"wp-image-206451\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-page.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-page.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-page.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-page.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>And add the product to the cart as shown in the image below &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-details.png\" alt=\"add product to the cart\" class=\"wp-image-206453\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-details.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-details.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-details.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/product-details.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Now the customer can select or add the billing address as shown in the image below &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-billing-address-1.png\" alt=\"select billing address\" class=\"wp-image-206459\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-billing-address-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-billing-address-1.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-billing-address-1.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-billing-address-1.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>After adding the billing address, the customer can add or select the shipping address <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-address-1.png\" alt=\"shipping address\" class=\"wp-image-206468\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-address-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-address-1.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-address-1.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-address-1.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Now, the customer can select the shipping method and then process further to make the payment.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-method-1.png\" alt=\"select shipping method\" class=\"wp-image-206471\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-method-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-method-1.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-method-1.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-shipping-method-1.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Here, the customer can select the payment method and Make the payment.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-payment-method-1.png\" alt=\"select payment method\" class=\"wp-image-206474\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-payment-method-1.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-payment-method-1.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-payment-method-1.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/select-payment-method-1.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>After completing the successful checkout the customer can also see the thank you page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/order-complete.png\" alt=\"thank you page\" class=\"wp-image-206113\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/order-complete.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/order-complete.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/order-complete.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/order-complete.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Push Notification &#8211;<\/h2>\n\n\n\n<p>If the customer allowed permission to receive the notification, the customer will be able to receive the push notification sent by the admin.  <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification.png\" alt=\"push notification\" class=\"wp-image-206114\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/push-notification.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Offline Mode &#8211;<\/h2>\n\n\n\n<p>The customer can access the app even in a flaky network connection. Moreover, in the slow internet speed, the customer can also access the PWA pages once cached. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" width=\"720\" height=\"1280\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/work-in-offline.png\" alt=\"offline mode\" class=\"wp-image-206115\" style=\"width:144px;height:256px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/work-in-offline.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/work-in-offline.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/work-in-offline.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/work-in-offline.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>That\u2019s all for the&nbsp;<\/em><strong><em>Opencart Headless PWA<\/em><\/strong><em>.&nbsp;Still, have any issue feel free to add a ticket here \u2013&nbsp;<\/em><a href=\"https:\/\/webkul.uvdesk.com\/\">https:\/\/webkul.uvdesk.com<\/a><em>. Also, let us know your views to make the module better. \u30c4<\/em><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, reliable and engaging mobile application experience to your users. Front-end of Opencart Headless PWA is build using the React-Js which provides an advanced and rich experience to its users. Opncart Headless PWA is developed in a way that offers the same experience to <a href=\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":239,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[305],"tags":[10180,10177,10179,10178],"class_list":["post-205724","post","type-post","status-publish","format-standard","hentry","category-opencart","tag-headless-pwa-app-for-opencart","tag-opencart-headless-pwa","tag-opencart-pwa-app","tag-pwa-app-for-opencart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>OpenCart Headless PWA App | Progressive Web Application<\/title>\n<meta name=\"description\" content=\"Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, &amp; reliable application experience to the users.\" \/>\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-headless-pwa-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OpenCart Headless PWA App | Progressive Web Application\" \/>\n<meta property=\"og:description\" content=\"Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, &amp; reliable application experience to the users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-06T05:53:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-27T12:24:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png\" \/>\n<meta name=\"author\" content=\"Rajan Dimri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rajan Dimri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\"},\"author\":{\"name\":\"Rajan Dimri\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/84179204d8799af72b256809667b9c81\"},\"headline\":\"Opencart Headless PWA\",\"datePublished\":\"2019-11-06T05:53:47+00:00\",\"dateModified\":\"2025-02-27T12:24:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\"},\"wordCount\":1956,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png\",\"keywords\":[\"headless pwa app for opencart\",\"opencart headless pwa\",\"opencart pwa app\",\"pwa app for opencart\"],\"articleSection\":[\"opencart\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\",\"url\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\",\"name\":\"OpenCart Headless PWA App | Progressive Web Application\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png\",\"datePublished\":\"2019-11-06T05:53:47+00:00\",\"dateModified\":\"2025-02-27T12:24:15+00:00\",\"description\":\"Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, & reliable application experience to the users.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png\",\"width\":1131,\"height\":383},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Opencart Headless PWA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/84179204d8799af72b256809667b9c81\",\"name\":\"Rajan Dimri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bd29c0f3a2885bbbeb97c830d846534f69fe6069cfa296720fcd15d33bc31938?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\/bd29c0f3a2885bbbeb97c830d846534f69fe6069cfa296720fcd15d33bc31938?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rajan Dimri\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/rajan-dimri348\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"OpenCart Headless PWA App | Progressive Web Application","description":"Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, & reliable application experience to the users.","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-headless-pwa-app\/","og_locale":"en_US","og_type":"article","og_title":"OpenCart Headless PWA App | Progressive Web Application","og_description":"Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, & reliable application experience to the users.","og_url":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-11-06T05:53:47+00:00","article_modified_time":"2025-02-27T12:24:15+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png","type":"","width":"","height":""}],"author":"Rajan Dimri","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rajan Dimri","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/"},"author":{"name":"Rajan Dimri","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/84179204d8799af72b256809667b9c81"},"headline":"Opencart Headless PWA","datePublished":"2019-11-06T05:53:47+00:00","dateModified":"2025-02-27T12:24:15+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/"},"wordCount":1956,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png","keywords":["headless pwa app for opencart","opencart headless pwa","opencart pwa app","pwa app for opencart"],"articleSection":["opencart"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/","url":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/","name":"OpenCart Headless PWA App | Progressive Web Application","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png","datePublished":"2019-11-06T05:53:47+00:00","dateModified":"2025-02-27T12:24:15+00:00","description":"Opencart Headless PWA (Progressive Web Applications) uses web compatibilities to provide fast, & reliable application experience to the users.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/11\/installation-1.png","width":1131,"height":383},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/opencart-headless-pwa-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Opencart Headless PWA"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/84179204d8799af72b256809667b9c81","name":"Rajan Dimri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bd29c0f3a2885bbbeb97c830d846534f69fe6069cfa296720fcd15d33bc31938?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\/bd29c0f3a2885bbbeb97c830d846534f69fe6069cfa296720fcd15d33bc31938?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rajan Dimri"},"url":"https:\/\/webkul.com\/blog\/author\/rajan-dimri348\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/205724","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\/239"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=205724"}],"version-history":[{"count":36,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/205724\/revisions"}],"predecessor-version":[{"id":484338,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/205724\/revisions\/484338"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=205724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=205724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=205724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}