[Webinar] Expanding future mobile commerce with Magento PWA Studio
1 like183 views
The document discusses the transformative potential of Progressive Web Applications (PWAs) in mobile commerce, highlighting their advantages over traditional web and native apps. It covers topics such as the evolution of PWAs, their performance benefits, and successful case studies, including Alibaba's increased conversions due to PWA implementation. Additionally, it outlines the contributions of Magento and CedCommerce in developing and enhancing PWA solutions for e-commerce businesses.
![© 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](https://image.slidesharecdn.com/copyofcedcommercemagentopwawebinar-191206092046/85/Webinar-Expanding-future-mobile-commerce-with-Magento-PWA-Studio-30-320.jpg)
[Webinar] Expanding future mobile commerce with Magento PWA Studio
- 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
- 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