Modern Web Summit

Real World PWAs(Building Flipkart Lite)

Abhinav Rastogi @_abhinavrastogi

Modern Web Summit

Main Considerations

Modern Web Summit

Build for mobile India, run anywhere

Build for a complex eCommerce marketplace

Modern Web Summit

What we needed to do

(What is a Progressive Web App?)

Modern Web Summit

‣ performance as a feature‣ immersive experience‣ security‣ solve for flaky networks‣ engagement‣ always up-to-date

What we needed to do

Modern Web Summit

How we achieved it

Modern Web Summit

How we achieved it

‣ service workers‣ push notifications‣ add to home screen, splash screen‣ smooth animations (RAIL, FLIP)‣ security (HTTPS, CSP)

Modern Web Summit

Client-side AppsSingle Page Apps

Modern Web Summit

Modern Web Summit

Real world Service Workers!

Modern Web Summit

First thing: Kill Switch(and versioning)

Modern Web Summit

self.addEventListener('install', event => {

event.waitUntil(self.skipWaiting());

});

self.addEventListener('activate', event => {

event.waitUntil(self.clients.claim());

});

Modern Web Summit

sw-toolboxBy Matt Scales and Jeff Posnick

Modern Web Summit

express-style routesIt helps with SEO too!

Modern Web Summit

various network strategiescache first, network first, fastest,

cache only, network only

Modern Web Summit

“read through cache”always stay up to date

Modern Web Summit

Our learnings

‣ cache busting (one version behind)‣ avoid dynamic content in shells‣ skipWaiting so that new SW can override existing SW

immediately‣ 301s are currently dangerous

Modern Web Summit

Tracking/Analytics

Modern Web Summit

Our learnings

‣ important for perf consideration‣ be wary of automatic UI hooks‣ tracking library file size‣ queue events before library loads?‣ CSP can cause havoc with beacons!

Modern Web Summit

CORS

Cross Origin Resource Sharing

Modern Web Summit

CORS

‣ api might be on different domain/hostname‣ especially on dev/staging envs‣ API server needs to understand OPTIONS request‣ respond with correct access-control headers‣ browser plugins for debugging on dev machine

Modern Web Summit

Splash screen

Two is better than one!

Modern Web Summit

Modern Web Summit

Performance

‣ treat performance as a feature‣ RAIL: Response, Animation, Idle, Load‣ animate the right properties: transform and opacity‣ DevTools is your friend!‣ trace on the device

Modern Web Summit

What’s next?

‣ HTTP2‣ HTML streaming‣ link prefetch‣ script type module