In this presentation, we'll be having deep run-through over the points you must consider before moving and implementing PWA in your business.
This will be covering points that are as follows.
- Select Right Technology
- Evolve Business with PWA
- Convert Mobile App to PWA
- Future contingency plan
For more information, you may visit: http://bit.ly/2Scu8t3
Acquaint more by hearing from our experts: http://bit.ly/3b9sNvF
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
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.
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
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