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
Secondly, set theme color:
Thirdly, choose web app’s display type:
Fourthly, select Screen Orientation & upload App Icon:
- Step 3: Complete the Push Notification Settings
Firstly, visit the website firebase.google.com and click on SIGN IN (a Gmail account is required)
Secondly, click on Add project to add a new project (GET STARTED > Add project)
Thirdly, click on Add Firebase to your web app:
Fourthly, copy the Server Key in Firebase & paste it to the field in the configuration:
Fifthly, set topic name (lowercase & no space):
2. Manage Notifications
- Step 1: Add a new notification
Go to the admin panel, choose Progressive Web App and select Manage Notifications
Add information for the new notification:
- Step 2: Send the 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.