SlideShare a Scribd company logo
1 of 18
Download to read offline
Progressive Web Apps (PWA)
An Introduction
By: Sandip Nirmal
sandip.nirmal@synerzip.com
Contents
● Web Application
● Progressive Web App
● Taking App Offline
● Making app installable
● App Demo
● Browser Support, etc
Web Application
“Web application or web app is a client–server software application in
which the client (or user interface) runs in a web browser”
- Wikipedia
● Connectivity Dependant
● Non installable
Progressive Web App
● Offline first
● Installable
● Safe
● Responsive
● Re-engageable
● App-like
● etc
Taking App Offline
● Service Worker are
● event-driven script contexts that run at an origin.
● Sits in between origin and internet
● Acts as a proxy
● Caches API are
● New Storage API
● Can store any content (served over the web)
● Developer has entire control over it
Service Worker Registration
Service Worker events (install)
Service Worker events (fetch)
Service Worker events (fetch)
Service Worker events (activate)
App Installation
● App manifest
● App icons
● App orientation
Demo App (Android)
Demo App (iOS)
Browser Support
● Chrome - Desktop and Mobile (Android)
● Firefox - Desktop and Mobile (Android)
● Microsoft Edge - Windows desktop and Mobile (Under Development)
● Opera - Desktop and Mobile (Android)
● Safari - MacOS and iOS (Under consideration)
● https://jakearchibald.github.io/isserviceworkerready/
Testing (Lighthouse)
Why PWA
● 55% of entire web traffic is from mobile devices
● Browser supports native features (https://whatwebcando.today/)
● Reduced development efforts
Current (web/desktop + android + iOS + windows)
With PWA (PWA & iOS)
References (Getting Started)
● https://www.udacity.com/course/offline-web-applications--ud899 (Free course)
● https://developers.google.com/web/progressive-web-apps/
● https://jakearchibald.com/2014/offline-cookbook
●Example Apps
https://pwa.rocks/
https://www.chromestatus.com
https://flipkart.com
https://housing.com
THANK YOU
Demo App : https://sandipnirmal.github.io/weather-app-PWA
Code Repo: https://www.github.com/sandipnirmal/weather-app-PWA

More Related Content

What's hot

Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsAkshay Sharma
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web AppSankalp Khandelwal
 
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 / 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
 
Build progressive web apps with Angular
Build progressive web apps with AngularBuild progressive web apps with Angular
Build progressive web apps with AngularSimona Cotin
 
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...Aleyda Solís
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and ReactMike Melusky
 
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
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Bijaya Oli
 
Selenium 4 with Simon Stewart [Webinar]
Selenium 4 with Simon Stewart [Webinar]Selenium 4 with Simon Stewart [Webinar]
Selenium 4 with Simon Stewart [Webinar]BrowserStack
 

What's hot (20)

Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)
 
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
 
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
 
PWA
PWAPWA
PWA
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Build progressive web apps with Angular
Build progressive web apps with AngularBuild progressive web apps with Angular
Build progressive web apps with Angular
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Angular PWA
Angular PWAAngular PWA
Angular PWA
 
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
 
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
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )
 
Selenium 4 with Simon Stewart [Webinar]
Selenium 4 with Simon Stewart [Webinar]Selenium 4 with Simon Stewart [Webinar]
Selenium 4 with Simon Stewart [Webinar]
 

Similar to Introduction to Progressive Web Apps (PWA)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsUnfold UI
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Kazuhiro Ogura
 
Service workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua PerformanceService workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua PerformancePiero Bellomo
 
Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02weeyee
 
Appium an introduction
Appium   an introductionAppium   an introduction
Appium an introductionVivek Shringi
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testingKalhan Liyanage
 
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
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Fwdays
 
Mobile & android apps presentation
Mobile & android apps  presentationMobile & android apps  presentation
Mobile & android apps presentationAya Taleb
 
Delivering Best Apps with Efficiency
Delivering Best Apps with EfficiencyDelivering Best Apps with Efficiency
Delivering Best Apps with EfficiencyWSO2
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayPOSSCON
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJSCezar Carneiro
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayAll Things Open
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsAnjaliTanpure1
 

Similar to Introduction to Progressive Web Apps (PWA) (20)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)
 
Service workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua PerformanceService workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua Performance
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02
 
Appium an introduction
Appium   an introductionAppium   an introduction
Appium an introduction
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testing
 
GDG Ibadan #pwa
GDG Ibadan #pwaGDG Ibadan #pwa
GDG Ibadan #pwa
 
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
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
 
Mobile & android apps presentation
Mobile & android apps  presentationMobile & android apps  presentation
Mobile & android apps presentation
 
Delivering Best Apps with Efficiency
Delivering Best Apps with EfficiencyDelivering Best Apps with Efficiency
Delivering Best Apps with Efficiency
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJS
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 

Recently uploaded

Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MIRomil Mishra
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
Fish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonFish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonHostedbyConfluent
 
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...HostedbyConfluent
 
Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®HostedbyConfluent
 
Exactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and KafkaExactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and KafkaHostedbyConfluent
 
Mastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing PerformanceMastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing PerformanceHostedbyConfluent
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶HostedbyConfluent
 
CERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit LondonCERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit LondonHostedbyConfluent
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
How Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit LondonHow Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit LondonHostedbyConfluent
 
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQLBuild Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQLHostedbyConfluent
 
Apache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data PlatformApache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data PlatformHostedbyConfluent
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
Web Development Solutions 2024 A Beginner's Comprehensive Handbook.pdf
Web Development Solutions 2024 A Beginner's Comprehensive Handbook.pdfWeb Development Solutions 2024 A Beginner's Comprehensive Handbook.pdf
Web Development Solutions 2024 A Beginner's Comprehensive Handbook.pdfSeasia Infotech
 
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...HostedbyConfluent
 
Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonHostedbyConfluent
 

Recently uploaded (20)

Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MI
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
Fish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonFish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit London
 
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
The Streaming Data Lake - What Do KIP-405 and KIP-833 Mean for Your Larger Da...
 
Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®Brick-by-Brick: Exploring the Elements of Apache Kafka®
Brick-by-Brick: Exploring the Elements of Apache Kafka®
 
Exactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and KafkaExactly-once Stream Processing with Arroyo and Kafka
Exactly-once Stream Processing with Arroyo and Kafka
 
Mastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing PerformanceMastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing Performance
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
 
CERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit LondonCERN IoT Kafka Pipelines | Kafka Summit London
CERN IoT Kafka Pipelines | Kafka Summit London
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
How Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit LondonHow Do You Query a Stream? | Kafka Summit London
How Do You Query a Stream? | Kafka Summit London
 
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQLBuild Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
 
Apache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data PlatformApache Flink: Building a Company-wide Self-service Streaming Data Platform
Apache Flink: Building a Company-wide Self-service Streaming Data Platform
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
Web Development Solutions 2024 A Beginner's Comprehensive Handbook.pdf
Web Development Solutions 2024 A Beginner's Comprehensive Handbook.pdfWeb Development Solutions 2024 A Beginner's Comprehensive Handbook.pdf
Web Development Solutions 2024 A Beginner's Comprehensive Handbook.pdf
 
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
Leveraging Tiered Storage in Strimzi-Operated Kafka for Cost-Effective Stream...
 
Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit London
 

Introduction to Progressive Web Apps (PWA)

  • 1. Progressive Web Apps (PWA) An Introduction By: Sandip Nirmal sandip.nirmal@synerzip.com
  • 2. Contents ● Web Application ● Progressive Web App ● Taking App Offline ● Making app installable ● App Demo ● Browser Support, etc
  • 3. Web Application “Web application or web app is a client–server software application in which the client (or user interface) runs in a web browser” - Wikipedia ● Connectivity Dependant ● Non installable
  • 4. Progressive Web App ● Offline first ● Installable ● Safe ● Responsive ● Re-engageable ● App-like ● etc
  • 5. Taking App Offline ● Service Worker are ● event-driven script contexts that run at an origin. ● Sits in between origin and internet ● Acts as a proxy ● Caches API are ● New Storage API ● Can store any content (served over the web) ● Developer has entire control over it
  • 10. Service Worker events (activate)
  • 11. App Installation ● App manifest ● App icons ● App orientation
  • 14. Browser Support ● Chrome - Desktop and Mobile (Android) ● Firefox - Desktop and Mobile (Android) ● Microsoft Edge - Windows desktop and Mobile (Under Development) ● Opera - Desktop and Mobile (Android) ● Safari - MacOS and iOS (Under consideration) ● https://jakearchibald.github.io/isserviceworkerready/
  • 16. Why PWA ● 55% of entire web traffic is from mobile devices ● Browser supports native features (https://whatwebcando.today/) ● Reduced development efforts Current (web/desktop + android + iOS + windows) With PWA (PWA & iOS)
  • 17. References (Getting Started) ● https://www.udacity.com/course/offline-web-applications--ud899 (Free course) ● https://developers.google.com/web/progressive-web-apps/ ● https://jakearchibald.com/2014/offline-cookbook ●Example Apps https://pwa.rocks/ https://www.chromestatus.com https://flipkart.com https://housing.com
  • 18. THANK YOU Demo App : https://sandipnirmal.github.io/weather-app-PWA Code Repo: https://www.github.com/sandipnirmal/weather-app-PWA

Editor's Notes

  1. Web Applications traditionally assume that the network is reachable. HTML documents are loaded over HTTP and traditionally fetch all of their sub-resources via subsequent HTTP requests. This places web content at a disadvantage versus other technology stacks.
  2. Connectivity independent Installable Other features can be found on https://developers.google.com/web/progressive-web-apps/checklist
  3. Opera is built on Chrome’s engine blink Safari added features in iOS 4, hasn’t picked pace from then on Steve Jobs wanted all iPhone apps to be built using Web technology (before App Store)
  4. Lighthouse - PWA testing tool (Chrome extension) Validates all aspects of PWA
  5. Mobile first websites There is no guarantee of network App Store free distribution. (No loss of 30% app revenue) Need to implement payment gateway on our own.