A brief intro to progressive web apps & conventional ways of performance optimization on web. The presentation was given as part of a tech talk, thus the readers are suggested to read through the reference links as well.

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/