Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Techved Consulting, profile picture
Uploaded byTechved Consulting
PPTX, PDF86 views

Progressive Web Apps

The document discusses the relevance of Progressive Web Apps (PWAs) in modern web development, highlighting their app-like performance, offline capabilities, and advantages over native apps, such as ease of distribution and engagement. It outlines key features like service workers, web app manifest, and push notifications that enhance user experience. Ultimately, PWAs are positioned as a viable solution to reach users with varying internet access, particularly in regions with slow connections.

Technology◦
Download to read offline
The web isn't Dead.
Introduction Let’s start with Native Apps 1
Native Apps ● Performance ● Offline access ● Periodic background processing ● Notifications Sensors ● OS-specific features. 3
Distribution of Apps ● Distributing Native apps is Hard and Lengthy ● Heavy in size (MBs) ● If it has weak network, there are chances that the user will not download, and hence you will lose a customer. 4
Reducing Friction 5 ● Every Step Costs You 20% of Users --Gabor Cselle Gabor, work with Google
In India 6 Slow Internet Users of Small towns and rural areas are using slow internet Approx. 63% of Indian internet users use 2G network to access the web.
Big concept Progressive Web App (PWA) 7
“A Progressive Web App uses modern web capabilities to deliver an app-like user experience. Developed by Google for Chrome Engine. 8
Why PWA? Progressive Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. Responsive Fit any form factor, desktop, mobile, tablet, or whatever is next Connectivity Independent: Enhanced with service workers to work offline or on low quality networks 9 a
Why PWA? App-like Use the app-shell model to provide app-style navigations and interactions.. Fresh Always up-to-date thanks to the service worker update process. Safe Served via TLS to prevent snooping and ensure content hasn’t been tampered with. 10 b
Why PWA? Discoverable Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. Re-engageable Make re-engagement easy through features like push notifications. Installable Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. 11 c
All you need to know 12 1 Web App Manifest Add to Home Screen Banner Service Workers Push Notifications 2 3 4
Web Manifest ● The name of the web application ● Links to the web app icons or image objects ● The preferred URL to launch or open the web app ● The web app configuration data for a number of characteristics ● Declaration for default orientation of the web app ● Enables to set the display mode e.g. full screen 13
14 This is how Manifest looks like… The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen), direct what the user can launch and more importantly how they can launch it
Add to Home Screen ● Chrome on Android has support adding in your site to the home screen for a while now, but recent versions also support proactively suggesting sites be added using native Web App install banners. 15
These are the steps… 16
Service Workers ● A service worker is a script that runs in the background, separate from your web page. ● Capable of handling the push notification easily ● Synchronize data in the background ● Receive centralized updates 17
Service workers Service workers are powerful for offline caching but they also offer significant performance wins in the form of instant loading for repeat visits to your site or web app. Place your screenshot here 18
Push notification ● Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively reengage them with customized, engaging content. 19
“ ● It's important to remember that Progressive Web Apps work everywhere but are supercharged in modern browsers. 20
PWAs are ● Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. ● Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. ● Engaging - Feel like a natural app on the device, with an immersive user experience. 21
22 The Web is Alive
23 Brand working on PWAs
Hybrid and PWA ● Can anyone guess what are the differences? 24
25 Thanks! Any questions?