Downloaded 99 times
Uploaded byedynamic
Pwa demystified
Progressive Web Apps (PWAs) are web applications that provide an app-like experience by utilizing modern web standards to allow installation on user devices without an app store. They are designed to work across various platforms and internet conditions, offering offline capabilities, smooth performance, and user engagement through push notifications. However, limitations include restricted access to native APIs and challenges with iOS user engagement, which may hinder broader adoption.
More Related Content
Pwa demystified
- 1. PROGRESIVE WEB APPS(PWA)DEMYSTIFIED
- 2. WHAT IS PROGRESSIVEWEB 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. Progressive & Responsive Worksfor 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. 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. Provides central placeto 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. SERVICE WORKER INACTION 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. PWA APPLICATION SHELL Applicationshell 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. PWA APP MANIFEST Theweb 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.
- 10. Awesome Customer Engagement Fast & stream lined website Enhanced User Experience PWAprompts 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. Platform limitations preventPWAs 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.
- 13. HOW Alibaba BENEFITTEDFROM 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. HOW AliExpress BENEFITTEDFROM 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. HOW 5miles BENEFITTEDFROM 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. PWA USER EXPERIENCE DATA 2G NETWORK A2HS CACHING HTTPS WEBPN 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.
- 18.