Progressive Web Apps on Magento and Basic Steps to Setup

If you have been using Magento, you must have certainly come across narratives on PWAs on various community platforms. PWAs or Progressive Web Applications definitely have succeeded as a disruptive solution set to destabilize the duopoly of Android and iOS apps.

Why did the need for PWAs arise in the market?

Customers’ behavior is always changing. And with them being the center of business, there are bound to be some paradigm shifts in the market from time to time. While native apps do enrich user’s experience, they require to be downloaded and installed which uses up a lot of data and memory. This has made users increasingly reluctant to download and use multiple apps.

Progressive web apps are a progression from regular native apps. Their USP is that they offer an amalgamation of the best features of mobile apps as well as websites and therefore are better platforms to invest in.

Companies like Forbes, Lancome, Alibaba, Twitter and many more have developed PWAs, testifying its status as an alternative to native apps.

How to set up a PWA on Magento?

*Note – PWA is supported by Magento 2.3 and above versions. If you are using older versions, you will be required to upgrade to the fore-mentioned version.

To configure PWA on Magento 2, you need to follow the steps mentioned below:

1) Check for the system requirements of Magento 2.3 and set up a new Magento development instance (Recommendation: install Magento through CLI).

2) Check if the Node and Yarn required versions are installed on your development instance.

3) Clone pwa-studio repository from GIT on Magento root directory https://github.com/magento-research/pwa-studio.git.

4) Enter into this directory: cd pwa-studio/.

5) Run yarn install.

6) Copy environment file from pwa-studio/packages/venia-concept.

7) Add/change MAGENTO_BACKEND_URL in.env file.

8) Generate SSL certificate as PWA requires https for secure domain.

9) Copy file VeniaSampleData.sh from pwa-studio/packages/venia-concept/ to Magento root directory.

10) Install Sample data by command: bash deployVeniaSampleData.sh.

11) Run following commands on Magento root:

12) Inside pwa-studio/ use this command for run build: yarn run build.

13) Then use yarn run watch: venia for start the server.

Through these steps, you will get the Launching staging server URL. You can copy this URL and run this project directly in your browser.

To know more about our eCommerce services you can shoot us an email at [email protected] and we’ll get back to you.