This document summarizes a presentation about Progressive Web Apps (PWA) and PWA Studio. It discusses what a PWA is, the benefits of PWAs including performance and user experience improvements. It then describes PWA Studio, the tools developed by Magento to build PWA storefronts on Magento Commerce. Key aspects of PWA Studio like its architecture, components and building a new project are outlined. The document also provides tips on testing PWA performance and getting started with local development of a PWA using PWA Studio.

1. Magento Meetup Ahmedabad
Introduction to PWA Studio
Vijay Golani
Magento Master, Magento U Trainer
VP of Development at Wagento

2. Magento Meetup Ahmedabad
Overview of PWA

3. Magento Meetup Ahmedabad
High Level Headless / Omnichannel Architecture
ERP OMS PIM CRM CMS
API Layer
Storefront Technology
Store PWA
Online
Assistant
AR / VR Voice Mobile

4. Magento Meetup Ahmedabad
“A progressive web app, or PWA, is a web application that uses modern web technologies
and design patterns to provide a reliable, fast and engaging user experience.”
What Is PWA?
Reliable Responsive Secure Engaging

5. Magento Meetup Ahmedabad
PWA Benefits
Service Hosted Web Application - Progressive Web App
ü Fast
ü Secure
ü Responsive
ü Cross-browser
ü Offline mode
ü Mobile “install”
ü Shareable
https://www.youtube.com/watch?v=m-sCdS0sQO8&feature=youtu.be

6. Magento Meetup Ahmedabad
Benefits of Choosing PWA
ØAffordable
ØNo install headaches
ØIndexability on the web
ØPush notifications
ØSingle codebase for all platforms

7. Magento Meetup Ahmedabad
PWA: One App, Every Platform
Mobile
Tablet
DesktopiOS App
Android
App
PWA

8. Magento Meetup Ahmedabad
PWA Concerns
§ Still a new technology
§ Limited hardware device access
§ Does not work with other native apps
§ Possible battery life issues

9. Magento Meetup Ahmedabad
Let’s Compare
Capabilities PWA Native Responsive
Mobile Friendly ✓ ✓ ✓
Installable ✓ ✓ X
SEO-Indexed ✓ X ✓
Offline Mode ✓ ✓ X
Push
Notifications
✓ ✓ X
GPS Enabled ✓ ✓ X

10. Magento Meetup Ahmedabad
Top 5 Business Benefits
ü Low cost
ü Push notification
ü Website that works offline
ü Single codebase
ü Easy payments and checkout

11. Magento Meetup Ahmedabad
Who Uses PWAs?
Source: https://www.pwastats.com/tags/e-commerce
FlipKart (India)
3x more time spent on site
Lancôme
17% increase in conversions
West Elm
9% increase in revenue per visit

12. Magento Meetup Ahmedabad
PWA Studio

13. Magento Meetup Ahmedabad
“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.
It uses modern tools and libraries to create a build system and framework that adheres to the
Magento principle of extensibility.”
What Is PWA Studio?

14. Magento Meetup Ahmedabad
PWA Studio Flow Diagram
JS Server
Buildpack
React
Application
PWA Studio
Storefront
MAGENTO PWA STUDIO

15. Magento Meetup Ahmedabad
PWA Studio Architecture
Magento
Backend
Magento API
Magento
PWA Studio
Browser
Technologies

16. Magento Meetup Ahmedabad
PWA Studio Architecture
Magento
Backend
Magento API
Magento
PWA Studio
Browser
Technologies

17. Magento Meetup Ahmedabad
PWA Studio Architecture
Magento
Backend
Magento API
Magento
PWA Studio
Browser
Technologies
PHP JS React Redux Node.js Apollo Webpack Workbox
Upward Technologies Peregrine Technologies

18. Magento Meetup Ahmedabad
PWA Studio Architecture
Magento
Backend
Magento API
Magento
PWA Studio
Browser
Technologies
Service Worker Web App Manifest HTTPS Application Cache

19. Magento Meetup Ahmedabad
PWA Studio Project Repository
The pwa-studio repository is also a monorepo that
contains all listed PWA Studio projects
babel-preset-plugin
create-pwa
graphql-cli-validate-magento-pwa-queries
peregrine
pwa-buildpack
pwa-devdocs
upward-js
upward-spec
venia-concept
venia-styleguide
venia-ui
https://github.com/magento/pwa-studio

20. Magento Meetup Ahmedabad
Separation of the Frontend
PWA Storefront Traditional Magento
Frontend and backend code separated Themes developed within the core Magento
application
All data retrieved via API calls Extensions applied directly to core application can
impact theme
No frontend logic developed in Magento
backend
Tight coupling between frontend and backend
Frontend can be developed and deployed
independently to Magento

21. Magento Meetup Ahmedabad
Separation of the Frontend
PWA Store 1 PWA Store 2
Blank Theme
Luma
Theme
Catalog Sales Customers
Catalog Sales Customers
GraphQL
Traditional Magento Magento with PWA Storefront

22. Magento Meetup Ahmedabad
General skills needed for PWA storefront development
SKILL DESCRIPTION
JavaScript (JS) Core web language
React A JS library for building user interfaces
Redux A JS library for handling application state
GraphQL An API query language
webpack Project assets bundler
Cascading Style Sheets (CSS) Defines the style for a websites
CSS modules Locally scoped style definitions
JavaScript Object Notation (JSON) Data-interchange format
Peregrine React components library provided by the PWA Studio
Yarn JS package and dependency manager

23. Magento Meetup Ahmedabad
PWA Performance Tips & Examples
§ Required steps before the launch of your PWA
§ Baseline for load time

24. Magento Meetup Ahmedabad
The PWA Baseline Checklist
Service hosted web application - Progressive Web App
ü Uses HTTPS
ü Responsive
ü Loads offline
ü Add to home screen
ü Cross browser
ü Transitions
ü URL on each page
https://developers.google.com/web/progressive-web-apps/checklist

25. Magento Meetup Ahmedabad
Testing PWA Performance
Two recommended tools for testing performance
https://webpagetest.org/ Google Lighthouse

26. Magento Meetup Ahmedabad
Running the Test
Generate a report
using Google
Lighthouse

27. Magento Meetup Ahmedabad
Using WebPageTest
Generate a
report using
WebPageTest

28. Magento Meetup Ahmedabad
Using WebPageTest

29. Magento Meetup Ahmedabad
Getting Started with PWA Studio
§ Initial project setup
§ Generate local SSL certificate

30. Magento Meetup Ahmedabad
Prerequisites
ü NodeJS minimum 10.14.1 LTS
ü Yarn minimum 1.13.0
ü Python 2.7 and build tools
ü OPTIONAL: Running instance of Magento 2.3.1 or above

31. Magento Meetup Ahmedabad
Starting a PWA Studio Project – The Old Way
q Cloning the official repository
$ git clone git@github.com:magento/pwa-studio.git

32. Magento Meetup Ahmedabad
Starting a PWA Studio Project – The New Way
q To use the PWA Studio scaffolding, run the following command
$ npx @magento/create-pwa

33. Magento Meetup Ahmedabad
q After running the command, answer these questions:
PWA Studio Scaffolding – System Generated Questions
? Where to put the project root directory (will be created if it does not exist)
? Short name of the project to put in the package.json "name" field
? Name of the author to put in the package.json "author" field
? Magento instance to use as a backend (will be added to .env file)
? Braintree API token to use to communicate with your Braintree instance
(will be added to .env file)
? NPM package management client to use
? Install package dependencies with yarn after creating project

34. Magento Meetup Ahmedabad
PWA Studio Scaffolding – Next Steps
After the command runs, you see these suggestions to execute the project
q cd <project_folder> && yarn install before running the following
commands
q yarn run buildpack create-custom-origin . to generate a unique,
secure custom domain for your new project
q yarn run watch to start the dev server and do real-time development
q yarn run build to build the project into optimized assets in the '/dist' directory
q yarn start after build to preview the app on a local staging server

35. Magento Meetup Ahmedabad
Why Do We Need to Have a Valid SSL Certificate?
Ø PWA uses some features that run in the background on the user's browser
Ø For security reasons, use an HTTPS connection

36. Magento Meetup Ahmedabad
create-custom-origin Command
q After creating new project, generate valid SSL certificate for PWA Studio
$ yarn run buildpack create-custom-origin <project_folder>

37. Magento Meetup Ahmedabad
All Done!
● With domain and certificate configured, start your project:
$ yarn run watch

38. Magento Meetup Ahmedabad
Useful Resources to learn more about PWA Studio
• DEMO URL: https://venia.magento.com/
• https://magento.github.io/
• https://u.magento.com/pwa-learning-resources
• https://github.com/magento/pwa-studio

39. Magento Meetup Ahmedabad
39
https://hopin.to/events/maconnect

40. Magento Meetup Ahmedabad
Non Technical Events
On International Day of Yoga – 21st June
https://www.bigdamrun.com/http://mage.yoga/

41. Magento Meetup Ahmedabad
Vijay Golani
vijay@wagento.com
Twitter: @vijaygolani
LinkedIn: /in/vijaygolani
Questions ???