Before discussing How to integrate PWA in Magento 2, here is a quick preview about what is PWA (Progressive Web App).
PWA, it is the next big thing that tech-savvy customers who are into digital commerce have adopted and taken advantage of it to provide a native app-like experience to their end-users while browsing. Progressive Web Application (PWA) uses web browser compatibility to provide an app-like feel to the users. Basically, PWA is a web technology, using widely by web and mobile app development companies or developers to build a website that acts and feels like a native mobile application.
Progressive web application development is cost-effective, fast and easier. An individual can easily create, test and maintain progressive web applications. Progressive Web Apps are light, fast, and require less memory. It also supports push notification, work in offline mode, load on the home screen, etc.
Magento in its latest version has introduced Magento 2.3.3 PWA Studio which is a set of developer tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2. These development tools for a Magento PWA are quite enough to build PWA.
Tons of reasons why PWA studio has become the choice of small and large companies-
Here are some of the reasons why Integrate PWA in Magento 2 and how could you make your reach to the end-users.
- Offline mode
- High Speed
- Push Notification
- Require Less Memory
- Device Compatibility
- Easy Installation
- Require No Update
- No App Downloading
The Magento PWA Studio provides the following tools-
PWA Buildpack is a development tool and library which plays an important role in Magento Progressive Web App development. Magento developers can use this tool to set up and configure a local environment for PWA development.
peregrine is used to create appealing Magento PWA storefront. Basically, it’s a collection of UI components for Magento PWA projects that can be used to craft unique storefront.
Venia storefront/PWA storefront
Venia storefront, it is considered as a proof-of-concept PWA built using PWA Studio which helps to create Magento storefront by utilizing PWA Studio tools.
Prerequisites for PWA in Magento 2
It is very important to have the following prerequisites before you start integrating PWA in Magento 2-
- NodeJS should be greater than or equal to 10.14.1
- NPM Version should be greater than or equal to 5.0.0
- Yarn version should be greater than or equal to 1.13.0
- Python 2.7
- Running instance of Magento 2 website.
You should also have a good knowledge of the following things-
- React and Redux
- js and NPM
After the above components and packages are successfully installed on your machine, carefully follow the steps one by one and make sure it doesn’t return any errors.
Steps of PWA Integration in Magento 2-
Step 1- Clone the PWA Studio Repository
|1||git clone https://github.com/magento-research/pwa-studio.git|
Note: Clone the repository- Location- document folder- is /Users/Endive/pwa-studio directory
Step 2- Install PWA Studio dependencies
Installation of PWA Studio dependencies is required. In the PWA Studio project’s root directory, run:
Step 3- Specify the Magento backend server
Follow Magento root directory- packages/venia-concept directory, copy .env.dist into a new .env file.
Open the .env file, set the value of MAGENTO_BACKEND_URL to the URL of a running Magento instance.
Choosing the Magento 2.3 backend:
Use Magento 2.3.0 with PWA studio that can be installed via composer.
Step 4- Start the server
4.1. Build the application artifacts
|1||yarn run build|
4.2. Run the server
|1||yarn run watch:venia|
4.3. Run the storefront development environment-
|1||yarn run watch:all|
4.4. Go to the application-
When the development server is up and in running condition, you will get the following link which can be copied and viewed in the browser.
|1||PWADevServer ready at https://magento-venia.local.pwadev:8001|
Launching staging server…
Staging server running at the address above.
Now your PWA storefront is ready given above. You can also go with the old address to access the Admin section of Magento, but for PWA development on the frontend, use this new address.
Thus the PWA proof of concept store is set up.
Looking at the increasing number of mobile users, various companies or startups are planning to build progressive Web Applications for their business. We have discussed all the features and facts that are in favor of Magento 2 and PWA. If you are running an online business and can’t afford to have mobile applications on both platforms iOS and Android, then progressive web app development is the right choice to win over them.