SlideShare a Scribd company logo
1 of 25
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?

More Related Content

What's hot

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web AppVinci Rufus
 
Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web AppIdo Green
 
Flutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentFlutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentMobiloitte
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)Nuri Cahyono
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsAkshay Sharma
 
Noonic Guides - Mobile App: from Native to Web
Noonic Guides - Mobile App: from Native to WebNoonic Guides - Mobile App: from Native to Web
Noonic Guides - Mobile App: from Native to WebNoonic Agency
 
Getting Started with Progressive Web Apps
Getting Started with Progressive Web AppsGetting Started with Progressive Web Apps
Getting Started with Progressive Web AppsBill Stavroulakis
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Abdelrahman Omran
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web AppSubodh Garg
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessLets Grow Business
 
Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)  Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA) DBS Interactive
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsOptis
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web ApplicationsBartek Igielski
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2Manfred Steyer
 
Tips to improve your page load speed
Tips to improve your page load speedTips to improve your page load speed
Tips to improve your page load speedPixel Crayons
 

What's hot (20)

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App
 
Flutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentFlutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application Development
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
Noonic Guides - Mobile App: from Native to Web
Noonic Guides - Mobile App: from Native to WebNoonic Guides - Mobile App: from Native to Web
Noonic Guides - Mobile App: from Native to Web
 
Getting Started with Progressive Web Apps
Getting Started with Progressive Web AppsGetting Started with Progressive Web Apps
Getting Started with Progressive Web Apps
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
 
Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)  Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
GDG Ibadan #pwa
GDG Ibadan #pwaGDG Ibadan #pwa
GDG Ibadan #pwa
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Tips to improve your page load speed
Tips to improve your page load speedTips to improve your page load speed
Tips to improve your page load speed
 

Similar to Progressive Web App

Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web AppSankalp Khandelwal
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfLucas Lagone
 
How OutSystems Accelerates PWA Development
How OutSystems Accelerates PWA DevelopmentHow OutSystems Accelerates PWA Development
How OutSystems Accelerates PWA DevelopmentLCDF
 
Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerceShantanuApurva1
 
How to deal with mobile traffic expansion
How to deal with mobile traffic expansionHow to deal with mobile traffic expansion
How to deal with mobile traffic expansionMevlana M. Gürbulak
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testingKalhan Liyanage
 
The importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJsThe importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJsReactJS
 
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddySai Kiran Kasireddy
 
progressive web app
 progressive web app progressive web app
progressive web appRAGINI .
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET Journal
 
[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA StudioCedCommerce
 
Web application development full & detailed guide for 2022
Web application development  full & detailed guide for 2022Web application development  full & detailed guide for 2022
Web application development full & detailed guide for 2022Metricoid Technology
 
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-Commerce Berlin EXPO
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceŁukasz Romanowicz
 
SEMINAR PRESENTATION.pptx
SEMINAR PRESENTATION.pptxSEMINAR PRESENTATION.pptx
SEMINAR PRESENTATION.pptxmelbinantony456
 
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...NITHIN S.S
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandImran Sayed
 

Similar to Progressive Web App (20)

Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
PWAs overview
PWAs overview PWAs overview
PWAs overview
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdf
 
How OutSystems Accelerates PWA Development
How OutSystems Accelerates PWA DevelopmentHow OutSystems Accelerates PWA Development
How OutSystems Accelerates PWA Development
 
Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerce
 
How to deal with mobile traffic expansion
How to deal with mobile traffic expansionHow to deal with mobile traffic expansion
How to deal with mobile traffic expansion
 
Web Applications: Dominance and Drawbacks
Web Applications: Dominance and DrawbacksWeb Applications: Dominance and Drawbacks
Web Applications: Dominance and Drawbacks
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testing
 
The importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJsThe importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJs
 
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
 
progressive web app
 progressive web app progressive web app
progressive web app
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of things
 
[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio
 
Web application development full & detailed guide for 2022
Web application development  full & detailed guide for 2022Web application development  full & detailed guide for 2022
Web application development full & detailed guide for 2022
 
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice
 
SEMINAR PRESENTATION.pptx
SEMINAR PRESENTATION.pptxSEMINAR PRESENTATION.pptx
SEMINAR PRESENTATION.pptx
 
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
 

Recently uploaded

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 

Recently uploaded (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 

Progressive Web App

  • 3. Native Apps ● Performance ● Offline access ● Periodic background processing ● Notifications Sensors ● OS-specific features. 3
  • 4. 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
  • 5. Reducing Friction 5 ● Every Step Costs You 20% of Users --Gabor Cselle Gabor, work with Google
  • 6. 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.
  • 8. “A Progressive Web App uses modern web capabilities to deliver an app-like user experience. Developed by Google for Chrome Engine. 8
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. All you need to know 12 1 Web App Manifest Add to Home Screen Banner Service Workers Push Notifications 2 3 4
  • 13. 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. 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
  • 15. 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
  • 16. These are the steps… 16
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. “ ● It's important to remember that Progressive Web Apps work everywhere but are supercharged in modern browsers. 20
  • 21. 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
  • 24. Hybrid and PWA ● Can anyone guess what are the differences? 24

Editor's Notes

  1. The web isn’t dead, it just need to evolve. It just need to adapt mobile devices. Until 2015 Android and iOS have almost a million apps on their app store. Users are using it like anything.
  2. Native Apps are always successful digital product as it uses almost all native OS functionality. Share Panel, Keypad, Camera, GPS etc..
  3. Why developers and business choose Native Apps, they have fantastic advantages for the user. Performance is excellent, user can access the app offline, receive notifications from the app, also they can access almost all OS features. If we talk about distribution of Native Apps, how difficult for any business it could be. Do they really reach out to every user in there market? If we go back in time, when we used to have Floppy Disks for distribution, how much time it takes to install or how complicated was the process. They DVDs and CDs and Pen drives.
  4. Now, lets talk about the distribution of Native Apps, How it is hard? If someone ask you to install one of App which I have created from the App store, let’s say ”XYZ” can you expect the exact result what are you looking for, there is a possibility my app doesn’t appear on the first page. Yes, the best way is to ping the URL. URL is very powerful when it comes to Distribution and Reach.
  5. There are 5 steps we follow initially when we installs any app, App Store View- if reviews and comments are ok you will download. Installs: If internet speed or you have sufficient data balance if you will install. Open App: If it takes too much of time or asks you a lot of questions you will close the app. SignUp: If there is not One Touch Signup you will not sign up. So, like that you see the chart, people lose there interest on the very first step. What this shows, We have to make user reach out to our app very quickly. According to recent comScore study, The average user installs zero app per month.
  6. Still India have 63% users who use 2G-3G network. It’s a huge number, so now business always want to target this huge number of the users. Now the question is, can we build an App which can solve problems which I had shared you in my last slides.
  7. We will need a big concept. Progressive Web Apps.
  8. Specifically Native App like functionality. Taking all good features from Native Apps and put in a Mobile Websites.
  9. 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
  10. Its an API