Published On - November 22,2016

Progressive Web Application For Magento2webkul.com /blog/progressive-web-application-magento2/

Progressive Web Application For Magento2: Progressive Web Applications usesweb compatibilities and provides an application experience to the users. It developsfrom a browser tab and makes pages more immersive with a low friction user experience. The Progressive WebApplication 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 webpresence 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 performancethe 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. And also iOS is not supported withthis module.

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 ornative application. Progressive Web Application also user-friendly if compared to the website and supports the pushnotification. The best part of Progressive Web Application is that a user can use many of the features withoutan internet connection and once the mobile is connected to the internet the data gets synced. In short, you can saythat if you are providing a platform to your user which is user-friendly and faster then it will definitely increase theengagement 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.

Increases User engagement.

Increase conversion rate.

Lighthouse PWA Score

1/17

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 andthen they can open and use the application. According to a study, an application loses 20% of its users on everystep, from search to start using the app feature. However, a user can start using progressive web application assoon as they find the application. There, is no need to search, download and install the application. Also, you needto upgrade the native application with every version of the android. You can check that many of the applications arenot available for the most recent or past very old version of Android. However, the Progressive Web Applicationworks 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 applicationin comparison to native applications. If you are running a business then you should reach to all type of users. If youare using a well – designed native application like Mobikul then it will surely give you a high performance andconsume low data but if you want to reach to all types of customers then you should definitely go for ProgressiveWeb Application.

Features – Progressive Web Application for Magento2

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 require managing the application.

Increases user engagement on the store.

Increases the store revenue due to user engagement.

2/17

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.

After the successful installation you have to run these command on Magento2 root directory- “php bin/magentosetup:upgrade”

Also run this command in the Magento2 Root- “php bin/magento setup:static-content:deploy” You can refer thebelow screenshot.

After running the command, you have to log in to the admin panel and you have to clear the Cache. You can refer tothe below screenshot.

3/17

Creating Firebase Product Credentials

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

4/17

1. After opening Firebase website, please click CREATE NEW PROJECT button as shown in the abovescreenshot.

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

3. After completing the details click CREATE PROJECT button.

5/17

4. After creating your new project click Settings menu icon and select Project Settings option. Please view belowscreenshot. A new Settings page will be opened.

5. After entering the Settings page, click CLOUD MESSAGING tab, here you will find your Project Credentials,copy and save your Server Key and Sender ID as displayed below.

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

6/17

Configuration – Progressive Web Application for Magento2

After installation of the module, admin can configure it by going to Stores > Configuration > Progressive WebApplication. Here, admin can edit application name, icon, background color.

7/17

Push Notification

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

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

8/17

How A Customer Can Use Progressive Web Application for Magento2

When a customer visits the website on a browser of the mobile device, then he will see a pop-up requesting for thepermission to send Push Notification to the customer.

9/17

When a Push Notification is sent, it can be seen like the screenshot shown below.

10/17

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 menu icon of chrome to add the application on the home screen.

11/17

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

12/17

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

13/17

Now the user can see the application icon on the home screen of the mobile like this. A user can click on theapplication to launch it.

14/17

After clicking on the application, the application launches with a splash screen. The splash screen shows theapplication name and icon. The application launches in the same way as the native app.

15/17

After splash screen, a user can see the home screen of the application.

16/17

That’s all for the Progressive Web Application for Magento2 module, still, have any issue feel free to add a ticketand let us know your views to make the module better http://webkul.uvdesk.com/

17/17