PWA
A progressive web app (PWA) is a website that looks and behaves as if it is a mobile app.
PWA websites are fast, secure, responsive, and cross-browser compatible. They are able work offline and act like a native app on mobile.
PWA is a web application which makes use of latest web technologies to make a web application act and feel like a native mobile app.
Why should build PWA?
Faster: Less loading time.
UI: Better user experience.
Offline Mode: Can even check in offline mode.
Cost-effective.
Once PWA is added to home screen, it exactly works like a mobile native app.
Benefits
We can add shortcut icon to our mobile home screen.
We will get push notification of any event on the website even when the browser is not open.
Page load speed of website will be increased.
Cost is much less than native apps to develop and can be implemented using existing web framework.
Consistent experience across browsers.
Customers can use it eve in no or poor internet connectivity.
It always syncs in the background and use caching to maintain offline functionality.
Customer will not have to download any app, so they do not require any Appstore.
As you might know, a Progressive Web App is a web app that applies web capabilities (HTML, CSS, Javascript) to deliver great user experience mimicking native apps. More specifically, PWA can function like a native app with an icon on the mobile home screen, splash page (after opening the app), full-screen display, push notifications, and so on.
All the PWAs must assure three essential criteria: Fast (respond to user interactions nearly instantly), Reliable (be able to work under poor network conditions) and Engaging (deliver smooth app-like experience).
There are some major differences between a PWA and a native app:
- A native app can only run on a certain operating system (iOS or Android) while PWA is powered by mobile browsers and supported on both iOS and Android.
- You must download the native apps from an app store; meanwhile, PWA can be installed quickly after adding to home screen.
- Users must access their app stores to get the latest version of the native apps but refreshing to get PWA updates.
- Since PWA runs right in a web browser, it is easier for store owners to share and promote the PWAs than native apps. PWAs work on-demand without taking up the device’s memory like the native apps
What is the Magento PWA Studio project?
The Magento PWA Studio project is a set of developer tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2.3 and above. It uses modern tools and libraries to create a build system and framework that adheres to the Magento principle of extensibility.
PWA Studio gives you everything you need to create Progressive Web Application (PWA) storefronts powered by Adobe Commerce or Magento Open Source. It provides tools to help you set up a development environment and libraries to create your own storefront components and extensions.
Magento PWA Requirements
To integrate PWA in Magento 2, there are some prerequisite components that need fulfilling:
- Progressive Web App Manifest: Create a manifest file that defines the metadata and configuration for your PWA. The manifest file contains information such as the app’s name, icons, theme color, and other properties.
- Service Workers: Implement service workers, which are JavaScript files responsible for handling caching, offline functionality, and push notifications in a PWA. Service workers enable your PWA to function even when the user is offline or has a weak internet connection.
- Backend GraphQL API: Magento offers a GraphQL API layer that serves as the backend for your PWA. Make sure you have GraphQL functionality enabled and properly configured to integrate PWA in Magento 2.
- Transport Layer Security (TLS): TLS is a cryptographic protocol designed to ensure communication and security between servers and web apps. In fact, customers provide online stores with a ton of personal information, including their names, addresses, and even their card numbers. As a result, using HTTPs connection is necessary to protect customers’ data.
- Pop-up Working Principle: PWAs depend on the pop-up theory of operation in terms of UI/UX. It involves starting a brand-new pop-up for new action. Users can swipe the overlaying page as well as be still on the current pages.
- App Shell Architecture: In case the remainder of your content is loading, the app shell architecture will show a page skeleton. It is what will remain when all dynamic content, or items that change from one page to another, has been eliminated.
What Are Available Methods to Convert a Magento 2 Website To PWA?
There are five options of Magento PWA integration for Magento store owners to consider:
1. Install Magento 2 PWA Extensions
This is the easiest way to add Progressive Web App features to your current Magento website. Now, there are many Magento 2 PWA extensions from different providers (both free and paid) for you to choose from.
- Pros: The cost of Magento 2 PWA modules are affordable (from $0.00 to $150). Also, it takes just a few hours to install those extensions on your site.
- Cons: In general, most of the PWA extensions for Magento 2 are not able to deliver the full features of Progressive Web App. For some modules, they can just perform the “add-to-home screen” and send push notifications while ignoring other essential features such as fast page load speed, offline mode, and background sync. You should not only read what the developers promote module, try their demo and you will see!
2. Take advantage of Magento PWA development services
Without doing everything by yourself, you can have Magento PWA developers implement this task for you. PWA development is an essential and complicated process, so it’s better to hire experienced developers. The cost of hiring them is much cheaper than the cost of making mistakes by yourself.
- Pros: You can spend your time on other essential business aspects, while ensuring that the process is successful.
- Cons: It’s challenging to find a reliable and budget friendly Magento PWA development agency.
Mageplaza is a good option when you look for high-quality and trustworthy Magento PWA development services. Their progressive web application development services maximize user engagement, while combining the best of both web and mobile apps with smooth navigation. Their PWA solutions offer offline compatibility and access even in poor network conditions.
Their Magento PWA development services include:
- Custom progressive app development services
- PWA UX/UI design & optimization
- PWA upgrade/migration
- App shell model
- PWA testing
- PWA maintenance and support
3. Your PWA Using Magento 2 PWA Studio
Magento introduced Magento 2.3 PWA Studio to help us develop, deploy and maintain a PWA storefront for Magento 2 websites.
- Pros: Compared to available Magento 2 PWA extensions, developing your PWA from scratch using Magento 2 PWA Studio is a more comprehensive solution. It will replace your existing Magento storefront with PWA storefront that will be connected to your backend via API.
- Cons: Magento 2 PWA Studio is just a set of tools to support you in PWA development. There is still a long way to go. You can take a look at Venia storefront (PWA Studio demo) that is immensely basic and lack of many Magento default features.
4. Magento 2 PWA Demo
This is Venia storefront as Magento 2 PWA demo:
5. Convert Your Site To PWA Using Magento 2 PWA Theme
Magento 2 PWA Theme is an advanced PWA integration solution, which is based on Magento 2.3 PWA Studio, ReactJS, and GraphQL. It includes two parts: an extensive PWA storefront and built-in API to connect this storefront and Magento backend.
- Pros: Up to now, this seems to be the most potential solution to integrate PWA in Magento 2 website. Firstly, it can deliver all we expect from a PWA: lightning load speed (on both desktop & mobile devices), shortcut on the home screen, splash page, fullscreen display, network independence, background sync, low data consumption, easy update, and so on. Secondly, its PWA storefront demo shows a much better version than the default Venia storefront with a complete layout for all pages of the site. As a result, it will reduce the significant time for your PWA development.
- Cons: Although this Magento 2 PWA Theme meets all criteria of the Progressive Web App as well as provides a great storefront that looks like a normal Magento 2 frontend, you still need to customize the PWA storefront according to your design. Also, if your site has some custom functions or installs some third-party extensions, you will have to check their compatibility with the new storefront and update the API as well.
How to Integrate Progressive Web App (PWA) in Magento 2
STEP-BY-STEP PROCESS TO INSTALL PWA STUDIO IN MAGENTO 2.3
Step 1 – Server Setup for Magento 2
The first step of the Magento 2.3 PWA installation process is to set up the server for Magento 2.
For this, you need to fulfill certain requirements for setting up Magento 2 in the right way.
First, you need to utilize the Nginx for setting up the server.
Magento platform fully supports the Nginx 1.8 and it only requires the latest version of php-fpm for installation.
Now, the installation varies from the operating system to operating system.
In this tutorial, we’ll be assuming Ubuntu 16 operating system to set up the Magento 2 server using Nginx.
Install Nginx
Execute the below command to install the server using Nginx:
apt-get -y install nginx
Install & Configure php-fpm
After installing Nginx, you need to make sure that the Magento platform is working in a full-fledged manner on the server.
Therefore, you will need to use various PHP extensions to make sure the proper functioning of Magento 2 PWA.
Follow the below steps to install and configure php-fpm.
Install php-fpm and php-cli
Execute the following command to install the latest version of PHP 7.2.X:
apt-get -y install php7.2-fpm php7.2-cli
Open php.ini file using the following commands:
vim /etc/php/7.2/fpm/php.ini
vim /etc/php/7.2/cli/php.ini
Edit php.ini files to match the required PHP settings:
memory_limit = 2G
max_execution_time = 1800
zlib.output_compression = On
Now, save all files and close the editor.
Next, you need to start the php-fpm service to ensure proper installation of the server.
Execute the following command to restart the php-fpm service.
systemctl restart php7.2-fpm
Step 2 – Installation & Configuration of Magento 2 on Server
Once you have set up the server, the next step of the process is to install and configure Magento 2 on the Nginx server.
There is a multitude of ways to install Magento 2 on the server, but for this tutorial, we’re going to use the composer for the Magento 2 installation.
Magento 2 Installation using Composer
The primary function of the Composer in the Magento 2 installation process is to effectively manage all Magento 2 components and their dependencies.
Hence, we need to fulfill the following two requirements.
1. Obtain Magento 2 Authentication Key
To obtain the Magento 2 Authentication Key, you need to login to your Magento account and click on the below-given link to get your Magento 2 authentication key.
https://marketplace.magento.com/customer/accessKeys/
2. Get Magento Metapackage
Magento Metapackage is basically responsible for grouping all extensions into one unit that comprises multiple packages.
Please follow the below instructions to get Magento Metapackage:
- Login to your Magento server and switch to Magento File System Owner.
- Navigate to the root directory that you configured as the virtual host docroot.
- Use the following command to create a Composer project for either Magento open-source or Magento community edition.
composer create-project –repository=https://repo.magento.com/ magento/project-community-edition:2.3.1 magento2.3.1
If you face any error while creating the Composer project, it might be due to typo errors in your command. However, if you’ve double-checked the command and think it’s right, then you should hire Magento Development Agency for help.
Step 3 – Install Yarn
Yarn basically stands for Yet Another Resource Negotiator. Developed by Facebook, Yarn is an extremely efficient packet manager that lets you share code with other developers.
When compared to npm, Yarn is more secure and reliable. It is because codes in Yarn are generally shared through packages, which are also being called modules.
Steps to Install Yarn
Like Magento 2, there are many ways to install Yarn. But since we’re using Ubuntu as the operating system, we will be installing Yarn through the Debian package repository.
Execute the below command to configure the Debian repository:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -echo “deb https://dl.yarnpkg.com/debian/ stable main” | sudo tee /etc/apt/sources.list.d/yarn.list
NOTE: If you’re using Ubuntu 16.04 or a below version, it is compulsory to configure the source code repository by using the command below.
sudo apt-get update && sudo apt-get install yarn
One more thing you need to remember is that Yarn may or may not be located in your path. Therefore, it is recommended to verify and add the path so that you can run it without any interruption.
Path Setup for Yarn
Add the following command to your profile, which can be in .bash_profile, .profile, .bashrc, etc.
export PATH=”$PATH:/opt/yarn-[version]/bin”
Next, you need to test if Yarn is installed properly or not.
To test the Yarn installation, execute the following command:
yarn –version
If you face any error or issue during the installation of Yarn, we highly recommend looking into GitHub for possible solutions.
Step 4 – PWA Installation in Magento 2.3
We’ve now finally reached the main step of the process, which is the PWA installation.
Here, we will use the Venia storefront in PWA installation as it can run quite seamlessly on our configured Magento 2 backend.
However, we will have to first install the Venia PWA storefront.
Follow the below-mentioned steps to install the Venia PWA storefront in Magento 2.3.
Requirements for Setting Up Venia PWA Storefront
Please fulfill the following requirements to install the Venia PWA storefront.
- Yarn > Version 1.13.0
- NodeJs > Version 10.14.1
- Functioning Magento 2.3 Setup
Steps to Install Venia Storefront
- Clone PWA-Studio Repository
To install the Venia Storefront, you have to clone the PWA-Studio repository in Magento 2.3 development environment by executing the following command.
git clone https://github.com/magento-research/pwa-studio.git
2. Install Project Dependencies
Execute the following command in the Magento PWA root directory to install PWA project dependencies.
yarn install
3. Get SSL Certificate
Next, we need to generate a secure and trusted SSL certificate for our Venia storefront.
yarn buildpack create-custom-origin packages/venia-concept
4. Create & Update .env file in PWA
To create .env file, we need to execute create-env-file subcommand with the build CLI tool.
This subcommand will help to create packages/venia-concept/.env from which we can set value for MAGENTO_BACKEND_URL.
MAGENTO_BACKEND_URL=”https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/” yarn buildpack create-env-file packages/venia-concept
Step 5 – Start The Server
Build Artifacts
Use the command given below to generate build artifacts for the Venia storefront.
yarn run build
Run The Server
There are multiple ways to run the server. Below, we’ve shared 3 different command options to run the server.
yarn run watch:venia
The above command will start the Venia storefront development environment.
yarn run watch:all
The above command will run PWA developer experience along with hot-reloading and concurrent build pack rebuilds.
yarn run build && yarn run stage:venia
The above command will generate build artifacts and run the staging environment.
Step 6 – Setup Nginx Reverse Proxy
After the server is ready, it is critical to set up Nginx HTTPS reverse proxy for taking clients’ requests, pass them to different servers, and deliver server-level response to the clients.
location / {
proxy_pass http://127.0.0.1:8080; (Because we are using personally hosted web server)
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
CONCLUSION
So, there you have it! The complete step-by-step process to install PWA studio in Magento 2.3.
The process may seem difficult and lengthy at first but know that MageDelight Magento 2 PWA Solution is a one-time investment that has proven to yield positive results in the long run for any kind of eCommerce business.
So, we highly recommend transforming your existing Magento 2 store into a Magento PWA to gain a competitive advantage and grow your business in the coming years.