progressive web apps - overview & getting started
TRANSCRIPT
• 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/