Progressive Web Apps ( PWA ) by Shidhin C R at Codemtion Dubai

PROGRESSIVE WEB APPS

UI Engineer @ NAMSHI.com

I am SHIDHIN

Hello!

PROGRESSIVE WEB APPS

Year 2012 ~ 2016

Why Apps ?

○Great performance

○Smooth animations and interactions

○ Instant loading and offline support

○Easily accessible from home screen

Cons ?○ Installation time

○Updating is a pain

○Not sharable

○Dealing with low memory phones

A new Species

○ Installable ( but still sharable using urls )

○Can work offline and handle flaky connections

○Can give push notifications

○ Instant loading like native apps, and probably use splash screens

○Great rendering performance and silky smooth animations under 60fps.

○And still work as a normal web app from a URL

PROGRESSIVE WEB APP

Apply the super-powers progressively

WEB APPS

○Secure

○Good rendering performance

○Smooth Animations

PROGRESSIVE

○Offline support and instant loading

○Push notifications

○Add to Homescreen

Ingredients

○ A Service Worker

○ Web Manifest

○ High Performing App

○ And YOU

○Promise based JavaScript worker

○Programmable network proxy

○Enables push notifications

○Requires HTTPs

SERVICE WORKER

Intercepting requests

○ Tell the browser how to launch the web app

○ Simple JSON configuration

WEB APP MANIFEST

Manifest JSON

○Smooth Animations

○Better Frameworks

○Always Profile your App

WEB APP PERFORMANCE

“Chrome DevTool is Your Best Friend

More on developers.google.com/web

TOOLING

Google App shell

SW-TOOLBOX

Web App Manifest Generator

SW-PRECACHE

“REAL WORLD PWAs

FLIPKART LITE

Flipkart is the most popular E-commerce website in India

POKEDEX.ORG

An index of Pokémon, built as a client-side JavaScript webapp. Powered by ServiceWorker, PouchDB, virtual-dom, and web workers.

FLIPBOARD

Flipboard is a social-network aggregation, magazine-format mobile app localized in more than 20 languages

FUTURE ?

HTML Streaming

HTTP 2

Content Security Policies

THANKS!

@shidhincrwww.undefinednull.com