Demos Buy Now

Opencart Progressive Web Application

What is 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 in compared to the website and supports push notification.

According to the google developers ” Flipkart, India’s 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”. For more details, please visit following link

With the use of this feature, the website works faster on a slower internet connection. Due to the faster performance the user engagement increases on the website and results in a very high conversion rate.

Note:- Currently this module only supports android chrome and opera browsers.

What is the need of Progressive Web Application?

The Progressive Web Application is recommended because it is more immersive and lightning fast than a website or native application. Progressive Web Application also userfriendly if compared to the website and supports the push notification.  The best part of Progressive Web Application is that a user can use many of the features without an internet connection and once the mobile is connected to the internet the data gets synced. 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.

  • Website becomes lightning fast.
  • More userfriendly.
  • Supports push notification.
  • No need to download / install.
  • Works fast even on a slow connection.
  • Accessibility without any data connection.
  • Increases User engagement.
  • Increase conversion rate.

I have developed a native application for my store, do I still need the Progressive Web Application? 

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. 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 progressive web application as soon as they find the application. There, is no need to search, download and install the application. Also, you need to upgrade the native application with every version of the android or iOS. 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 the browser compatibility.

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. If you are using a well – designed native application like Mobikul  then it will surely give you a high performance and consume low data but if you want to reach to all types of customers then you should definitely go for Progressive Web Application.

Features Of Opencart Progressive Web Application

  • More userfriendly than a web application.
  • Works lightning fast if compared to the website.
  • Supports push notification.
  • Completely responsive on all the platforms.
  • Launches without the internet or low-quality internet.
  • Looks and feels like a native application.
  • Users do not need to update progressive web application.
  • No app store require managing the application.
  • Increases user engagement on the store.
  • Increases the store revenue due to user engagement.
  • Admin can enter the application name.
  • Admin can upload and change the application icon.
  • Admin can set the splash background color of the Progressive Web Application.
  • Admin can set the page background color of the Progressive Web Application.
  • Admin can set the header and font color of the Progressive Web Application.

Installation Of Opencart Progressive Web Application

Installation of Opencart Progressive Web Application module is easy. In the zip file of the module, you will find 4 folders, namely admin, catalog, image, and ocmod with sw_pwa_dev.js file. You just need to upload the admin, catalog and image folders with the sw_pwa_dev.js file to the root directory of your website.

Once you have uploaded the file then login to admin and go to Extensions> Extension installer and upload the XML file. The XML file can be found on the ocmod folder.

After uploading the XML file go to the Extensions > Modification and click on refresh field.

After that in Admin panel go to System -> Users -> Usergroup and edit ‘Administrator’ and select all for both Access and Modify Permission then save it.

After that under Extension > Modules install the Opencart Progressive Web Application module like this way.

Module Translation

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 language translation

Configuration of Opencart Progressive Web Application

After installation of the module, admin can configure it from the Opencart module list. Here, admin can edit application name, icon, background colors.

How a Customer can use Opencart Progressive Web Application

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 menu icon of chrome to add the application on the home screen.

From the chrome menu, a user can select ‘Add to home screen’ option to add the progressive web application to the home screen.

Now a pop window will appear to add the name of the progressive web application like this.

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.

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.

After splash screen, a user can see the home screen of the application. From here a user can search product or browse categories.

if a user selects the option to browse categories then the category list will show like this.

That’s 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


Current Product Version -

Supported Framework Version - 2.0.x.x, 2.1.x.x, 2.2.x.x, 2.3.x.x, 3.x.x.x

. . .


Add Your Comment

Be the first to comment.