SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
Next Generation Mobile Web
Progressive Web
Apps
And how can we use it!
Whats PWA?
A web application that has a responsive
layout, works offline and can be can be
installed on the home screen of a device.
Progressive Web
App in Action
Chrome Dev Summit Website
Um okay, What are the features?
• Responsive: to fit any form
factor
• Connectivity independent:
Progressively-enhanced with
Service Workers to let them work
offline
• Discoverable: Are identifiable
as “applications” thanks to W3C
Manifests and Service Worker
registration scope allowing
search engines to find them
Um okay, What are the features?
• Fresh: Transparently always
up-to-date thanks to the
Service Worker update
process
• Safe: Served via TLS (a
Service Worker requirement)
to prevent snooping
• App-like-interactions: Adopt
a Shell + Content application
model to create app-like
navigations & interactions
Um okay, What are the features?
• Re-engageable: Can access the
re-engagement UIs of the OS;
e.g. Push Notifications
• Installable: to the home screen
through browser-provided
prompts, allowing users to “keep”
apps they find most useful
without the hassle of an app store
• Linkable: meaning they’re zero-
friction, zero-install, and easy to
share. The social power of URLs
matters.
Add on Homepage Treated like an app Push Notifications
No Commitment
Bullshit!
And the best part?
Not every customer or potential customer
will have your native app installed
You should provide a faster web
experience for web customers
In short, the faster your site is, the more likely you are to have happy
customers and make more money
.
Progressive Web Apps are fast. The Washington Post’s Progressive
Web App loads new pages in less than a second.
Your web
users might
benefit from
push
notifications
So what did we learn today?
• PWA will help us provide a better user experience
to web customers.
• PWA is safe, speedy and beautiful.
• Not every users will download and keep your native
app, hence web app is the way to go.
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)

Contenu connexe

Tendances

Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2Manfred Steyer
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web ApplicationsBartek Igielski
 
My learnings on web performance optimization while building a Progressive Web...
My learnings on web performance optimization while building a Progressive Web...My learnings on web performance optimization while building a Progressive Web...
My learnings on web performance optimization while building a Progressive Web...Narendra Shetty
 
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
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For StartupsIdo Green
 
Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Shelly Megan
 
Building Progressive Web Apps (Kyle Buchanan)
Building Progressive Web Apps (Kyle Buchanan)Building Progressive Web Apps (Kyle Buchanan)
Building Progressive Web Apps (Kyle Buchanan)Red Hat Developers
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWAIdo Green
 
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Maxime Czetwertynski
 
Introduction to Progressive Web App
Introduction to Progressive Web AppIntroduction to Progressive Web App
Introduction to Progressive Web AppBinh Bui
 
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Sandip Nirmal
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
 

Tendances (20)

Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
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
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
My learnings on web performance optimization while building a Progressive Web...
My learnings on web performance optimization while building a Progressive Web...My learnings on web performance optimization while building a Progressive Web...
My learnings on web performance optimization while building a Progressive Web...
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
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
 
GDG Ibadan #pwa
GDG Ibadan #pwaGDG Ibadan #pwa
GDG Ibadan #pwa
 
Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
 
Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Building Progressive Web Apps (Kyle Buchanan)
Building Progressive Web Apps (Kyle Buchanan)Building Progressive Web Apps (Kyle Buchanan)
Building Progressive Web Apps (Kyle Buchanan)
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
 
Introduction to Progressive Web App
Introduction to Progressive Web AppIntroduction to Progressive Web App
Introduction to Progressive Web App
 
Progressive Web Apps(PWA)
Progressive Web Apps(PWA)Progressive Web Apps(PWA)
Progressive Web Apps(PWA)
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 

Similaire à Next Generation Mobile Web - PWA (Progressive Web App)

Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerceShantanuApurva1
 
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
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web AppSankalp Khandelwal
 
Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?ShantanuApurva1
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web applicationRavikantGautam8
 
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
 
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
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinaleAntonio Peric-Mazar
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsAkshay Sharma
 
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
 
PWA Utility App Development_ Learn How To Build.pdf
PWA Utility App Development_ Learn How To Build.pdfPWA Utility App Development_ Learn How To Build.pdf
PWA Utility App Development_ Learn How To Build.pdfLucas Lagone
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsAnjaliTanpure1
 
Building Progressive Web Apps.docx
Building Progressive Web Apps.docxBuilding Progressive Web Apps.docx
Building Progressive Web Apps.docxSavior_Marketing
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorIsrael Blancas
 

Similaire à Next Generation Mobile Web - PWA (Progressive Web App) (20)

Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerce
 
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
 
PWAs overview
PWAs overview PWAs overview
PWAs overview
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
 
Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
 
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
 
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
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
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
 
PWA Utility App Development_ Learn How To Build.pdf
PWA Utility App Development_ Learn How To Build.pdfPWA Utility App Development_ Learn How To Build.pdf
PWA Utility App Development_ Learn How To Build.pdf
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
New trends on web platform
New trends on web platformNew trends on web platform
New trends on web platform
 
Building Progressive Web Apps.docx
Building Progressive Web Apps.docxBuilding Progressive Web Apps.docx
Building Progressive Web Apps.docx
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor
 

Dernier

UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxAmanpreet Kaur
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxnegromaestrong
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxcallscotland1987
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxdhanalakshmis0310
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
Third Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxThird Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxAmita Gupta
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Association for Project Management
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 

Dernier (20)

UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Third Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxThird Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptx
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 

Next Generation Mobile Web - PWA (Progressive Web App)

  • 2.
  • 3.
  • 5. Whats PWA? A web application that has a responsive layout, works offline and can be can be installed on the home screen of a device.
  • 6. Progressive Web App in Action Chrome Dev Summit Website
  • 7. Um okay, What are the features? • Responsive: to fit any form factor • Connectivity independent: Progressively-enhanced with Service Workers to let them work offline • Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
  • 8. Um okay, What are the features? • Fresh: Transparently always up-to-date thanks to the Service Worker update process • Safe: Served via TLS (a Service Worker requirement) to prevent snooping • App-like-interactions: Adopt a Shell + Content application model to create app-like navigations & interactions
  • 9. Um okay, What are the features? • Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications • Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store • Linkable: meaning they’re zero- friction, zero-install, and easy to share. The social power of URLs matters.
  • 10. Add on Homepage Treated like an app Push Notifications
  • 12. Not every customer or potential customer will have your native app installed
  • 13. You should provide a faster web experience for web customers In short, the faster your site is, the more likely you are to have happy customers and make more money . Progressive Web Apps are fast. The Washington Post’s Progressive Web App loads new pages in less than a second.
  • 14. Your web users might benefit from push notifications
  • 15. So what did we learn today? • PWA will help us provide a better user experience to web customers. • PWA is safe, speedy and beautiful. • Not every users will download and keep your native app, hence web app is the way to go.