Progressive Web Applications are modern websites built using web technologies but that act and feels like an app.
OverviewBack to top
A Progressive Web App (PWA) is a web app that uses modern web technologies to deliver an app-like experience to the users. Using a PWA you can allow the customers to keep the app without the hassle of an app store. This means that now there is no need to install the application on your mobile, you just have to add the website shortcut to your mobile home screen and when you tap it you can experience the seamless possibilities of a progressive web application.
After the installation of this module, whenever a customer browses your(admin's) website on their mobile phone they will experience the PWA. To experience the PWA, the customer will have to add a shortcut of the website to their mobile home screen. Now when the customer will click on this shortcut, the website will open as an application rather than in a web browser. The admin can configure the app name, add an app icon, set the splash screen background color, set the page background color, set the header and font color for the progressive web application. The admin can also add/edit or delete and send push notifications by the click of a button.
Note - You need certain API keys to push the notifications. To generate these keys, visit Firebase and create a new project.
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 easier. With Firebase, we don't have to stress over-provisioning servers or building REST APIs with just a little bit of configuration; we can give Firebase a chance to take every necessary step: storing data, verifying users, and implementing access rules. Applications using Firebase can just use and control data, without having to think about how data would be stored, and synchronized across various examples of the application in real time.
You may check Firebase Pricing here. There is a free starter plan and paid plans start at $25/month.
Use Case of Progressive Web Application -
After the installation of this module it will convert your website into a progressive web app. The admin can customize his PWA by adding Push notifications, app name, app icon, splash screen background color, page background color, header and font color.
After the successful installation of the module now when a customer opens your website on his mobile browser he can add the shortcut of your website to his mobile home screen. Now tap this shortcut to experience the power of progressive web app. The website will now launch just like a native application without it being installed your mobile phone.
Features of 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 required 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.
Workflow of Progressive Web Application -
You need certain API keys to push the notifications. To generate these keys, visit Firebase and create a new project. Click on the setting icons and then open Project settings. Navigate to the CLOUD MESSAGING tab and note down your Server key and the Sender ID.
After the successful installation of the module, the admin will navigate through Stores-> Configuration to configure the module for use. Here, the admin can enable or disable the module, set the application name, set the app short name, enter the sender Id and the server key, add the icon for the application, and set the splash background color for the application.
Now when a customer opens your website on his mobile browser he can add the shortcut of your website to his mobile home screen. Now tap this shortcut to experience the power of progressive web app. The website will now launch just like a native application without it being installed your mobile phone.
Benefits of Progressive Web Application -
Admin Benefits -
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, page background color, header and font color of your progressive web application.
Customers Benefits -
Customers will be benefited as now they can experience the power of a progressive web app without the need of installing the native application. Also, when the customer accesses the pwa from their mobile it just opens like a native app giving them a richer app experience.
Demo - You can check the live demo here.
Release NotesBack to top
- Compatible with 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.