Building an E-commerce
Progressive Web App
with React and WooCommerce
Alexandra Anghel
CTO & Co-founder at Appticles, Co-founder Codette
Slide 2
Slide 2 text
What is a Progressive Web App?
“A new way to deliver amazing user experiences
on the web”*
*https://developers.google.com/web/progressive-web-apps/
Reliable Fast Engaging
! " ⋆
Slide 3
Slide 3 text
PWA Capabilities
Secure (HTTPS)
$
%
Add to
Homescreen
Web Push
Notifications
&
Offline mode
'
App Shell
JS
Slide 4
Slide 4 text
PWA vs. RWD
( A PWA has responsive capabilities
A PWA has app-like features
Slide 5
Slide 5 text
86%
14%
PWA vs. RWD
%
RWD has reached saturation
Customers prefer app-like
experiences on the web
(87%
* https://www.forrester.com/report/Brief+Embrace+Responsive+Web+Design/-/E-RES133861
Slide 6
Slide 6 text
Why Progressive Web Apps?
Delight
Users
Grow
Engagement
Increase
Conversions
$
♥ +
More on: https://developers.google.com/web/showcase
Slide 7
Slide 7 text
Showcase: Alibaba
- 76% increase in total
conversions across browsers
- 4X higher interaction rate
from Add to Homescreen
Slide 8
Slide 8 text
Showcase: OLX
- Increased engagement by
250%
- 80% drop in bounce rates
- CTR rising 146%
Slide 9
Slide 9 text
Google Chrome Lighthouse
ex. PWA Score
*https://github.com/GoogleChrome/lighthouse
Slide 10
Slide 10 text
Google Chrome Lighthouse
*https://github.com/GoogleChrome/lighthouse
Passing Props between Components
API Categories
CategoriesList
CategoryCard
Props: categories
Props: id, image, name
CategoryCard
Props: id, image, name
…
Slide 22
Slide 22 text
Redux.JS
“Predictable state container for JavaScript apps”*
* http://redux.js.org
Slide 23
Slide 23 text
Configure App Store
Slide 24
Slide 24 text
Actions for Requesting / Receiving Products
Slide 25
Slide 25 text
Redux Products Reducer
A reducer modifies a part of the app state
Slide 26
Slide 26 text
Products Component - Call API
Slide 27
Slide 27 text
Products List Component - Display Products
Slide 28
Slide 28 text
Add Product to the Shopping Cart
onClick
Redux Action
{type: ADD_TO_CART,
product}
Redux Reducer
{cartProducts}
Slide 29
Slide 29 text
Link App to WordPress
Slide 30
Slide 30 text
Service Workers
%
Add to
Homescreen
Web Push
Notifications
&
Offline mode
'
Slide 31
Slide 31 text
Offline Support - Caching Files
Slide 32
Slide 32 text
“Network falling back to cache” Strategy
https://developers.google.com/web/fundamentals/
instant-and-offline/offline-cookbook
Slide 33
Slide 33 text
Offline Support - Caching Data
npm install redux-persist --save
Slide 34
Slide 34 text
Web App Install Banners (Add to Homescreen)
Slide 35
Slide 35 text
Web Push Notifications
https://wordpress.org/plugins/onesignal-free-web-push-notifications