Magento PWA: Everything You Need to Know

magento pwa
Last updated Dec 7, 2020

Magento introduced the most awaited version, Magento 2.3, on 28th November 2018. This version has introduced a ton of new features and a lot of smaller optimizations. But the most awaited feature is Magento Progressive Web App (PWA) Studio.

Major Features Introduced in Magento 2.3:

  1. Progressive Web App (PWA) Studio
  2. PHP 7.2 Support
  3. Page Builder
  4. WYSIWYG Upgrade
  5. Cache-Management
  6. GraphQL Support
  7. Elasticsearch
  8. Declarative DB Schema
  9. Asynchronous and Bulk Web API
  10. Multi-Source Inventory (MSI)
  11. Google reCAPTCHA and Two Factor Authentication

It’s necessary to keep up with the industry trends and innovations to stay ahead of your competitors. Let’s dive in…

What is PWA?

Before we start with Magento PWA, you should know what PWA means.
PWA or Progressive Web App is a web application that uses better design patterns or modern web technologies to provide a fast, reliable, and engaging user experience.

pwa

Features of a Basic PWA Website

  1. Fast: A PWA site uses a variety of performance optimization strategies to load content faster and provide a responsive experience, even on slow networks.
  2. Cross-browser compatible: PWA sites work equally well on all modern browsers like Chrome, Safari, Firefox, Edge etc.
  3. Secure: Uses HTTPS connections for better security.
  4. Responsive: PWA sites have responsive design strategies that provide a consistent experience on pc, tablet, and mobiles.
  5. Mobile “Install”: You can add PWA sites to home screens and receive Push notifications from the site.
  6. Offline Mode: These sites cache content to help serve some content to the user when offline.
  7. Shareable content: There’s a unique URL for each page in a PWA site which can be shared with other apps or social media.

For more information about PWA, you can watch this:

What is Magento PWA Studio?

It is a set of tools for developers that allow them to develop, deploy, and maintain a PWA storefront on top of Magento 2. It uses modern tools and libraries like Webpack, Redus, GraphQL, and React to help improve performance and enhance extensibility.

You can use the following tools provided by Magento PWA Studio:

  1. PWA Buildpack: Main build and development tools for Magento PWA store
  2. Peregrine: It’s a collection of UI components
  3. Venia Storefront: Magento 2 storefront

Using Magento PWA Studio to Set Up PWA Website

Prerequisites:

  1. Make sure the version of Node.js is greater than or equal to 10.14.1 LTS
  2. The version of NPM is greater than or equal to 5.0.0
  3. Yarn version greater than or equal to 1.13.0
  4. Python 2.7
  5. Running Magento 2.3 instance. [If you don’t have it, simply download Magento, extract it to your localhost directory and complete the Magento setup.]

Step 1: Clone the PWA Studio Repository

Clone the repository into your development environment.

git clone https://github.com/magento-research/pwa-studio.git

Note: Location is /Users/magedev/pwa-studio directory

Step 2: Install Project Dependencies

You now need to install PWA Studio dependencies. In the PWA Studio project’s root directory, run:

yarn install

Note: If you have an existing node_modules directory, remove it to prevent installation errors.

Step 3: Specify the Backend Server

Under the packages/venia-concept directory, copy .env.dist into a new .env file.

Example: cp packages/venia-concept/.env.dist packages/venia-concept/.env

In the .env file, set the value of MAGENTO_BACKEND_URL to the URL of a running Magento instance.

Choosing the Magento 2.3 backend:

The currently recommended Magento version to use with PWA Studio is 2.3.0 which can be installed via composer. Although the Venia Storefront can run on top of any Magento 2.3 instance.

Example: composer create-project –repository=https://repo.magento.com/magento/project-community-edition:2.3.0

You can use the default cloud instance or set up your own local development instance.

Step 4: Install Sample Data

The Venia Storefront looks the best when you’ve downloaded the sample data into your Magento 2 development instance.

4.1. Copy or create the data

Copy the following into the root directory of your Magento instance:

packages/venia-concept/deployVeniaSampleData.sh 

4.2. Execute the deploy script

bash deployVeniaSampleData.sh

4.3. Install sample module

bin/magento setup:upgrade

4.4. Reindex the new data

bin/magento indexer:reindex

4.5. Verify installation

Go to the Admin section and verify the sample data installation.

Magento PWA

Step 5: Start the server

5.1. Build artifacts: Run the following command in the project root directory:

yarn run build

5.2. Run the server:

yarn run watch:venia  

5.3. Run the storefront development environment:

The following command runs the full PWA Studio developer experience which includes concurrent Buildpack/Peregrine rebuilds and Venia hot-reloading.

yarn run watch:all 

The following command generates build artifacts and runs the staging environment.

yarn run build & yarn run stage:venia

5.4. Go to the application

Once the development server is up and running, look for something similar in the terminal output:

PWADevServer ready at https://magento-venia.local.pwadev:8001
Or 
Launching staging server…
https://magento-venia.local.pwadev:51828/
Staging server running at the address above.

This is your PWA frontend address. You have now installed a development environment for the Venia storefront project.

Alternatives to Magento PWA

By now, it is quite clear that PWA Studio is crucial in revolutionizing the implementation of eCommerce storefronts. Apart from the Magento PWA Studio, there are some innovative PWA alternatives built by third-party developers. Some of these are:

1. Magento 2 NexPWA

NexPWA is a PWA for Magento that’s built for high scale and serious eCommerce merchants. Easier to deploy, NexPWA has advanced features and controls along with the standard features like:

  • A/B Testing
  • Magento Checkout
  • Built-in Integrations,
  • RTL Layouts
  • Offline Browsing
  • Dynamic Rendering, and more.

Demo Store: https://demo.nexpwa.com

2. ScandiPWA

Built by the Latvian agency Scandiweb and maintained by partners and the open-source community, ScandiPWA uses ReactJS and is built as a theme for Magento 2. It is one of the most advanced PWA themes, some of its features include:

  • Full Purchase Flow
  • Multi-Store Setup
  • Elastic Search
  • SEO Settings
  • Multiple Languages
  • Smart Caching Layer for Faster Loading

Demo Store: https://demo.scandipwa.com

3. Magento 2 PWA Studio – Tigren

This theme is based on Magento 2 PWA Studio, GraphQL and ReactJS. Tigren’s PWA includes features that are far better than the Venia demo and has perfect app-like experience. Some of the features are:

  • Faster Speed
  • App-like UI including push notifications, full-screen mode.
  • Low Storage Space Needed
  • Easy to Update
  • Background Sync

Conclusion

Having a fast Magento store is important to win over your customers, be ahead of the competition, and boost sales. After optimized Magento hosting, installing Magento PWA store is a step forward.

  •  
  •  
  •  
  •  
  •  
  •  

6 Comments

  1. Manohara

    Despite PWA offers amazing features, speed, offline support etc, one draw of PWA is when the store is offline and you want to pay the upfront because you hate cash-on-delivery option, then that is complex.

    Hope Magento finds a solution to fix this too.

    Reply
    • Sahil Chugh

      Hi Manohara. I am sure Magento would look into these PWA issues very soon.

      Reply
    • MJ

      How would this be handled in a scenario where PWA is not involved? Native apps for instance.

      Reply
  2. Akhilesh Chourey

    Hi,
    Thank you for your blog.
    I have configured the PWA on local and PWA URL is generated successfully and working fine on my local machine. When I followed the same steps on server then is generate url for PWA successfully but when I try to access this URL from my machine’s browser then it shows 404 (not working). It seems this url can be access only on the machine on which pwa is configured i.e. URL is not public.
    Do we need to configure or follow some additional request?
    Thanks in advance.

    Reply
  3. ng

    hello, I don’t have .env.dist in venia-concept

    Reply
  4. Marcus Loughran

    The blog is excellent, I recommend it to everyone I know!

    Reply

Submit a Comment

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