Latest news

Progressive Web App Tutorial (For Magento 2)

No comments

What Is A Progressive Web App?

In the last year, the Progressive Web App is still new for many people but in 2017, it has become a hot trend in the world. Some of the famous names applying this new technology and harvesting successes are Alibaba, AliExpress, Lancome and Flipkart. So, what is PWA? In short, it is an impeccable combination of webs and native apps and even more. When the customers visit the store on their browsers, they will be invited to start using the PWA by adding it to the homescreen in a few seconds (no complicated installation required). After that, it will open a world of great app-like experience with lightning load speed, full-screen mode, push notifications and especially offline mode (ability to accessing the web app even under uncertain or no network).

However, building the Progressive Web Apps will take you a lot of time and effort. One of the most feasible solutions is to downloading free our Magento 2 Progressive Web App extension and spend just a few minutes to install it to your store. In this blog post, we will show you how to use this great free extension.


Magento 2 Progressive Web App Tutorial

1. Module Configuration

  • Step 1: Enable the PWA extension in General Settings

Go to the admin panel, navigate to STORES => Configuration => TIGREN => Progressive Web App

(Or: Admin Panel => PROGRESSIVE WEB APP => Settings)

  • Step 2: Complete the Manifest Settings

Firstly, set Short Name, Name, Description, URL & Background Color

magento 2 progressive web apps tutorial

Secondly, set theme color:

Thirdly, choose web app’s display type:

progressive web apps display types
Fourthly, select Screen Orientation & upload App Icon:

  • Step 3: Complete the Push Notification Settings

Firstly, visit the website and click on SIGN IN (a Gmail account is required)

progressive web apps google

Secondly, click on Add project to add a new project (GET STARTED > Add project)

google pwa

Thirdly, click on Add Firebase to your web app:

pwa progressive web apps

Then, let’s copy and paste the snippet in Firebase to the field Add Firebase to Your Web App on Magento backend (green highlight).
Next, let’s copy and paste the messagingSenderId number to the fieldYour Messaging Sender Id on Magento backend (red highlight).
progressive web apps tutorial

Fourthly, copy the Server Key in Firebase & paste it to the field in the configuration:

pwa tutorial

progressive web apps for magento

Fifthly, set topic name (lowercase & no space):

pwa magento

2. Manage Notifications

  • Step 1: Add a new notification

Go to the admin panel, choose Progressive Web App and select Manage Notifications

magento progressive web apps push notification

Add information for the new notification:

progressive web app push notification

  • Step 2: Send the notifications

pwa push notifications

We have shown you a detailed Progressive Web App Tutorial for your Magento store. If you have any problems when following the instruction, please let us know and we can help.



1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
April LeeProgressive Web App Tutorial (For Magento 2)

Related Posts

Leave a Reply

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