[Webinar] Expanding future mobile commerce with Magento PWA Studio

PROGRESSIVE WEB
APPLICATIONS
Expanding Future Mobile Commerce With Magento PWA Studio

SPEAKER
MALLIKA VERMA
Senior Software Developer, CedCommerce
2
in/mallika-verma-a3178890 /MallikaVerma15
PATRICK TOOTHAKER
Senior Product Marketing Manager, Magento Commerce
/in/ptoothaker /ptoothaker
GUEST

EXPANDING FUTURE MOBILE COMMERCE WITH MAGENTO PWA STUDIO
“ INDEX
● Why PWA Studio Is An Effective Solution ?
● Mobile Revolution : The Evolution of PWA
● Wiping Deﬁciencies Of Webapps By PWA
● PWA is The Future Of Mobile Commerce
● PWA Featured Website : Examples
● A Case Study (Alibaba)
● How PWA Beneﬁts Your Ability To Boost Your Business
● Contribution Of Magento To PWA
● Contribution of CedCommerce for Magento PWA Studio

WHY
PWA STUDIO
IS AN
EFFECTIVE SOLUTION ?
IN THIS ARTICLE
YOU’LL FIND OUT:
● What are Progressive Web Apps ?
● Result after implementing PWA to
ecommerce store.
4

WHAT IS PWA ?
Progressive Web Apps are user experiences that can behave
as a web page and native mobile app at the same time.
5
PWA sounds like a completely new platform, but it’s not; it’s a convenient term for a handful of new browser features and design patterns. So it’s an
evolution of Web development, much like "Responsive" has been.
“
”
~ James Zetlen
ENGAGING FAST RELIABLE

6
PUSH NOTIFICATION ON PWA
PUSH NOTIFICATION
Just like a Native App, now even PWA is enriched
with the feature of PUSH NOTIFICATION
PUSH NOTIFICATION are more used for marketing
and Customer Engagement purpose

7
PWA RESULTS ARE OUT FROM THE TOP BRANDSCUSTOMERTRAFFIC
(REACH)
CUSTOMER ENGAGEMENT
WEB APP
NATIVE APP

8
MOBILE
REVOLUTION
THE EVOLUTION OF PWA
What Created The Need Of Pwa ?
IN THIS ARTICLE
YOU’LL FIND OUT:
● Evolution of Progressive Web App
● Characteristics of Progressive Web
App

EVOLUTION OF PWA
9
Server Side Pages
● Server Side Programming like PHP, JSP and others.
● The Dynamic Information you want to show will be fetched
from the Database.
● HTML Pages are prepared on basis of some templates.

EVOLUTION OF PWA
10
Ajax
● The Actions are requested as Asynchronous API calls.
● The page generation is still server-based on some templates
and are sent as HTML responses.

EVOLUTION OF PWA
11
Single Page App (SPA)
● Bringing in the concept of AJAX all over the application,
Front-End renders the required pages providing the required
data over API calls.
● Most of the views are loaded initially and upon navigation just
the data loads.
Single Page Apps (MBaaS)
Mobile Backend as a Service allows Front-End to interact with Data source just by using their sdk.

EVOLUTION OF PWA
12
● Service Worker : A proxy that is
between application code and
network.
● Service Worker decides whether to
serve the cached response or to hit
fresh request and serve response.
● PWA makes users feel web apps as a Real Mobile
App.
● With amazing user experiences, loads the app
instantly.
● Regardless of the network state, it works even in
ofﬂine mode.
Progressive Web Apps (PWA)

CHARACTERISTICS OF PWA
13
PROGRESSIVE RESPONSIVE CONNECTIVITY SECURE
INSTALLABLE LINKABLE
LOW DATA
COMMITMENT
DISCOVERABLE

14
WIPING
DEFICIENCIES
OF WEB APPS BY
PWA
IN THIS ARTICLE
YOU’LL FIND OUT:
● New Aspect of PWA over other
Web Apps
● PWA, a new choice of Customer

15
DEFICIENCIES OF WEB APP BY PWA
● Slow
● Low Engagement Rate
● Shabby User
Experience
● Diﬃcult for
Non-Technical Person
to Manage
● Launched by Browser
● Work only on Online
Mode
WEB
APPS
PWA ● Fast
● High Engagement Rate
● Attractive User
Experience
● Accessible to all creators,
and is very Easy to
Manage
● Add Icon to Home Screen
● Can even work in Oﬄine
Mode

16
FLAWS OF NATIVE APPS
● Lengthy Downloading
Process
● No Flexibility
● Expensive Development
Process
● Time Consuming
Development Process
● Native Apps Require
Frequent Upgrades

17
PWA IS THE
FUTURE OF
MOBILE COMMERCE
IN THIS ARTICLE
YOU’LL FIND OUT:
● Points for customer to shift
from Native app / Web app to
PWA
● Industry Adoption of PWA

© 2019 Adobe. All Rights Reserved. Adobe Confidential.
“By 2020, progressive web
apps will have replaced 50%
of general-purpose,
consumer-facing mobile
apps”
“
“PWAs aren’t simply a new thing
to build – they’re the paradigm
that will drive performance,
eﬃciency, and better overall web
development habits in your
organization”
“
” 18

19
PWAs SUPPORT THE DIGITAL COMMERCE LIFECYCLE

“
PWA FEATURED WEBSITES
SOME REAL WORLD
EXAMPLES OF PWA
IN THIS ARTICLE
YOU’LL FIND OUT:
● Store that are Running a
Successful PWA
● Case Study : AliExpress

21
STORES RUNNING A SUCCESSFUL PWA SOLUTION
Treebo
4x in Conversion rate
1.5sec Page Load Speed on Mobile
Uber
PWA was designed to eﬃciently work on Weak
Network Area
Takes less than 3sec to load over 2G Network
Forbes’
2.5sec Page Load Speed on Mobile
20% in Impression
Twitter
65% in Pages Per Session
75% in Tweets sent
20% in Bounce Rate
MakeMyTrip
3X in Conversion rate
38% improvement in page Load Times
160% in shopper Sessions

HOW PWA
HELPED ALIBABA
TO GROW MORE
INTO ECOMMERCE
22
CASE
STUDY

JOURNEY WITH PWA
23
CASE STUDY : ALIBABA.COM
Alibaba.com increases Conversions on the mobile
web by 76% with Progressive Web App
Alibaba.com is the world’s largest online
Business-to-Business (B2B) trading platform, serving
200+ countries and regions.
14% more monthly active users on iOS;
30% on Android
4X higher interaction rate from Add To Homescreen

“ YOUR ABILITY TO
BOOST YOUR
BUSINESS
IN THIS ARTICLE
YOU’LL FIND OUT:
● PWA Benefits
● Benefits for Merchant
● Benefits for Developer
HOW PWA BENEFITS

BENEFITS OF PWA FOR BUSINESS
25
By 2020, Progressive Web Apps Will Have Replaced 50% Of The General Purpose Consumer Facing Apps
REMARKABLE SPEED
PWA is faster because of browser-level caching which is possible because of
SERVICE WORKERS, and provide a complete support also in OFFLINE MODE
CROSS-PLATFORM COMPATIBILITY
PWAs can run smoothly on almost all widely used mobile browsers. (Chrome,
Safari, Edge and Firefox). Hence, businesses don’t have to develop and maintain
apps for different platforms. Hence NO UPDATE Required
RESPONSIVE DESIGN
This will help in improving customer experience. The sites with responsive web
design will rank better search results as said by Google
PUSH NOTIFICATIONS
It increase ENGAGEMENT by up to 88%. Push notiﬁcations are important to to
keep customers informed about the latest deals, offers and order updates

26
Performance Engagement Cost Innovation
Built for speed first
PWA offer best in
class performance
Create fast and
engaging web
experiences that
adopt the capabilities
and best practices
from native mobile
apps
Lowers cost to the
business by unifying
customer experience
into a single
front-end application
PWAs represent the
next evolution in the
web experience.
Early adopters will
have a competitive
advantage
Metrics like:
• Load time
• First Contentful
Paint (FCP)
• Time to Interactive
Metrics like:
• Conversion
• Time on site
• Click Through rates
• Add to cart
Metrics like:
• Total cost of
ownership (TCO)
• Time to market
Metrics like:
• Gross merchandise
value (GMV)
• Conversion rates
• Customer
acquisition cost
BENEFITS OF PWA TO MERCHANTS

“CONTRIBUTION OF
MAGENTO TO PWA
IN THIS ARTICLE
YOU’LL FIND OUT:
● Magento contribution towards
PWA
● PWA Studio Features
● PWA Studio Libraries
● Venia Storefront

Progressive Web Apps allow merchants
to improve conversion rates by delivering high performing,
engaging shopping experiences across all devices and browsers
through a modern web store.
PWA Studio, allows developers to use standardized tools to build,
deploy, and maintain Magento and Abobe-powered PWAs quickly
and cost effectively.
28

29
peregrine

30
peregrine
• Brand new PWA storefront
• Desktop and mobile friendly
• Google Lighthouse optimized
• Functional component library
• Utilizes React hooks *NEW*
• Equivalent to “blank theme”
• Magento 2 connector (PHP)
• Cloud compatible (optimized)
• Also available for Node.js (JS)
• Build and development tools (“buildpack”)
• Venia sample data (M2.3+)
• Documentation and examples
• Developer sandbox for PWA (quickstart)
• Google Lighthouse “stack packs” [TBD]
Developer
Tools

(before optimization)
(optimized)
31

32
WHAT TECHNOLOGIES DOES PWA USE
UPWARD
Component
Library (Peregrine)
Venia-styled
components
Custom UI
components
Service Worker
Web App
Manifest
HTTPS
App Cache
API
GraphQL M2.3+
Backend
React
Redux
Node.js
Apollo
Webpack
Workbox
Sheila
(Shopper)

IN THIS ARTICLE
YOU’LL FIND OUT:
● CedCommerce Steps towards
Headless PWA
● CedCommerce developed
Theme for PWA
33
CONTRIBUTION OF
CEDCOMMERCE
FOR MAGENTO
PWA STUDIO

34
CEDCOMMERCE STEPS TOWARDS HEADLESS PWA
SOLUTION
● CedCommerce had started working on PWA Studio when it
was launched.
● Currently CedCommerce is working for clients to add other
eCommerce features on PWA Studio which are currently not
available.
This enhancement will increase our contribution for Magento.
● CedCommerce had also started developing its own THEME
based on Venia Concept.
● CedCommerce has focused on enhancing Home Page and
Designing Theme more Interactive.
● CedCommerce added Banner Slider Section, Trending
Products and Latest Products Section on Homepage
● CedCommerce also worked on Newsletter feature which will
help in increasing customer engagements.

35
MAGENTO CONTRIBUTION TOWARDS VENIA
STOREFRONT FOR PWA
HOMEPAGE
CATEGORY
PAGE
PRODUCT
PAGE

36
MAGENTO CONTRIBUTION TOWARDS VENIA
STOREFRONT FOR PWA
CART PAGE
CHECKOUT
ORDER
CONFIRMATION

2.71 BillionSmartphone Users Around The World
37
PWA STATS FROM LIVE SCENARIO
80%
User Uninstalled App Within 1 Week
20%
Increase In Mobile Sales & Revenue
8%
Increase In Recovered Shopping Carts
50%
Increase In Customer Engagement
33%
Decrease In Development And Maintenance
68%
Increase In Mobile Traﬃc
2.5 Seconds
Is The Average Load Time For A Page
42.86%
Reduced Bounce rate, Compared to mobile website
DATA SOURCE : Appinstitute & Smashingideas

CEDCOMMERCE PRESENCE OVER THE WORLD
Our Oﬃce
38
HEADQUARTER
INDIA
3/460, First Floor,
Vishwas Khand,
Gomti Nagar, Lucknow,
Uttar Pradesh, 226010
CEDCOMMERCE OFFICE ADDRESS
SALES & MARKETING
USA
1812 N Columbia Blvd,
Suite C15-653026, Portland,
Oregon, 97217
UNITED KINGDOM
3rd Floor, St. George's House,
6 St George's Way, Leicester,
Leicestershire,
LE1 1QZ
MALAYSIA
Suite 20-01 & 20-02B, Level 20,
The Persiaran Lagoon Bandar Sunway,
Subang Jaya Selangor Darul Ehsan 47500

39
THANK YOU!
Any questions?
You can also contact us at www.cedcommerce.com
/CedCommerce /company/cedcommerce /CedCommerce support@cedcommerce.com

[Webinar] Expanding future mobile commerce with Magento PWA Studio

More Related Content

What's hot

Similar to [Webinar] Expanding future mobile commerce with Magento PWA Studio

More from CedCommerce

Recently uploaded

[Webinar] Expanding future mobile commerce with Magento PWA Studio