1. General Understandings of Progressive Web App for Magento 2
What is Progressive Web App for Magento 2?
As you might know, the Progressive Web Application technology has appeared as a new trend in the recent years. While the mobile webs and mobile apps aren’t able to fulfill customers’ needs and suits with store owners’ financial ability, building a PWA seems to be more feasible. Firstly, since the PWA still run on browsers but deliver app-like experience for the users, it can handle the disadvantages of both traditional webs or native apps. Secondly, the cost of building a PWA is more affordable than creating a mobile app.
In this October, Tigren has released a great FREE Progressive Web Application extension for Magento 2. Therefore, if your store is Magento based, you can easily acquire this modern technology without spending a penny.
Why should I use Magento 2 Progressive Web App?
By using our Magento 2 Progressive Web Application, you will bring about the best experience for all of your customers, especially for whom prefer mobile shopping. More specifically, they will enjoy fast loading speed, full-screen mode, push notification and offline feature. Compared to the native apps, it’s much easier to persuade your customers to create an app shortcut on their homescreen.
There are also an array of benefits from using Magento PWA, you can find out more here.
How can I download the Progressive Web App extension for Magento 2?
You can easily download FREE the Magento 2 PWA extension at our Magento store. Then, let’s spend few more minutes to install the module.
Can I view demos of this Magento PWA module?
Why not? Here are the Front-end and Back-end demo of the Magento PWA module. It’s noted that you should open the Front-end demo in your mobile devices in order to experience full features of the extension. (Back-end account: admin – Admin123$)
2. Highlights of Progressive Web App for Magento 2
- 5 seconds to add a shortcut on homescreen
- Great app-like experience
- Full-screen mode and responsive design
- Lightning load speed
- Push notifications (when the browser & app are closed)
- Offline mode (allow opening the app without network connections)
- Good for SEO (be shareable)
- High security (HTTPs)
3. Full of Progressive Web App for Magento 2 Features
- Set the theme and background color for the web app
- Select among 4 different display types: Web Page, Minimal UI, Standalone App, and Full-screen App
- Choose screen orientation for the web app (portrait, landscape)
- Upload App icon and set icon size
- Set web app name displayed on the homescreen
- Create push notification (icon, title, body and link)
- Send notifications by 1 click from the back-end
- Compatible Browsers – Chrome, Firefox and Opera
4. Conditions for Building Progressive Web App for Magento 2
In order to converting your current website to the Progressive Web Application, your site must be served over HTTPs. This condition is set with the aim of avoiding any dangerous content intrusion.
5. Magento 2 Progressive Web App Installation
Overall, it takes you just 5 minutes to install the Magento 2 PWA extension successfully. Firstly, let’s move the app folder to the Magento 2 root folder as the following:
Secondly, please run these following commands in turn:
Thirdly, you must access to the admin panel so as to flush the cache.
6. Magento 2 Progressive Web App Setup
- General Settings
- Manifest Settings
- Push Notification Settings
+) Add Firebase to your Web App
Go to the page firebase.google.com and Sign In (You must have a Gmail account)
Add New Project (Click on GET STARTED => Add project)
Create a Project & Add Firebase to your web app
Copy the snippet in Firebase & paste it to Add Firebase to Your Web App (green) & Copy messagingSenderId number & paste it to Your Messaging Sender Id (red)
+) Firebase Cloud Message Server Key
Add Topic Name & Save Config
+) Create a new Progressive Web App push notification
+) Send push notifications
7. Evaluation Tool for Magento 2 Progressive Web App
In order to evaluate your Progressive Web App performance, you can use the Lighthouse extension of Google.
First, you must download the Lighthouse Extension & add it to your Chrome browser.
Then, go to your PWA page, click on the Lighthouse icon on the browser and tap Generate Report:
Finally, check the result.
8. Customers Guideline on Progressive Web App for Magento 2
When the customers visit your site on their browser, they will be invited to receive notifications and add your PWA to their homescreen.
Here is the PWA shortcut on the customer’s homescreen and push notification:
Another thing that might be useful for the users is that they are allowed to access some certain pages in your site even when there is poor or no network connection as long as they visited those pages before.
Last but not least, we want to say that the Progressive Web App for Magento 2 is one of the greatest free extensions at Tigren Magento store. Let’s start using this amazing plugin so as to bring about the best experience to your customers and stimulate their purchases in your site.