What is Progressive Web Apps ?
This answer also covers - Installation of Magento 2.3 with PWA
Let's take an example of Flipkart
Flipkart, India’s largest e-commerce site, decided to combine their web presence and native app into a Progressive Web Application that has resulted in a 70% increase in conversions
New Progressive Web App helps Flipkart boost conversions 70%
Flipkart also works on Offline mode
BUT... BUT... BUT...
What is the Magento PWA Studio?
The Magento PWA Studio project provides the following tools:
Buildpack is a set of Webpack plugins and tools which is used for development of Magento PWA themes.
It is also used to setup and configure local development environment for Magento 2 platform.
It contains the following tools:
Peregrine - Peregrine is a set of React components created to handle Magento-specific functionalities like routing, root-components, layout handler, product lists, price display, etc.
Venia theme - venia-concept is a demo theme created by Magento using the Magento PWA studio. It showcases all currently available functionality, workflow and pages
PWA Studio is NOT
A New release of Magento
A Replacement of all front-end
A Desktop Application
Tools & Libraries used in PWA Studios
Total size is bigger (i. e. dashboard content is in dashboard-1234.js and 4567.js)
App takes longer to be offline ready.
Initial load requests only two files: login.html, login-2345.js
Initial load needs to load: Shell + content
The shell + content is visible earlier than with App Shell approach.
A hybrid approach can be used where shell and content is separated in two requests (see admin page as example). This makes sense when content is much bigger than shell and shell should be visible earlier.
GraphQL in Magento
Authentication and Schema
Reducing amount of Front-end Queries
Desktop Browser compatibility
Mobile Browser compatibility
Not supported: Android Webview, IE, Safari
PWAs are More Secure
PWA - Offline Mode
offline Wikipedia application is a good example of a PWA that uses an app shell model.
Progressive Web App is the future of web development without any doubt. In the future, e-commerce sites, restaurants, and media sources will transition from native app to Progressive Web App. However, still in the initial phase, many of the developers would be actively looking for ways to make most out of the opportunities given by PWAs.
Lets start with Magento 2.3 installation with PWA
1. Enter the following command in DIR /var/www/html/ (m203 is my Magento 2.3 directory):
composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203
2. Install Magento by Command Line:
bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --firstname.lastname@example.org --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1
3. Create base pwa theme which will be the parent them for PWA Venia theme.
4. Create directory app/design/frontend/Magento/pwa and copy all files and directories of base theme here.
Lets check base theme is available or not.
Run: php bin/magento setup:upgrade
5. Download PWA studio project.
6. Navigate to your Magento installation’s root directory and create a Pwa symlink folder linking to the project’s module directory(pwa-studio/packages/pwa-module).
from this directory i ran my command - /var/www/html/m230
This is a directory where my pwa downloaded source is /var/www/html/PWA/
ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa
7. Link theme directory as well.Navigate to your Magento installation’s root directory and create a Pwa symlink folder linking to the project’s module directory(pwa-studio/packages/venia-concept).
ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia
8. Now navigate to your pwa-studio project’s venia-concept directory, copy .env.dist into a new .env file and update the variables with the URL to your Magento development store.
cd /var/www/html/PWA/pwa-studio-master/packages/venia-conceptcp .env.dist .env
9. Install venia theme and Pwa Module:
run: php bin/magento setup:upgrade
we can see the venia theme is installed successfully.
10. Configure venia theme from admin->Content->Configuration
11. Navigate to path (/var/www/html/PWA/pwa-studio-master) run:
npm install webpack-dev-server -g
12. And Finally Navigate to /var/www/html/PWA/pwa-studio-master/packages/venia-concept
Congratulations! You have set up your development environment for the Venia theme project.
PWA offers a mobile-like experience to your customers by employing the impressive capability of a web browser.
PWA is a web innovation of making a site similar to look like a local application. a web application that uses modern web technologies and design patterns to provide a reliable, fast, and engaging user experience.
Thanks for explaining it. As we were looking for such a way to make our bike rivals mod apk site web app similar to the design of our website. And it will definitely help us in achieving our goal. Which will increase our app user. also they will not confused between our website and app.
Installed Progressive Web Apps run in a standalone window instead of a browser tab. They're launchable from on the user's home screen, dock, taskbar, or shelf. It's possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they're installed on.
New capabilities open up after a web app is installed. Keyboard shortcuts usually reserved when running in the browser, become available. Progressive Web Apps can register to accept content from other applications or to be the default application to handle different types of files.
When a Progressive Web App moves out of a tab and into a standalone app window, it transforms how users think about it and interacts with it.
Progressive Web Apps (PWAs) in Magento 2 refer to web applications that leverage modern web technologies to provide an enhanced user experience similar to that of native mobile apps. PWAs combine the best of both worlds by offering the reach and accessibility of a website while delivering the performance and interactivity of a mobile app.
PWAs in Magento 2 utilize Service Workers, which are scripts running in the background of a web page, enabling offline functionality, push notifications, and caching of resources. This allows users to access the PWA even without a stable internet connection.
As for the deal between REST APIs and PWAs module in Magento 2, REST APIs (Representational State Transfer Application Programming Interfaces) play a crucial role in enabling the communication between a PWA and the Magento 2 backend.
REST APIs act as the bridge that allows the PWA to retrieve and send data to the Magento 2 database. Through REST APIs, the PWA can fetch product information, manage user accounts, process orders, and perform various other operations necessary for a seamless shopping experience.
The combination of PWAs and REST APIs in Magento 2 offers several benefits. PWAs provide a fast and engaging user interface, while REST APIs ensure real-time data synchronization and enable seamless integration with the backend systems. This combination allows for efficient and interactive shopping experiences on multiple devices, enhancing customer satisfaction and driving conversions.