Back to Top

Progressive Web Application For Magento 2

Updated 23 April 2024

Magento 2 PWA Extension 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 compared to the website moreover 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, you can click here.

Henceforth, with the use of this feature, the website works faster on a slower internet connection. Due to the faster performance, user engagement increases on the website and results in a very high conversion rate.

Important Note:

Searching for an experienced
Magento 2 Company ?
Find out More
  • This module supports android chrome, opera browsers, and iOS Safari browser.
  • The web push notification is compatible with both Android and iOS(After installing the PWA) devices.

Magento 2 PWA extension supports all Magento 2 (Adobe Commerce) responsive templates/themes as well as Webkul’s Magento 2 Multi Vendor Marketplace module.

Watch the video tutorials below to understand the Magento 2 PWA extension:

VEKzQM6ITg0

What is the need for a 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.

Furthermore, the best part of Progressive Web Application is that a user can use many of the features without an internet connection and 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 user-friendly and faster then it will definitely increase the engagement of the users and increase in sales.

  • The Website becomes lightning fast.
  • More user-friendly.
  • Supports push notification.
  • No need to download/install.
  • Works fast even on a slow connection.
  • Increases User engagement.
  • Boost conversion rate.

Lighthouse PWA Score

PWA

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

However, a user can start using the 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 android. 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 browser compatibility.

Furthermore, we are not at all saying that a native application is bad but these are a few merits of the progressive web application in comparison to native applications.

If you are running a business then you should reach all types of users. If you are using a well–designed native application like Mobikul Magento 2 Mobile App then it will surely give you high performance and consume low data. Although if you want to reach all types of customers then you should definitely go for Progressive Web Application.

Features List

  • More user-friendly than a web application.
  • Works lightning fast if compared to the website.
  • Supports push notifications for Android & iOS(after installing the PWA) devices.
  • 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 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 application name can be entered by the admin.
  • The admin can upload and change the application icon.
  • The splash background color of the Progressive Web Application can also be changed by the admin.
  • The theme color of the PWA can be selected by the admin.
  • Select the orientation of PWA as Any, Natural, Landscape, and Portrait.
  • Select the display type for PWA Fullscreen, Standalone, Minimal UI, and Browser.
  • The admin can upload the splash screen image for iOS.
  • The admin can change the version number when want to refresh the service worker cache.

New Features

  • Workbox Cache Strategies integrated with this module to make quick execution for better performance.
  • Also improves website performance by caching assets in the first-page load. Workbox Background Sync Plugin is an absolute solution for resuming the interrupted network.
  • Workbox Run-Time Caching to collects all the assets during page load and adds to browser cache.
  • Cache Expiration Plugin to put restrictions on a cache and define how long it should allow details to be stored in a cache or how many items should be stored in a cache.
  • A graphical representation of the total number of PWA downloads can be viewed by the admin.
  • Users will be notified of every update on offers, deals, and order status.

Installation – Progressive Web Application

#Download Module

Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

#Upload Folder

The module zip extracts, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:

magento 2 root directory

#Run Commands

You need to run the following commands:

  • composer require minishlink/web-push
  • php bin/magento setup:upgrade
  • php bin/magento setup:di:compile
  • php bin/magento setup:static-content:deploy
  • php bin/magento indexer:reindex
  • php bin/magento cache:flush

Thus, in this way, you can install the module.

Language Translation

For the translation of the module language, navigate through src/app/code/Webkul/Pwa/i18n, and edit the en_US.csv file.

Now, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code like de_DE.csv.

translation

Creating Firebase Product Credentials

To use Progressive Web App for Magento 2, you need to have Firebase Project Credentials. Meanwhile, it is required during module configuration. Please click here and create a new project with your Google account.

1.  After opening the Firebase page. Please create a project by clicking Add project button.

Firebase-console

2. Then, create a new project, enter the name of the project, and click continue.

step1-create-project

The next step will ask you to set up Google Analytics. Let’s go ahead and set it up.

firebase

(Optional) Enable Google Analytics for your project, then follow the prompts to select or create a Google Analytics account, if you don’t want to set google analytics, disable the toggle button or you can click “Continue” and you will be taken to the project home page.

Choose or create new Google Analytics, and click “Create a new Account”.

step2

Finally, select your Google Analytics location (the United States by default) and read and configure the sharing settings. Finally, accept the Google Analytics Terms of Use and create a project. The process only takes a few seconds. When finished, click “Continue” and you will be taken to the project home page.

image-2

3. After creating your new project, click the Settings menu icon. And then select the Project Settings option. Please view the below screenshot. A new Project Settings page will open.

update

4. After entering the Project Settings page, go to the Cloud Messaging tab. Further, from here you will find your Project Credentials. Copy and save your Server Key and Sender ID as shown in the snapshot below.updatefirebase2

5. Moreover, navigate through Project Settings > General will find the other Firebase Project Credentials under web apps. You need to enter these credentials into the admin configuration.

firebase3

Configuration – Progressive Web Application

After the installation of the module, the admin can configure the module settings. For this, the admin will navigate to Stores > Configuration > Progressive Web Application as per the below image.

magento2-pwa-configuration-settings

magento2-pwa-configuration-settings-additional

Settings

  • Status – Enable or disable the module.
  • Application Name – define the application name.
  • Application Short Name – Set the application short name.
  • Web API Key – The admin can get the Web API key from the Firebase in the general tab under the project settings.

M_Id-1

  • Auth Domain FCM – firstly insert the auth domain name here from the firebase web app.
  • FCM Database URL – then enter the FCM database URL here
  • Project Id FCM – after that enter the generated FCM Project ID here.
  • Storage Bucket FCM – now put the FACM storage bucket here.
  • Messaging Sender Id – so the next is place the sender ID here.
  • FCM App Id – thereafter enter the FCM App ID here.
  • Server Key – Server key which is generated using the firebase web app and it can be found in cloud messaging under the project setting.

server-key

  • Public Key – thereafter enter the public key here and it can be found in cloud messaging under the project setting as web push certificates as shown in the image below-

web-push-certificates

  • Measurement Id – Now enter the measurement Id.
  • Application Icon – now upload the application icon. Allowed file types: png
  • Splash Background Color – then set the splash background color.
  • Theme Color – after that select the theme background color.
  • Select Orientation – Select orientation of PWA as Any, Natural, Landscape, and Portrait.
  • Select Display – Select the display type for PWA Fullscreen, Standalone, Minimal UI, and Browser.
  • IOS Splash Screen Image – Upload the Splash Screen Image for iOS. Allowed file types: png and size must be 2048×2732
  • Service Worker Version – Change the version number when want to refresh the service worker cache.

Push Notification

Admin can manage the Push Notifications by going to PWA > Manage PWA Notifications. From here admin can add/edit or delete any push notification. Admin can also enable or disable any push notification and can ‘Push’ the notification message by clicking on Send.

push-notification-magento2-pwa

For adding or editing a Push Notification Message, the admin has to provide the Title, Message Body, Target URL, and the message icon image.

add-magento2-pwa-push-notification

PWA Download Analytics

Now, with this new feature, the store owner can track the downloads and rejections for the PWA for any date. These analytics are shown in the form of a graph to the store owner that makes it very easy to understand.

pwa-menu-options

By using the date filters the admin can view the download analytics for any previous date also. The Blue line on the graph shows the download results whereas the Red dotted line shows the rejected results for the PWA.

pwa-analytics.

How A Customer Can Use Progressive Web Application for Magento2(Adobe Commerce)

A customer can use the Progressive Web Application on both Android and iOS devices.

If the customer is using an Android device:

When a customer visits the website on a browser of a mobile device, then he will see a pop-up requesting permission to send a Push Notification to the customer. When a Push Notification is sent, it can be seen as per the snapshot.

Progressive Web Application allow notification

Progressive Web Application notification

A customer can open the website in a browser on a mobile device. Here we have shown the working on Chrome. Users can see the Add to home screen button (Plus Sign) near the cart, and on the bottom of the page.

The customer can click on the “Plus Sign” button near to the cart or click on the bottom of the webpage to add the app to the home screen. Now a pop window will appear as shown in the image below –

Progressive Web Application add to home screen

Progressive Web Application add app to the homescreen

Application Icon on Homescreen

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 and icon. The application launches in the same way as the native app.

Progressive Web Application launch app

Progressive Web Application splash screen

After the splash screen, a user can see the home screen of the application. The customer can also see all the available products using the PWA app. The customers can click on the product and add the product to the cart same as in the native app.

Progressive Web Application view all products

Progressive Web Application add to cart

After adding the product to the cart, the customer can process it further to checkout and then complete the order.

If the customer is using an iOS device:

A customer can open the website in a browser on a mobile device. Here we have shown the working on Safari. From here customers can click on the menu icon of Safari to add the application on the home screen.

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

Progressive Web-Application-For-Magento-1-1

ProgressWeb-Application-For-Magento-2-1

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.

Progressive Web-Application-For-Magento-3-1

Progressive Web-Application-For-Magento-4

To enable notifications for the app, the user will need to choose allow option as shown in the below image. Users can configure the notifications setting for alerts, sounds, and icon badges. 

If the user does not want any kind of notification, then the user chooses the Don’t Allow option.  

Progressive Web-Application-For-Magento-5-1

Progressive Web-Application-For-Magento-6-1

After, allowing the notifications user will be notified of every update on offer, deal, and order status notification as shown in the below screenshots. 

Progressive Web-Application-For-Magento-7-1

Progressive Web-Application-For-Magento-8-1

The user will also notified when the order status changes from pending to complete. 

ProgressWeb-Application-For-Magento-9-1

 

Support

Thus, that’s all for the Progressive Web Application for Magento 2(Adobe Commerce Cloud) module, still, have any issues feel free to add a ticket and let us know your views to make the module better http://webkul.uvdesk.com/

Current Product Version - 5.0.1-p1

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


1 comments

  • Varun Saini
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content