What is Progressive Web Apps, or PWAs in Magento 2?
What is Progressive Web Apps ?
- Looks and behaves like a mobile app.
- Take advantage of native mobile device features, without requiring the end user to visit an app store, make a purchase and download it locally.
Why PWA?
- Fast
- Secure (second last topic of answer)
- Responsive
- Cross-browser compatible
- Offline Mode (Check the last topic in the answer)
- Mobile “Install”
- Shareable content
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
Flipkart
Approach
- Developed Flipkart Lite, a Progressive Web App
- Added service workers for quicker load times
- Smooth navigation and scrolling at 60 frames/second
- Created an “Add to Home Screen” prompt to encourage users to add the
mobile web-page to their home screens
Results
New Progressive Web App helps Flipkart boost conversions 70%
Flipkart also works on Offline mode
- Service Workers can be scripted to intercept every network request and serve a response from cache even when the user is offline.
- Service Workers wrapper library that enables using simple patterns such as
NetworkFirst
,CacheFirst
orNetworkOnly
.SW-Toolbox
provides anLRU
cache used in Flipkart app for storing previous search results on the browse page and last few visited product pages. - The toolbox also has
TTL-based
cache invalidation mechanism that we use to purge out of date content. Service Workers provide low-level scriptable primitives that make this possible.
BUT... BUT... BUT...
What is the Magento PWA Studio?
- • 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
The Magento PWA Studio project provides the following tools:
pwa-module
- Its have modules like helpers, server-side functionality and acts as a foundation for all themes created using Magento PWA Studio.
pwa-buildpack -
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:
- PWADevServer
- Magento Resolver
- Magento Root Components Plugin
- magento-layout-loader
- Service Worker Plugin
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
Webpack
- Webpack’s primary function is to create one or more bundles from the dependencies in your project’s modules.
App Shell
- Total size is smaller
- Initial load requests three files:
login.html
,shell-1234.js
,3456.js
- Initial load needs to load:
Shell + Router + content
- The shell is visible earlier than with Page Shell approach.
Page Shell
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.
ReactJs
- A JavaScript library for building user interfaces.
Redux
- A JavaScript library used for managing state in a web application.
GraphQL
- A data query language on the client side and a service layer on the server side.
GraphQL in Magento
Authentication and Schema
Reducing amount of Front-end Queries
Phase Render
Desktop Browser compatibility
- Not supported: IE, Safari
Mobile Browser compatibility
Not supported: Android Webview, IE, Safari
PWAs are More Secure
- As a web developer, you may know how much Google encourages
websites having
https
instead ofHTTP
. Cyber threats are always top of the list for web and app developers. - In the past,
HTTP
was not secure enough to protect users’ information. - Websites are now being programmed in
HTTPs
and it is easy to launch a Progressive Web App in a secure environment. - While entering personal information in PWA such as credit card information or contact details, they may feel secure and have peace of mind.
PWA - Offline Mode
offline Wikipedia application is a good example of a PWA that uses an app shell model.
- It loads instantly on repeat visits, but dynamically fetches content using JS.
- This content is then cached offline for future visits.
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 [email protected] --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.
- For now lets clone base pwa theme repository. https://github.com/magento-research/theme-frontend-pwa
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
And navigate to your Magento Admin->Content->Themes
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-concept
cp .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
or
npm install webpack-dev-server -g
12. And Finally Navigate to /var/www/html/PWA/pwa-studio-master/packages/venia-concept
npm start
Congratulations! You have set up your development environment for the Venia theme project.
PWA - Progressive Web Application are the generally web application which is user experiences the rich web. in way of :
- Reliable - load instantly and also available in offline mode.
- Fast - in a way of interaction where user are smoothly interact with it, and also without any scrolling or animation junks.
- Engaging - as denoted above both points if application is reliable & fast then it is obviously engage more user experience and also feel like it's natural app.
"What does it mean that Magento is becoming a Progressive Web Application platform?"
As magento is preparing for 2.3 version release it is including this "PWA" feature to make frontend more efficient, in a way of user interaction.
What is the deal with REST APIs and PWAs?
As magento is using "PWA" it is also adding "GraphQL API" for providing front-end development side api alternative of "REST/SOAP" as "GraphQL" api.
For getting more detailed about the "PWA" and new feature of "magento2.3 open-commerce" You can visit this magento's official page.
Progressive means that the application loads along with any relevant data and assets, as a user navigates around your website. This results in an end-user experience with better speed, usability, offline operation and device integration.
Web means that it’s written in the languages of the web (HTML, CSS, JavaScript). This allows you to create a site that gives more app-like functionality without creating a native app restricted to one platform, such as iOS or Android.
Application means it installs and runs code on the shopper’s device or computer. Doing this creates more speed and capability than the single-page JavaScript apps of the past.
PWAs are essentially a hybrid of regular web pages and the mobile app, allowing for mobile app-like experiences for the web.
Magento is becoming a Progressive Web Application platform. That is to say, Magento is making a suite of tools for building online stores as Progressive Web Applications. These tools will help developers learn PWA techniques, build lightning-fast PWA frontends, and create PWA components and extensions for reuse or sale on the Magento Marketplace. Taken together, Magento is calling this suite of tools the Magento PWA Studio.
You can check the code structure at https://github.com/magento-research/pwa-studio
Magento PWA is using GraphQL as an alternative to REST API for PWA.
For more details on Magento PWA, you can go through the following links:
- https://magento-research.github.io/pwa-studio/
- https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
- https://brandastic.com/ideas/magento-progressive-web-apps/
- https://www.monsoonconsulting.com/blog/progressive-web-apps-magento