Latest news

Progressive Web App for Magento 2 – Everything You Need To Know

3 comments

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:

magento progressive web app installation

Secondly, please run these following commands in turn:

progressive web app magento installation

magento 2 progressive web app installation

magento progressive web app installation guide

Thirdly, you must access to the admin panel so as to flush the cache.

6. Magento 2 Progressive Web App Setup

Module Configuration

  • General Settings

progressive web app magento tutorial

 

  • Manifest Settings

magento 2 progressive web app tutorial

progressive web app manifest settings

progressive web app magento setupmagento progressive web app tutorial

  • 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)

progressive web app firebase google

Add New Project (Click on GET STARTED => Add project)

create firebase google for progressive web app for magento 2

magento 2 pwa google

Create a Project & Add Firebase to your web app

google pwa for magento

pwa progressive web apps magento

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)

magento 2 progressive web apps tutorial

magento progressive web app

+) Firebase Cloud Message Server Key

magento pwa tutorial

progressive web apps for magentomagento progressive web apps extension

Add Topic Name & Save Config

magento progresive web app push notifications

Manage Notifications

magento 2 pwa push notifications

+) Create a new Progressive Web App push notification

progressive web app push notification magento

+) Send push notifications

magento pwa 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.

progressive web app lighthouse

Then, go to your PWA page, click on the Lighthouse icon on the browser and tap Generate Report:

progressive web app performance lighthouse

Finally, check the result.

evaluate progressive web app for magento 2 performance

 

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.

magento progressive web app example

Here is the PWA shortcut on the customer’s homescreen and push notification:

magento progressive web app demo

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.

DOWNLOAD FREE PROGRESSIVE WEB APP FOR MAGENTO 2 NOW!

 

See More:

Happy Halloween 2017: 30% Off All Magento Extensions

Successful Examples of Progressive Web Apps (PWAs)

Progressive Web App Demo (For Magento 2)

Progressive Web App Tutorial (For Magento 2)

Magento 2 Progressive Web Apps: Do Advantages Outweigh Disadvantages?

What Is The Role Of Progressive Web Application In Improving Your SEO?

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...
April LeeProgressive Web App for Magento 2 – Everything You Need To Know

Related Posts

3 comments

Join the conversation
  • Grayson - October 25, 2017 reply

    A very detailed explanation and user guide of the Progressive web app for Magento 2 extension!

  • Muhammad - October 27, 2017 reply

    Your magento progressive web app is what I’m looking for! Thanks.

  • Jayce - October 28, 2017 reply

    This seems to be a good Magento progressive web app extension. I will give it a try.

Leave a Reply

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