Introduction to Magento PWA

1. Magento
PWA
Abid H. Malik • 07.04.2022

2. Terminology
❖ PWA
➢ Progressing Web Apps
➢ Collection of app-like features
❖ SPA
➢ Single Page Application
➢ Like with React, Vue or Angular
❖ Headless
➢ Separating the frontend from the backend
❖ API First
➢ everything you’re developing is developed with the end goal of API
consumption in mind

3. Progressive Web Apps
❖ Offline behaviour
❖ Splash screen
❖ Push notifications
❖ Performance
—-----------------
★ Initiated by Google
★ Accepted by Apple
★ Standard in 5 years

4. Progressive Web Apps
❖ Progressive
❖ Responsive
❖ Connectivity independent
❖ App-like
❖ Fresh
❖ Safe
❖ Discoverable
❖ Re-engageable
❖ Installable
❖ Linkable

5. Magento PWA
❖ Does not exist
❖ Magento offers a PWA Studio
➢ You build a PWA with it
❖ The more code is customized, the less it is Magento
❖ Any PWA connecting to Magento could classify as
Magento PWA
❖ Vue Storefront, DEITY, ScandiPWA

6. PWA parts
❖ Web App Manifest manifest.json
❖ Service Worker file (serviceworker.js)
❖ Application shell (HTML document)
❖ JavaScript (React, Angular, Vue)
❖ Deployment chain (Node, WebPack)
❖ IndexedDb, localStorage, Redux, Mobx
❖ API (REST, GraphQL)

7. Setup PWA Studio

8. PWA Studio Setup - Option 1
❖ Prepare Magento for PWA
➢ composer require magento/pwa
➢ bin/magento module:enable --clear-static-content Magento_ContactGraphQlPwa
➢ bin/magento module:enable --clear-static-content Magento_NewsletterGraphQlPwa
➢ bin/magento module:enable --clear-static-content Magento_QuoteGraphQlPwa
❖ Download and Setup PWA Studio
➢ git clone https://github.com/magento/pwa-studio.git .
➢ yarn install
➢ yarn buildpack create-custom-origin packages/venia-concept
➢ MAGENTO_BACKEND_URL="https://<magento.url>/" yarn buildpack create-env-file
packages/venia-concept
❖ Run PWA
➢ NODE_TLS_REJECT_UNAUTHORIZED=0 yarn run watch:all

9. PWA Studio Setup - Option 2
❖ Install PWA
➢ mkdir <project root> && cd $_
➢ yarn create @magento/pwa
➢ <answer the interactive questionnaire>
➢ cd <pwa-studio folder>
➢ yarn buildpack create-custom-origin ./
➢ yarn watch
❖ Install Payment Method
➢ yarn add -D @magento/venia-sample-payments-checkmo

10. PWA - Important Files
❖ .env file
❖ src
➢ .storybook
➢ ServiceWorker
➢ drivers.js
➢ index.js
➢ registerSW.js
➢ store.js
❖ Other files
➢ Local-intercept.js
➢ Webpack.config.js
➢ Upward.yml
➢ Template.html
➢ Server.js

11. PWA - Important Variables
❖ MAGENTO_BACKEND_URL
❖ MAGENTO_BACKEND_EDITION
❖ CHECKOUT_BRAINTREE_TOKEN
❖ CUSTOM_ORIGIN_ENABLED
❖ CUSTOM_ORIGIN_EXACT_DOMAIN

12. Going Forward…

13. Next steps
Assignment 1
Learn about PWA parts
Assignment 2
Learn about React Essentials
Assignment 3
Setup PWA and Customize Footer Menu Link

14. Additional Resources
❖ https://developer.adobe.com/commerce/pwa-studio/guide
s/
❖ https://www.simicart.com/blog/magento-pwa-examples/
❖ https://www.simicart.com/blog/magento-pwa-studio/
❖ https://developer.adobe.com/commerce/pwa-studio/tutor
ials/setup-storefront/

15. Thank you!
1. Keep Smiling.
2. Keep Studying.
3. Follow COVID Guidelines.