Know everything right from gaining erudition about exploring the future prospects of the Progressive Web Apps. We’re here to make you familiar with: - The global impact of PWAs on mobile commerce - The way CedCommerce is increasing the scope of Magento PWA Studio - Exploring the future prospects of PWA - Ways to increase the conversion rates using PWA These features will benefit the eCommerce merchants, and the customers as well. Click To Watch Our Full Webinar Here: http://bit.ly/2LtLLSz

1. PROGRESSIVE WEB
APPLICATIONS
Expanding Future Mobile Commerce With Magento PWA Studio

2. 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

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

4. 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

5. 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. 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. 7
PWA RESULTS ARE OUT FROM THE TOP BRANDSCUSTOMERTRAFFIC
(REACH)
CUSTOMER ENGAGEMENT
WEB APP
NATIVE APP

8. 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

9. 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.

10. 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.

11. 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.

12. 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
offline mode.
Progressive Web Apps (PWA)

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

14. 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. 15
DEFICIENCIES OF WEB APP BY PWA
● Slow
● Low Engagement Rate
● Shabby User
Experience
● Difficult 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 Offline
Mode

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

17. 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

18. © 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,
efficiency, and better overall web
development habits in your
organization”
“
” 18

19. 19
PWAs SUPPORT THE DIGITAL COMMERCE LIFECYCLE

20. “
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. 21
STORES RUNNING A SUCCESSFUL PWA SOLUTION
Treebo
4x in Conversion rate
1.5sec Page Load Speed on Mobile
Uber
PWA was designed to efficiently 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

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

23. 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

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

25. 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 notifications are important to to
keep customers informed about the latest deals, offers and order updates

26. 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

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

28. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
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. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
29
peregrine

30. © 2019 Adobe. All Rights Reserved. Adobe Confidential.
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

31. (before optimization)
(optimized)
31

32. 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)

33. 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. 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. 35
MAGENTO CONTRIBUTION TOWARDS VENIA
STOREFRONT FOR PWA
HOMEPAGE
CATEGORY
PAGE
PRODUCT
PAGE

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

37. 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 Traffic
2.5 Seconds
Is The Average Load Time For A Page
42.86%
Reduced Bounce rate, Compared to mobile website
DATA SOURCE : Appinstitute & Smashingideas

38. CEDCOMMERCE PRESENCE OVER THE WORLD
Our Office
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. 39
THANK YOU!
Any questions?
You can also contact us at www.cedcommerce.com
/CedCommerce /company/cedcommerce /CedCommerce support@cedcommerce.com