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

    Joomla Progressive Web Application (PWA)

    Progressive Web Application (PWA) is the next big thing and one of the most talked about technology shifts in the web development which bring mobile-app-like experiences to your users without requiring them to install an app from the App Store/ Play Store. Since the majority of online shopping traffic comes from mobile, these characteristics make PWAs the perfect solution for retailers trying to drive engagement and revenue.

    So we have launched a PWA plugin for your Joomla stores. With which you can allow the users to add your site to home-screen from the mobile browser. After adding, it acts and feels like an application. This way just by installing and configuring the addon, store admin can launch Progressive Web Application.

    Importance of Progressive Web Application:

    Responsive Web and Native Apps Aren’t Enough. It is a myth that the users will happily download the app for every website they visit frequently.

    Many retailers assume that responsive web design is the best way to optimize their website for mobile. But in reality, using responsive on its own simply reflows content from one device to another. It ignores the expectations of today’s mobile customer for fast speeds, app-like experiences, and the latest features available on their device.

    When responsive doesn’t produce the desired conversion rates, retailers often turn to native apps. While the app experience usually drives higher conversions, native apps are very expensive to build and maintain, and only reach a small audience.  It does not mean that a native application is bad but there are few merits of the progressive web application in comparison to native applications. If you are running a business then you should reach 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 to reach all types of customers you should definitely go for Progressive Web Application.

    In a nutshell, we can brief the benefits of PWA as mentioned below-

    • The website becomes lightning fast.
    • A user-friendly app experience.
    • Supports push notification.
    • No need to download/install.
    • Works fast even on a slow connection.
    • Increases User engagement.
    • Increase conversion rate.

     

    Lighthouse PWA Score

    Features Of Joomla PWA

    • Functionality to set the application name at admin end.
    • Admin can upload and change the application icon.
    • Functionality to set the splash background color of the Progressive Web Application.
    • Option to set the theme color of the Progressive Web Application.
    • The user can be prompted to Add to Home Screen.
    • Admin can set loader to display while navigating in the web app for a more user-friendly application.
    • More user-friendly than a web application.
    • Works lightning fast if compared to the website.
    • Completely responsive on all the platforms.
    • Launches with the low-quality Internet.
    • Looks and feels like a native application.
    • Users do not need to update progressive web application.
    • No app store is required for managing the application.

    How To Upload And Install The Plugin

    Navigate to Extensions->Manage->Install as shown below in the snapshot.

    Install the extension by browsing the zip file of the plugin or simply drag and drop the file as shown below.

    The extension will be installed successfully!

    PWA Configuration

    After installation of the plugin,

    1. Navigate to Extensions-> Plugins and search for the Progressive Web App.
    2. Enable the plugin.
    3. Click to edit the configurable settings of the plugin.


    In the settings, there are 3 sections for PWA configuration (Plugin, Loader Settings, FCM Settings).

    Plugin fields provide options to set:

    1. The Application Name
    2. The Application Short Name
    3. Theme color of the App
    4. Splash Background Color for the App
    5. Images for the manifest file.

    The progressive web app will be installed in the device according to the parameters set here.

    The loader will be displayed when the user navigates on other pages of the app. In Loader Settings, you can enable or disable the loader. If you enable the Loader for the web app, then select the loader type. You can either use the default loader provided in this plugin with the desired color of the loader as shown below

    Or you can use the custom loader as per your choice. Just upload the gif file of the desired loader and save as shown below.

    FCM Settings provided are related to Web Push Notification, In order to use push notifications on your site, you must first install Web Push Notification for Joomla. You can download it from Webkul Store.

    Just enter the FCM sender id here. To know how to get these credentials please click here


    So, just set all these parameters and Save.

    How A Customer Can Install Progressive Web App

    A customer can open the website in a browser of the mobile device. On opening the site, he/she will be asked to add the screen to the home screen as shown below.

    Please note that the screenshots here belong to the chrome browser.

    Click on Add button to add the progressive web application to the home screen.

    After installation, you can see the application icon on the home screen of the mobile like this & just 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.

    This is the view of the home page of the web application.

    That’s how you can use Joomla progressive Web App extension to provide an app like experience to your customers.

    Thank you for reading!

    Support

    That’s all for the plugin, still, have any issue, feel free to write here http://webkul.uvdesk.com  and let us know your views to make the module better.

    Current Product Version - 1.0

    Supported Framework Version - Joomla3.x

    . . .

    Comments (2)

    Add Your Comment

  • Aigen Delez
    Does it work on iOS?
    • Gautam Bagchi
      Hi,

      Yes, its work but only on Safari browser and the option “Add to home screen” will not work automatically you have to do that manually. For more details please contact us @ support@webkul.com

  • 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