Slides from my talk at the Modern Web Summit organised by Flipkart in Bangalore on 4 Feb 2016. Here I share our learnings we got while implementing modern web technologies like service workers, manifest, push notifications, https, csp, http2 etc to build an amazing user experience on the mobile web.

1. Modern Web Summit
Real World PWAs
(Building Flipkart Lite)
Abhinav Rastogi
@_abhinavrastogi

2. Modern Web Summit
Main Considerations

3. Modern Web Summit
Build for mobile India, run anywhere
Build for a complex eCommerce marketplace

4. Modern Web Summit
What we needed to do
(What is a Progressive Web App?)

5. Modern Web Summit
‣ performance as a feature
‣ immersive experience
‣ security
‣ solve for flaky networks
‣ engagement
‣ always up-to-date
What we needed to do

6. Modern Web Summit
How we achieved it

7. Modern Web Summit
How we achieved it
‣ service workers
‣ push notifications
‣ add to home screen, splash screen
‣ smooth animations (RAIL, FLIP)
‣ security (HTTPS, CSP)

8. Modern Web Summit
Client-side Apps
Single Page Apps

9. Modern Web Summit

10. Modern Web Summit
Real world Service Workers!

11. Modern Web Summit
First thing: Kill Switch
(and versioning)

12. Modern Web Summit
self.addEventListener('install', event => {
event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});

13. Modern Web Summit
sw-toolbox
By Matt Scales and Jeff Posnick

14. Modern Web Summit
express-style routes
It helps with SEO too!

15. Modern Web Summit
various network strategies
cache first, network first, fastest,
cache only, network only

16. Modern Web Summit
“read through cache”
always stay up to date

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

18. Modern Web Summit
Tracking/Analytics

19. 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!

20. Modern Web Summit
CORS
Cross Origin Resource Sharing

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

22. Modern Web Summit
Splash screen
Two is better than one!

23. Modern Web Summit

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

25. Modern Web Summit
What’s next?
‣ HTTP2
‣ HTML streaming
‣ link prefetch
‣ script type module