Progressive web application considerations before implementing magento pwa for your business
0 likes100 views
The document discusses the advantages and considerations of implementing Progressive Web Applications (PWA) for Magento-based businesses, emphasizing the benefits over native mobile applications, such as increased speed, cost-effectiveness, and improved customer engagement. Key topics include the importance of choosing the right technology, the impact of PWAs on business growth, and specific features of the Magento PWA Studio that enhance performance and user experience. It also highlights case studies demonstrating significant performance improvements and conversion rate increases for businesses utilizing PWA solutions.
Progressive web application considerations before implementing magento pwa for your business
- 1. PROGRESSIVE WEB APPLICATION Consideration Before Implementing Magento PWATo Your Business v 1.2
- 2. 2 SPEAKERS VIKALP SAXENA Senior Software Developer, CedCommerce /in/vikalp-saxena-2042b81b /vikalps AKASH CHADDHA Business Program Manager, CedCommerce /in/akash-chaddha /akashchaddha
- 3. 3 CONSIDERATIONS BEFORE IMPLEMENTING MAGENTO PWA INDEX ● PWA and how PWA is an effective solution for your store ? ● Benefits of PWA over Native Mobile Application ● How PWA helps in Eliminating Hurdles ● Points to Consider Before you must go for Implementation of PWA ● How PWA Benefit Your Ability To Boost Your Business ● How PWA has Business Sustainability in the Industry ● How Magento PWA Studio help you to boost your business ● Implementation of CedCommerce PWA Theme
- 4. 4 IN THIS ARTICLE YOU’LL FIND OUT: ● What are Progressive Web Apps ? ● Reason to use PWA ● Advantage of PWA. PWA AND HOW PWA IS AN EFFECTIVE SOLUTION FOR YOUR STORE ? PROGRESSIVE WEB APPLICATION AND IT’S ADVANTAGES
- 5. PROGRESSIVE WEB APPLICATION 5 “ ”Use Latest Browser Feature when they are available 2G Connection | Low quality Phone 5G Connection | High Quality Phone ● Simplified Web version ● Data Saver Mode ● Limited access to advance Feature ● High quality Media ● Advance Feature ● Push / Background / Sync etc By 2020, Progressive Web Apps Will Have Replaced 50% Of The General Purpose Consumer Facing Apps
- 6. KEY ASPECTS TO OPT FOR PWA 6 Web Applications that adapts the user experience based on the device network, device capabilities and user needs. ENGAGING FAST RELIABLE OUTSTANDING FEATURES OF PWA Responsive Work Offline App Like Interaction Discoverable Engaging Linkable Durable PWA HAS A HIGH LEVEL OF SECURITY BECAUSE OF HTTPS CODING
- 7. FLAWS OF NATIVE APPLICATION 7 Lengthy Downloading Process No Flexibility Expensive Development Process Time Consuming Development Process Native Apps Require Frequent Upgrades SOURCE CODE ONLY WORKS ON THE TARGETED PLATFORM IN NATIVE APPLICATION RESULT TO HIGH COST IN SETUP
- 8. 8 BENEFITS OF PWA OVER NATIVE MOBILE APPLICATION IN THIS ARTICLE YOU’LL FIND OUT: ● New Aspect of PWA over other Web Apps PWA ALLOWS FOR EFFECTIVE LINKABILITY AND SHARING DATA ON THE CLOUD
- 9. WHY PWA IS A BETTER CHOICE ? 9 FEATURES NATIVE MOBILE APPLICATION RESPONSIVE WEBSITE PWA Functions Offline Push Notification Installable On Home Screen Full Screen Experience Indexable By Search Engine One Place To Enter Content Work Across All Devices No Download Required Doesn’t Require Update
- 10. 10 How PWA helps in Eliminating Hurdles IN THIS ARTICLE YOU’LL FIND OUT: ● Load Time & Work Offline ● Responsiveness and SEO ● Behaviour as a App NEVER LET YOUR CLIENT GO DUE TO NO INTERNET CONNECTIVITY
- 11. PWA : REMOVING BARRIER 11 CUT DOWN PAGE LOAD TIME AND WORK OFFLINE 65% increase in pages speed Interactive was reduced from 23 Seconds to less than 6 Seconds PWA takes less than 3 seconds to load and increased conversion rates over 80%
- 12. 12 PWA : REMOVING BARRIER RESPONSIVE ADAPT TO ALL SCREEN SIZE AND ENHANCED WITH THE MOBILE FEATURES LIKE GPS, CAMERA, MOBILE SENSORS
- 13. 13 PWA : REMOVING BARRIER APP LIKE INTERACTION COMPLETELY DESIGNED LIKE MOBILE APPLICATION BEHAVIOUR LIKE NATIVE MOBILE APPLICATION
- 14. 14 PWA : REMOVING BARRIER BETTER SEO PWA IS GREAT FOR SEO AS COMPARED TO MOBILE APPLICATION PWA WILL BE INDEXED QUICKLY AS WELL WHICH ALL ADD TO THE SUCCESS OF YOUR SEO STRATEGY
- 15. 15 PWA : REMOVING BARRIER INDEPENDENT OF MOBILE APP STORE PWA NEED NOT TO BE PUBLISHED ON ANY OF THE APP STORES
- 16. 1616 POINTS TO CONSIDER BEFORE YOU MOVE TO IMPLEMENTATION OF PWA IN THIS ARTICLE YOU’LL FIND OUT: ● Select Right Technology ● Evolve Business with PWA ● Convert Mobile App to PWA ● Future contingency plan PWA PROVIDES A TOTALLY DIFFERENT ENCOUNTER TO THE CUSTOMER
- 17. CONSIDERATIONS BEFORE IMPLEMENTATION 17 CHOOSING RIGHT TECHNOLOGY HAVING EXPERTISE AND EXPERIENCE ReactJS Pure Implementations and a frontrunner when it comes to implementing new patterns. Offer Simple and Clean Solution VueJS Slightly easier to get into as a backend developer. It focuses on offering easy solution. Angular More Enterprise offering an MVC like framework to quickly develop applications with more standard view and functionalities.
- 18. 18 CONSIDERATIONS BEFORE IMPLEMENTATION CONVERTING MOBILE APPLICATION TO PWA PLATFORM INTEGRATIONS CONTINGENCY PLAN FOR FUTURE
- 19. 19 HOW PWA WILL BENEFIT THE ABILITY TO BOOST YOUR BUSINESS IN THIS ARTICLE YOU’LL FIND OUT: ● Points directly affecting the growth of the business.
- 20. PWA IMPACT ON BUSINESS GROWTH 20 By 2020, Progressive Web Apps Will Have Replaced 50% Of The General Purpose Consumer Facing Apps Large Audience A Makeover For Your Website Increase Customers Conversion Cost-Effectiveness & Reduced overhead Boost Audience Engagement & Low Bounce rate
- 21. 21 HOW PWA HAS BUSINESS SUSTAINABILITY IN THE INDUSTRY IN THIS ARTICLE YOU’LL FIND OUT: ● Customer Retention ● Top Example of PWA ● Enriched user experience OPEN SOOQ’S PWA IS ONLY OF 28.3KB WITH A INCREASED CUSTOMER ENGAGEMENT OF 25%
- 22. 22 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
- 23. PWA STATS FROM LIVE BUSINESS ENVIRONMENT 23 2.71 BillionSmartphone Users Around The World 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 & Smashing Ideas
- 24. ENRICHED USER EXPERIENCE 24 RESPONSIVE BROWSING Solution that fits into all the different sizes of devices and browsers Inviting An App like User Interface
- 25. 25 HOW MAGENTO PWA STUDIO HELP YOU TO BOOST YOUR BUSINESS ? 25 IN THIS ARTICLE YOU’LL FIND OUT: ● PWA Studio ● Headless Commerce ● Flexibility / Speed / Personalization / Customization PWA IS 54x SMALLER THAN ANDROID AND 180x SMALLER THAN iOS APP
- 26. 26 MAGENTO PWA STUDIO In 2017, Magento collaborated with Google to bring PWA Features to Magento platform by the end of 2018 ● Magento 2.3 was released on November 28, 2018, with Magento PWA Update. ● It uses modern Tools and Libraries to create a build system and framework that adheres to the Magento principle of extensibility. Personalise Content and Local Preference Real User Experience and Theming One Code Base, One Deployment For all Apps Built-in Developer Tool THE MAGENTO PWA STUDIO PROJECT IS A SET OF DEVELOPER TOOLS THAT ALLOW FOR THE DEVELOPMENT AND DEPLOYMENT, AND MAINTENANCE OF A PWA STOREFRONT ON TOP OF MAGENTO 2
- 27. 27 MAGENTO PWA STUDIO HEADLESS COMMERCE DYNAMIC STORE LANGUAGE API LAYER BUSINESS MOBILE APPLICATION BROWSER << STORE BACKEND >> << PRESENTATION LAYER >> << BUSINESS LAYER >> MORE ABOUT API GraphQL ● Allow for easier chaining ● Hydrates objects in IDE ● Powerful caching Service workers enabled Konga to send 63% less data for initial page loads, and 84% less data to complete the first transaction!
- 28. 28 Speed Personalisation Flexible Customization 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 It gives flexibility for the teams to work on the frontend without disrupting the backend functionality PWAs represent the next evolution in the web experience due to a separate architecture Metrics like: • Load time • Time to Interactive Metrics like: • Conversion • Time on site • Click Through rates • Add to cart Metrics like: • Device compatibility • Easy integration • Quality UI/UX Metrics like: • Gross merchandise value (GMV) • Conversion rates • Customer acquisition cost RESULT OF PWA HEADLESS COMMERCE
- 29. 29 PWA THEME BY CEDCOMMERCE IN THIS ARTICLE YOU’LL FIND OUT: ● Features of Cenia ● Demonstration of Cenia
- 32. 32 LETS CHECKOUT THE LIVE DEMO OF CEDCOMMERCE CONTRIBUTION TOWARDS MAGENTO PWA PWA UI HELPED ALIEXPRESS IMPROVE CONVERSIONS FOR USERS ACROSS ALL BROWSERS BY 104% AND ON iOS BY 82%
- 33. 33 CEDCOMMERCE PRESENCE OVER THE WORLD 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 Our Office HEADQUARTER INDIA 3/460, First Floor, Vishwas Khand, Gomti Nagar, Lucknow, Uttar Pradesh, 226010 CEDCOMMERCE OFFICE ADDRESS
- 34. 34 THANK YOU! Any questions? You can also contact us at www.cedcommerce.com /CedCommerce /company/cedcommerce /CedCommerce support@cedcommerce.com