Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    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 https://developers.google.com/web/showcase/2016/flipkart.

    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 user-friendly 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.

    • The website becomes lightning fast.
    • More user-friendly.
    • 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 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 user-friendly than a web application.
    • Performs better than a web application.
    • 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 requirement in managing the app.
    • 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.

    NOTE: Currently this module doesn’t work for the guest checkout. The user must be loggedin to complete the checkout process. 

    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 in the ocmod’ folder.

    After uploading the XML file go to the “Extensions > Modifications” and click on the refresh button to rebuild modification cache.

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

    After that under “Extension > Extensions” select ‘Modules’ from the dropdown and install the PWA-WebKUL by clicking the install button and then click on the edit button to manage the module.

    Progressive Web App for Opencart is built on top of React.js Framework which makes it even more powerful, flexible, fast and scalable.

    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

    How To Get Firebase Project Credentials

    In order to use this module, you need to have Firebase Project Credentials, which will be used in the module configuration. Please visit this link and create a new project with your Gmail account.

    1.  After opening the Firebase website, please click CREATE NEW PROJECT button as shown in the above screenshot.

    2. A small pop-up window will appear with the name of Create a project, here you have to enter your Project Name and then you can click on the continue button, further you can also enter your Google Analytics for your project or you can also skip this and continue without google aanalytics.

    3. After completing the details click CREATE PROJECT button.

    4. After creating your new project click on the Storage and create a new bucket. You can also find the default bucket here.

    After creating  bucket now go to, Settings menu icon and select Project Settings option. Please view below-attached screenshot. A new Settings page will be opened.

    5. In the General tab find the project ID, web API key, etc. under the setting page.

    Now click on the button as shown in the image below. This will be used to add the firebase to the web app.

    Now, after clicking on the button </> above Register the app by entering the app nick name and click on register app-

    Now after successful registration you can see the some credential details as shown in the image below –

    Now, click CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your Server Key (FCM Authorization Key). You can also find the Sender ID, Web Push Certificates/ Public Key here.

    Configuration of Opencart Progressive Web Application

    After successful installation under “Extension > Extensions” select ‘Modules’ from the drop-down and click edit button of PWA-WebKUL for configuration.

    Here the admin can configure all the required fields as below image.

    Status – Admin can choose between ‘Enabled’ and ‘Disabled’ to enable or disable the module as per the requirement.

    FCM Authorization Key – The admin can enter the Google Cloud Messaging Key for push Notifications here. To know how to get these credential please read upper section – “How To Get Firebase Project Credential.

    Notification Status – The admin can manage the notofication setting here. The admin can enable or disable the notification accordingly.

    Manage PWA

    Now from the admin dashboard, the admin can click on the PWA to manage –

    • Banner
    • Notification
    • Featured
    • Carousel
    • Category icons
    • Custom Collection

    Banner –

    The admin can create the banner for the PWA. These banners will be displayed to the customers on the front end on the Progressive Web Applocation.

    The admin can add a banner image, create a new banner and also edit the existing banner accordingly.

    Here, the admin can enter the banner title, select the category or product to link the banner and also the admin can sort the banner accordingly.

    NOTE: Currently it only supports “Offer” and “Trending” Product/Category type.

    Notification –

    The admin can easily manage and send the push notifications to the customers from the admin dashboard. The admin can Add a new notification,  edit the existing notification, and delete the notification.

    To add a new notification , the admin can click on “plus sign” on the right hand corner in the upper side and create a new push notification as shown in the image below –

    Here, the admin can fill the required details to create a push notification. The admin can enter the Notification title, Content for the Notification that will be displayed in the notification, The admin can select the type of the notification i.e. Product Type, Category Type, Other Type, or Custom.

    The admin will enter the id of the category or product according to the Notification type selected.

    The admin can enable or disable the status of the notification and also the admin can upload the banner icon for the notification.

    Now, after creating a successfull notification, the admin can directly click on send and save button to send the notification to the customer and save the notification too.

    Featured –

    The admin can select the featured products that will be displayed to the customers as the featured products in the PWA.

    The admin can also remove the products from the featured products accordingly.

    Carousel –

    Coming Soon*

    Category Icons –

    The admin can set the icon of the category that will be shown to the customers from the nav bar on the PWA.

    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 the menu icon of chrome to add the application to 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. 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 be displayed as below image.

    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 http://webkul.uvdesk.com/

    Current Product Version - 3.0.0.0

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

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index