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.
    • Your store must be served over a secure server (HTTPS) for PWA
    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.
    • 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 requires 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.

    installation

    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.

    Upload XML

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

    Refresh

    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.

    Select Permission

    After that under “Extension > Extensions” select ‘Modules’ from the dropdown and install the ‘Opencart Progressive Web Application’ by clicking the install button.

    Install Module

    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 create Firebase Project Credentials

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

    1. After opening the Firebase website, please click ‘Add project’ button as shown in the below snapshot.

    Click Project

    2. A small pop-up window will appear with the name of ‘Add a project’, here you have to enter your ‘Project Name’ and then select your Country/Region.

    3. After completing the details click ‘Create project’ button as below image.

    Create Project

    Now, the project will be ready. Click on ‘Continue’ to create the project.

    Project added

    4. After creating your new project click settings menu button and select ‘Project Settings’ option. Please view below snapshot.

    Project Settings

    5. After entering the Settings page, click ‘Cloud Messaging’ tab, here you will find your Project Credentials, copy  your ‘Server Key’ and ‘Sender ID’ as displayed below.

    Keys

    These credentials will be used in the next step of Module configuration.

    Configuration of Opencart Progressive Web Application

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

    Module Configuration

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

    Module Configuration

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

    Application Name – Here the admin will enter the name of the Application that will be displayed on the home screen.

    Application’s short name – Here the admin will enter the short name of the Application.

    Application icon – Upload icon of the application to be displayed on the homepage.

    Sender Id – Enter Sender Id collected from firebase.

    Server Key – Enter Sender Key collected from firebase.

    Note : For complete steps to collect the Sender Id and Server Key click here.

    Splash background color – Select splash background color of the PWA Application.

    Application header color – Select application header color of the PWA Application.

    Custom homepage background color  – Select custom homepage background color of the PWA Application.

    Custom homepage font color – Select custom homepage font color of the PWA Application.

    Push Notification

    The admin can configure the push notification from the here to share the updates on store. For this the admin needs to click on push notification icon.

    Webkul Progressive Web Application-opencart-add-push-notification

    Here, the admin needs to enter the details that is meant to be shared in the notification.

    • Previous Message- In case the admin wish to share any message shared earlier.
    • Title- The intial title of the notification that admin needs to share.
    • Body- The text of the notification that is to be shared by the admin.
    • Traget URL- This url is where the customers will be redirected on clicking the Push Notification.
    • Icon- The repersentative image related to the notification.

    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.

    Chrome browser view

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

    Add to home screen

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

    Enter name for home screen

    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.

    Launch application

    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.

    Splash screen

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

    PWA homepage

    If a user selects the option to browse categories then the category list will be displayed as below image.

    PWA Category view

    Push Notification

    The customer in addition can also visualize the notification in the frontend as in the below image.

    notification

    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.1

    Supported Framework Version - 2.x.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 received your message and our expert will get back to you shortly.
    Send Again
    Close

    Table of Content

    Hide Index