SlideShare une entreprise Scribd logo
1  sur  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?

Contenu connexe

Tendances

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
 

Tendances (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
 

Similaire à 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
 

Similaire à 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
 

Dernier

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
🐬 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
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
[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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
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
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
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
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
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
 

Dernier (20)

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
[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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
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
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
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
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
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...
 

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

Notes de l'éditeur

  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