Build Progressive Web Apps (PWAs) for your e-commerce store by combining the latest web app technologies and deliver a mobile app experience similar to native applications.
OverviewBack to top
Note: In order to use this module, you need to have Firebase Project Credentials/ API Keys which will be used in the module configuration.
Firebase is a development platform for mobile and web which provides an API that allows application data to be synchronized across clients and Firebase's cloud. Firebase is developed by Firebase, Inc and now owned by Google. Firebase Realtime Database lets you store and sync between your users in real-time. The Realtime Database is one big JSON object that the developers can manage in real-time. With just a single API, the Firebase database provides your app with both the current value of the data and any updates to that data. It also helps you to send push notification to the user’s mobile to drive user re-engagement and retention.
The Progressive Web Application extension converts your e-commerce website into a PWA app. This allows customers to download and install the PWA on their smartphones without the hassle of app marketplaces like Google Play and Apple Store. PWA delivers an app-like experience to users using modern web technologies. Customers can easily add PWA to the mobile home screen and experience the seamless possibilities of a progressive web application. The admin can configure the app name, app icon, splash screen background color, and theme color. Moreover, the admin can send push notifications on PWA.
Let's take a scenario wherein the customers want to enjoy the fast and smooth experience from your website. But, sometimes due to some poor network connection, they are not able to access your store. In this situation, Progressive Web Application allows the store owners to turn their store into a PWA and let the users enjoy a fast and smooth experience on your website even with poor internet speed. Thus, when a customer opens your website on his mobile browser, the customer can add your website to the mobile home screen.
Now the customer can tap the PWA icon of your website to experience the power of progressive web app. The website will soon launch just like a native application without being installed on the customer’s mobile phone. Using this module, the admin can easily configure the module from the backend. The admin can upload the app icon, splash background color, decide the app name, send a push notification, and set the theme color. Now it will convert your website into a progressive web application.
Account & Pricing
The store owner can send the push notification to PWA (Progressive Web Application) from the admin panel. To send these push notification the admin requires API credentials from the Firebase. Firebase is a technology that permits you to make web applications with no server-side programming so that development turns out to be quicker and more comfortable.
You may check Firebase pricing here. There are three pricing plans available, and you can choose anyone according to the needs:
- Spark Plan - Free
- Flame Plan - $25/month
- Blaze Plan - Pay as you go (calculate pricing for apps at scale)
- 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.
- PWA looks and feels like a native application.
- Users do not need to update the progressive web application.
- No app store requires managing the application.
- Increases user engagement in the store.
- Increases store revenue due to user engagement.
- The admin can enter the application name.
- Admin can upload and change the application icon.
- The admin can also change the splash background color of the Progressive Web Application.
- Admin can set the theme color of the Progressive Web Application.
How Progressive Web Application Works?
The admin can easily configure the module from the admin panel. The admin will need API keys to push the notification to the PWA. To generate these keys, visit Firebase and create a new project and then follow the steps. Now, after creating your new project, click on the storage, and create a new bucket and can also find the default bucket here. After creating bucket now go to the menu and select project settings option, a new settings page will be opened. In the general tab, find the project Id, web API key, etc. under the setting page. Now register an app by clicking on the close tag button, and this will add a Firebase to the web app.
After successful registration, you can get the credentials required for the module configuration. Now, from the cloud messaging tab, you will find the project credentials. Save the Server Key and Sender ID, Web Push Certificates/ Public Key. These credentials will be used in the module configuration. The admin can fill the required details in the module configuration and then save the changes.
When a user will open your PWA enabled website on the mobile browser, a pop-up will display to the user. The user can allow the notification permissions to receive the push notifications via PWA. Now, the user can click on the add to home screen button near to the cart button as a plus sign or also can add the app to the home screen by clicking on the add to home screen button on the bottom of the webpage. After clicking on this, it will ask the customer to add the app on the home screen. The customer can click on the add button to add the PWA to the mobile home screen.
Now tap the created PWA icon to experience the power of progressive web app. The website will soon launch just like a native application with a splash screen. The customer can now use the PWA just like a native app and purchase the admin products within the PWA.
Store Owner Benefits
- The cheapest and fastest way to build a mobile app for your e-commerce website.
- No need to publish the application on Google Play or App Store.
- The PWA will allow more user engagement apart from the native application, thus increasing the sales conversions.
- You can customize the app name, upload & change the app icon, set the splash background, and theme of the PWA according to your store theme.
- Send the push notifications to the customers and keep them engaged. The admin can send the promotional offers, coupons codes, or discount information directly on the PWA.
- Customers get the comfort and ease of access to shop on mobile.
- No need to install the app from Google Play or App Store, as it can be easily downloaded from the mobile web browsers.
- It takes less storage space as compared to native applications.
- Works similar to a native app giving them a richer app experience.
- Poor network connection support.
You can check live demo from here
Release NotesBack to top
- Compatible with Open Source (CE) : 2.3
- Stability: Stable Build
- Fixed Bugs
- Compatible with Open Source (CE) : 2.1
- Stability: Stable Build
+ Allowed to support Progressive Web Application for your website.
+ Enable and disable application from configuration setting.
+ Admin can upload Progressive Web Application icon.
+ Admin can set name and splash background color for Progressive Web Application.