SlideShare a Scribd company logo
• Gaurav Behere
• http://gauravbehere.in
Life is a race, so is web.
Performance of a web app is not an add on/
enhancement or a nice to have thing. It is a
must.
Treat slowness of your web app as a DEFECT.
Go and raise a defect now.
Usual Methods of Optimizing
Performance on Web
1. Caching – Server Side/ Client Side
2. Writing optimized code
3. Making use of the power of browser: app
cache/ local storage/ indexedDB/ web
workers etc
4. Reducing HTTP calls in terms of code
minification/uglification, image sprites etc
………. (There are many)
Chrome Dev Tools – A Friend Forever
Profiles: Heap Snapshot
Profiles: CPU Profile
Network & Execution timeline
Audits & Optimization Hints

Recommended for you

Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx

Progressive Web Apps (PWAs) provide an app-like user experience through the use of features like service workers, web app manifests, and push notifications. They load instantly, work offline, and can be installed on the home screen without an app store. Service workers act as a proxy to cache resources, enabling fast and reliable performance even in uncertain network conditions. PWAs are responsive across devices and browsers, and feel natural on each platform due to their immersive, app-like interfaces.

pwaprogressivewebappweb
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)

Progressive web apps (PWAs) are experiences that combine the best of the web and mobile apps. They load quickly, work offline, and feel like native mobile apps. The key aspects of PWAs include service workers for offline functionality, app shells for fast loading, and manifest files for home screen capabilities. PWAs use caching strategies and service workers to load from the cache first for offline access, then request updates from the network as needed. This provides a better user experience than online-first solutions which require network connectivity.

Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps

This slide is from the talk that i have given in DevFest at GDG Jalandhar & DSC Workshops.it Contains all the basic features,code and tools required to build a Progressive web apps.

pwaprogressive web appsprogramming
Mobile Application + Web
Application = PWA
Why should I code twice or port the same in a
completely different format ?
How to fill gaps between a mobile application &
hybrid web app ported as APK
Why shouldn’t the same code work for both ?
Getting Bothered Already ??
You are already using progressive web apps !
Progressive Web Apps
Progressive
Responsive
Connectivity independent
App-like
Safe
Discoverable
Re-engageable
Installable
Linkable
How Stuff Works !
Service Workers
Service Worker is a worker script that works behind the
scenes, independent of your app, and runs in response
to events like network requests, push notifications,
connectivity changes, and more.
We can handle that event with full control, checking for
cached data and returning immediately, or allowing the
request to continue to the remote server. Our script
acts as a proxy, or middleware, for the request.

Recommended for you

PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App

This document provides an overview of progressive web apps (PWAs). It defines PWAs as web applications that are regular web pages but can appear and function like native mobile or desktop apps. The document discusses why PWAs are useful by allowing apps to load quickly, work offline, and avoid large downloads. It outlines key features of PWAs like being reliable, fast, engaging, and installable. Examples of popular PWA implementations are also provided.

progressive web apppwawebsite
Progressive web app
Progressive web appProgressive web app
Progressive web app

Progressive Web App New Web Technology for the Mobile User Which work on Poor Data Connection and It Will Work With Simple Manifest File Or with use of Service Workers. It Feel Like Mobile App to the user.

internetnew mediaphp
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps

Progressive Web Apps (PWAs) provide an app-like user experience on the web by making use of modern web capabilities. PWAs use a web app manifest and service workers to work offline, receive push notifications, and load quickly. The web app manifest allows developers to define how the app should appear to users, while service workers cache assets to provide an app-shell experience regardless of network availability. Tools like sw-precache and sw-toolbox help generate service worker code and implement common caching strategies. By following best practices for manifests, service workers, and other features, web apps can achieve many of the benefits of native mobile apps without needing to be installed from an app store.

pwawebprogramming
. Cache Manifest
. More than web workers
. Offline Support
. Install -> Activate -> Fetch -> Idle
. Post Message APIs
. Dedicated socket to receive push subscriptions
. Background Sync
Read Syntax Here:
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
App Shell
App shell is a design modal that suggests, what to cache & what not. Static
theme of the page – header, footer, menus, together are called App Shell.
Push Notifications
Yes ! Because as a web app developer we needed it badly.
Push notification is the most important thing which was missing from
a web application to be ported as mobile app. Service worker allows
you to have a dedicated communication link for push messages.
https://firebase.google.com/docs/cloud-messaging/
Show Time
Flipkart Lite, Success Story:
https://developers.google.com/web/showcase/2016/flipkart
More Demos: http://pwa.rocks
During tech talk a demo was given with switching on/off the
Wi-Fi in the phone & showing the ability of the app to detect
network change & caching.

Recommended for you

Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps

This Slide Deck Was used on my Masterclass abut PWA in my Masterclass about PWA and Web Standards. Thia was an introduction to PWA and his basic stone Path.

mobile web standardsprogressive webappsmobile web
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications

Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.

pwaprogressive web applicationsweb development
Frontend 'vs' Backend Getting the Right Mix
Frontend 'vs' Backend   Getting the Right MixFrontend 'vs' Backend   Getting the Right Mix
Frontend 'vs' Backend Getting the Right Mix

Modern website architectures are typically composed of 2 parts: frontend and backend. Building out frontend and backend components requires diverse skill sets and often have competing interests when it comes to developer productivity and site performance. This talk will discuss some ways Java frameworks deal with these issues as well as benefits and tradeoffs. The talk will include combine demos with cutting edge frontend frameworks (Handlebarsjs, CoffeeScript, Less) and popular Java backends (Spring, Apache CXF). Bio: Bob Paulin is an independent consultant that has been developing on Java for the past 10 years. Bob is focuses on Business Enablement and Web Centric Applications. He’s presented in the past at CJUG on Apache Sling and is currently helping his clients perform modular development/design, automation for continuous delivery, and build forward leaning web applications. When not coding, Bob enjoys coaching football and spending time with his with his wife and 3 kids.

coffeescriptjavajavascript
References
• http://blog.lamplightdev.com/2015/01/06/A-Simple-
ServiceWorker-App/
• https://developer.mozilla.org/en/docs/Web/API/Service_Wor
ker_API
• https://developers.google.com/web/fundamentals/getting-
started/primers/service-workers
• http://blog.ionic.io/what-is-a-progressive-web-app/
Progressive Web Apps - Overview & Getting Started

More Related Content

What's hot

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Padmaashree K
 
PWA - Progressive Web Apps
PWA - Progressive Web AppsPWA - Progressive Web Apps
PWA - Progressive Web Apps
Edy Segura
 
Getting Started with Progressive Web Apps
Getting Started with Progressive Web AppsGetting Started with Progressive Web Apps
Getting Started with Progressive Web Apps
Bill Stavroulakis
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
Harish Karthick
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
Zhentian Wan
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Suraj Kumar
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
Robert Robinson
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
Deepak Upadhyay
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Saikiran Sheshagiri
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
Alexandre Marreiros
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
Chris Love
 
Frontend 'vs' Backend Getting the Right Mix
Frontend 'vs' Backend   Getting the Right MixFrontend 'vs' Backend   Getting the Right Mix
Frontend 'vs' Backend Getting the Right Mix
Bob Paulin
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
Bartek Igielski
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
Manfred Steyer
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
edynamic
 
An introduction to Progressive Web Apps
An introduction to Progressive Web AppsAn introduction to Progressive Web Apps
An introduction to Progressive Web Apps
Kevin Farrugia
 
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
Abdelrahman Omran
 
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
 
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps
Neha Sharma
 

What's hot (20)

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
PWA - Progressive Web Apps
PWA - Progressive Web AppsPWA - Progressive Web Apps
PWA - Progressive Web Apps
 
Getting Started with Progressive Web Apps
Getting Started with Progressive Web AppsGetting Started with Progressive Web Apps
Getting Started with Progressive Web Apps
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - 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
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Frontend 'vs' Backend Getting the Right Mix
Frontend 'vs' Backend   Getting the Right MixFrontend 'vs' Backend   Getting the Right Mix
Frontend 'vs' Backend Getting the Right Mix
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
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 with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
 
An introduction to Progressive Web Apps
An introduction to Progressive Web AppsAn introduction to Progressive Web Apps
An introduction to Progressive Web Apps
 
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
 
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 apps Progressive web apps
Progressive web apps
 

Viewers also liked

Facebook for Business
Facebook for BusinessFacebook for Business
Facebook for Business
Jobin George
 
WHITEHEAD - Training and Employment Report
WHITEHEAD - Training and Employment ReportWHITEHEAD - Training and Employment Report
WHITEHEAD - Training and Employment Report
Troy Whitehead
 
Infograafin jakaminen verkossa infograafi
Infograafin jakaminen verkossa infograafiInfograafin jakaminen verkossa infograafi
Infograafin jakaminen verkossa infograafi
Pekka Tuominen
 
Equipo 6
Equipo 6Equipo 6
Aikakausmediat somessa / marraskuu 2016
Aikakausmediat somessa / marraskuu 2016Aikakausmediat somessa / marraskuu 2016
Aikakausmediat somessa / marraskuu 2016
Aikakausmedia
 
Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...
Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...
Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...
Zabbix
 
Mozilla and Areas of contributions
Mozilla and Areas of contributionsMozilla and Areas of contributions
Mozilla and Areas of contributions
Sumanth Damarla
 
Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016
Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016
Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016
Zabbix
 
Devoxx 2016 - Docker Nuts and Bolts
Devoxx 2016 - Docker Nuts and BoltsDevoxx 2016 - Docker Nuts and Bolts
Devoxx 2016 - Docker Nuts and Bolts
Patrick Chanezon
 
Ib assignment tesco
Ib assignment  tescoIb assignment  tesco
Ib assignment tesco
Maha Akin
 
Meet cute-between-ebpf-and-tracing
Meet cute-between-ebpf-and-tracingMeet cute-between-ebpf-and-tracing
Meet cute-between-ebpf-and-tracing
Viller Hsiao
 
Zabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with Zabbix
Zabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with ZabbixZabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with Zabbix
Zabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with Zabbix
Zabbix
 
Scaling Like Twitter with Apache Mesos
Scaling Like Twitter with Apache MesosScaling Like Twitter with Apache Mesos
Scaling Like Twitter with Apache Mesos
Mesosphere Inc.
 
Linux kernel tracing
Linux kernel tracingLinux kernel tracing
Linux kernel tracing
Viller Hsiao
 
Orchestrating Linux Containers while tolerating failures
Orchestrating Linux Containers while tolerating failuresOrchestrating Linux Containers while tolerating failures
Orchestrating Linux Containers while tolerating failures
Docker, Inc.
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Fastly
 
Machine Learning in Magento 2
Machine Learning in Magento 2Machine Learning in Magento 2
Machine Learning in Magento 2
Alexander Makeev
 
You Suck At PowerPoint!
You Suck At PowerPoint!You Suck At PowerPoint!
You Suck At PowerPoint!
Jesse Desjardins - @jessedee
 

Viewers also liked (18)

Facebook for Business
Facebook for BusinessFacebook for Business
Facebook for Business
 
WHITEHEAD - Training and Employment Report
WHITEHEAD - Training and Employment ReportWHITEHEAD - Training and Employment Report
WHITEHEAD - Training and Employment Report
 
Infograafin jakaminen verkossa infograafi
Infograafin jakaminen verkossa infograafiInfograafin jakaminen verkossa infograafi
Infograafin jakaminen verkossa infograafi
 
Equipo 6
Equipo 6Equipo 6
Equipo 6
 
Aikakausmediat somessa / marraskuu 2016
Aikakausmediat somessa / marraskuu 2016Aikakausmediat somessa / marraskuu 2016
Aikakausmediat somessa / marraskuu 2016
 
Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...
Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...
Dimitri Bellini and Pietro Antonacci - Manage Zabbix Proxies in Remote Networ...
 
Mozilla and Areas of contributions
Mozilla and Areas of contributionsMozilla and Areas of contributions
Mozilla and Areas of contributions
 
Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016
Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016
Erik Skytthe - Monitoring Mesos, Docker, Containers with Zabbix | ZabConf2016
 
Devoxx 2016 - Docker Nuts and Bolts
Devoxx 2016 - Docker Nuts and BoltsDevoxx 2016 - Docker Nuts and Bolts
Devoxx 2016 - Docker Nuts and Bolts
 
Ib assignment tesco
Ib assignment  tescoIb assignment  tesco
Ib assignment tesco
 
Meet cute-between-ebpf-and-tracing
Meet cute-between-ebpf-and-tracingMeet cute-between-ebpf-and-tracing
Meet cute-between-ebpf-and-tracing
 
Zabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with Zabbix
Zabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with ZabbixZabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with Zabbix
Zabbix Conference LatAm 2016 - Jessian Ferreira - Wireless with Zabbix
 
Scaling Like Twitter with Apache Mesos
Scaling Like Twitter with Apache MesosScaling Like Twitter with Apache Mesos
Scaling Like Twitter with Apache Mesos
 
Linux kernel tracing
Linux kernel tracingLinux kernel tracing
Linux kernel tracing
 
Orchestrating Linux Containers while tolerating failures
Orchestrating Linux Containers while tolerating failuresOrchestrating Linux Containers while tolerating failures
Orchestrating Linux Containers while tolerating failures
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Machine Learning in Magento 2
Machine Learning in Magento 2Machine Learning in Magento 2
Machine Learning in Magento 2
 
You Suck At PowerPoint!
You Suck At PowerPoint!You Suck At PowerPoint!
You Suck At PowerPoint!
 

Similar to Progressive Web Apps - Overview & Getting Started

Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
WebGuru Infosystems Pvt. Ltd.
 
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
Magic Software
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
Shailen Sukul
 
Progressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent Convento
DEVCON
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
Jason Grigsby
 
PWA for PHP Developers
PWA for PHP DevelopersPWA for PHP Developers
PWA for PHP Developers
Ben Marks
 
Webapi
WebapiWebapi
Webapi
Jan Jongboom
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
Filip Rakowski
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
Ömer Göktuğ Poyraz
 
New trends on web platform
New trends on web platformNew trends on web platform
New trends on web platform
Kenneth Rohde Christiansen
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentation
bhavesh singh
 
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
Imran Sayed
 
progressive web app
 progressive web app progressive web app
progressive web app
RAGINI .
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Robert Nyman
 
7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services
Katy Slemon
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
Sankalp Khandelwal
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
Imran Sayed
 
Amp your site an intro to accelerated mobile pages
Amp your site  an intro to accelerated mobile pagesAmp your site  an intro to accelerated mobile pages
Amp your site an intro to accelerated mobile pages
Robert McFrazier
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
FDConf
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
Jan Jongboom
 

Similar to Progressive Web Apps - Overview & Getting Started (20)

Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
 
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
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
 
Progressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent Convento
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
PWA for PHP Developers
PWA for PHP DevelopersPWA for PHP Developers
PWA for PHP Developers
 
Webapi
WebapiWebapi
Webapi
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
New trends on web platform
New trends on web platformNew trends on web platform
New trends on web platform
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentation
 
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
 progressive web app progressive web app
progressive web app
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
 
Amp your site an intro to accelerated mobile pages
Amp your site  an intro to accelerated mobile pagesAmp your site  an intro to accelerated mobile pages
Amp your site an intro to accelerated mobile pages
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
 

Recently uploaded

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 

Recently uploaded (20)

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 

Progressive Web Apps - Overview & Getting Started

  • 1. • Gaurav Behere • http://gauravbehere.in
  • 2. Life is a race, so is web. Performance of a web app is not an add on/ enhancement or a nice to have thing. It is a must. Treat slowness of your web app as a DEFECT. Go and raise a defect now.
  • 3. Usual Methods of Optimizing Performance on Web 1. Caching – Server Side/ Client Side 2. Writing optimized code 3. Making use of the power of browser: app cache/ local storage/ indexedDB/ web workers etc 4. Reducing HTTP calls in terms of code minification/uglification, image sprites etc ………. (There are many)
  • 4. Chrome Dev Tools – A Friend Forever Profiles: Heap Snapshot Profiles: CPU Profile Network & Execution timeline Audits & Optimization Hints
  • 5. Mobile Application + Web Application = PWA Why should I code twice or port the same in a completely different format ? How to fill gaps between a mobile application & hybrid web app ported as APK Why shouldn’t the same code work for both ?
  • 6. Getting Bothered Already ?? You are already using progressive web apps !
  • 7. Progressive Web Apps Progressive Responsive Connectivity independent App-like Safe Discoverable Re-engageable Installable Linkable
  • 8. How Stuff Works ! Service Workers Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more. We can handle that event with full control, checking for cached data and returning immediately, or allowing the request to continue to the remote server. Our script acts as a proxy, or middleware, for the request.
  • 9. . Cache Manifest . More than web workers . Offline Support . Install -> Activate -> Fetch -> Idle . Post Message APIs . Dedicated socket to receive push subscriptions . Background Sync Read Syntax Here: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
  • 10. App Shell App shell is a design modal that suggests, what to cache & what not. Static theme of the page – header, footer, menus, together are called App Shell.
  • 11. Push Notifications Yes ! Because as a web app developer we needed it badly. Push notification is the most important thing which was missing from a web application to be ported as mobile app. Service worker allows you to have a dedicated communication link for push messages. https://firebase.google.com/docs/cloud-messaging/
  • 12. Show Time Flipkart Lite, Success Story: https://developers.google.com/web/showcase/2016/flipkart More Demos: http://pwa.rocks During tech talk a demo was given with switching on/off the Wi-Fi in the phone & showing the ability of the app to detect network change & caching.
  • 13. References • http://blog.lamplightdev.com/2015/01/06/A-Simple- ServiceWorker-App/ • https://developer.mozilla.org/en/docs/Web/API/Service_Wor ker_API • https://developers.google.com/web/fundamentals/getting- started/primers/service-workers • http://blog.ionic.io/what-is-a-progressive-web-app/