Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pwa demystified

136 views

Published on

Progressive Web Apps, also known as Installable Web Apps or Hybrid Web Apps, is the latest industry trend helping businesses create more engaged and loyal customers by presenting regular web pages or websites as traditional applications or native mobile applications to the users.

Published in: Technology
  • Be the first to comment

Pwa demystified

  1. 1. PROGRESIVE WEB APPS(PWA) DEMYSTIFIED
  2. 2. WHAT IS PROGRESSIVE WEB APP PWAs are websites that use recent web standards1 Deliver an app-like experience to users without the need to install apps.2 Help in creating engaged and loyal users by creating a Quick Access link on user’s device and sending on demand PNs 3
  3. 3. Progressive & Responsive Works for every user, regardless of browser Fits any form factor: desktop, mobile, tablet, or even larger sizes Connectivity independent Enhanced with service workers to work offline or on low-quality networks. Engaging Immersive full screen experience and re-engage users with web push notifications App-like Feels like an app, because the app shell model separates the application functionality from application content Discoverable & Installable Is identifiable as an "application" allowing search engines to find it. Allows users to add apps they find most useful to their home screen without the hassle of an app store Fresh & Safe Always up-to-date with newly introduced service worker . Served via HTTPS to prevent snooping and ensuring non-tampered content PWA PROGRESSIVE WEB APPS-FEATURES
  4. 4. MOBILE SOLUTIONS : ANALYSIS PROs Responsive Web Progressive Web Apps Native Apps Cross Platform Apps • Easy Development • All Channels • Centralized Updates • Installable • App like features • Centralized Updates • Served over https • Device Experience • Access to Native APIs • Faster App Performance • Appstore Distribution • Device Experience • Access to Native APIs • Faster App Performance • Appstore Distribution • Single Code Base CONs • No Access to Native APIs • Browser Experience • Native UI • Content re-use • No Access to Native APIs • Browser Experience • Native UI • Device Specific Development • Decentralized Updates • Multiple Code bases • Additional development Costs
  5. 5. Provides central place to put following meta data associated with the web application • Name of the app • Links to the app icon or image • URL to launch or open the app • Declaration for default orientation of their web app With service worker PWA handles unreliable and potentially slow web connectivity. It also manages cache efficiently to allow error free app display during offline access It provides an initial static frame, on which content can be loaded progressively as well as dynamically, allowing users to engage with the app despite varying degree of web connectivity PWA BUILDING BLOCKS Application Shell App ManifestService Worker WEB PAGE
  6. 6. SERVICE WORKER IN ACTION WWW WEB PAGE Page request intercepted by service worker Fetch from site fails Service Worker Website Cache Retrieve Cached Response Return Cached response as fallback
  7. 7. PWA APPLICATION SHELL Application shell is the minimal HTML, CSS, and JavaScript powering a user interface which keeps the UI local and pulls in content dynamically through an API. Image source:
  8. 8. PWA APP MANIFEST The web app manifest is a W3C specification defining a JSON-based manifest to provide developers a centralized place to put metadata associated with a web application including: • The name of the web application • Links to the web app icons or image objects • The preferred URL to launch or open the web • Declaration for default orientation • Enables to set the display mode e.g. full screen Image Source
  9. 9. PWA BUSINESS VALUE
  10. 10. Awesome Customer Engagement Fast & stream lined website Enhanced User Experience PWA prompts user to ‘allow’ sending notifications. With chrome launching ‘add to home screen’ function the app gets cached and users get a direct link to the app right from the home screen Progressive Web Apps use scripted proxies that sit between the user tab and wider internet, intercepting and rewriting or fabricating network request to allow caching and offline support. It provides instant and reliable loading irrespective of network connection User Experience User visiting via browser enjoy app-like user experience. Return user get instant uptime even on slow network. Frequent users will be prompted to install and upgrade to full version Improved Website PWA BUSINESS VALUE Customer Engagement
  11. 11. Platform limitations prevent PWAs from providing re-engagement for iOS users. Separate login on web is required as Facebook login and Google login can’t fetch data from Facebook and Google Apps. PWAs can’t use some of the latest hardware advancements (like fingerprint scanner). You are not on Play Store, You miss significant traffic who use Play store for their primary search. Zero-install no app store mediation Discoverable and Easy to share. Works on slow internet connections. Safe and Always up-to date BENEFITS DRAWBACKS Full support for PWAs are not available in default browsers of some of the manufacturers Add to Home Screen and PNs.
  12. 12. CASE STUDIES
  13. 13. HOW Alibaba BENEFITTED FROM PWA 76% 14% 30% Higher conversions across browsers Increase in Monthly Active Users on iOS Increase in Monthly Active Users on Android 4X higher interaction rate from Add to Home Screen
  14. 14. HOW AliExpress BENEFITTED FROM PWA 104% 74% Increased conversion rate for new users Increase in session duration( Time spent on page) 2X more pages visited per session per user across all browsers.
  15. 15. HOW 5miles BENEFITTED FROM PWA 50% 30% Decrease in bounce rate • Increase in time spent on site Better conversion for users who arrived via Add to Home screen 30%
  16. 16. PWA USER EXPERIENCE DATA 2G NETWORK A2HS CACHING HTTPS WEB PN SEARCH ENGINE 01 02 03 04 05 06 07 ANALYTICS. SEO FREINDLY. PUSH NOTIFICATION SAFE AND SECURE OFFLINE ACEESS. ADD TO HOME SCREEN SUPPORT FOR LOW FREQUENY NETWORKS. Quick Recap
  17. 17. Questions
  18. 18. ThankYou! Writetome: pradeep.patel@edynamic.net

×