progressive web apps - overview & getting started

• 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 Side2. Writing optimized code3. 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 SnapshotProfiles: CPU ProfileNetwork & Execution timelineAudits & Optimization Hints

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 AppsProgressive

Responsive Connectivity independent

App-likeSafe

DiscoverableRe-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.

. Cache Manifest

. More than web workers

. Offline Support

. Install -> Activate -> Fetch -> Idle

. Post Message APIs

. Dedicated socket to receive push subscriptions

. Background SyncRead 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 NotificationsYes ! 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.

References• http://blog.lamplightdev.com/2015/01/06/A-Simple-

ServiceWorker-App/• https://developer.mozilla.org/en/docs/Web/API/

Service_Worker_API• https://developers.google.com/web/fundamentals/getting-

started/primers/service-workers• http://blog.ionic.io/what-is-a-progressive-web-app/