Progressive Web Apps

Transcript

1. PROGRESSIVE WEB APPS
2. UI Engineer @ NAMSHI.com I am SHIDHIN Hello!
3. PROGRESSIVE WEB APPS
4. Year 2012 ~ 2016
5. Why Apps ? ◦Great performance ◦Smooth animations and interactions ◦Instant loading and offline support ◦Easily accessible from home screen
6. Cons ? ◦Installation time ◦Updating is a pain ◦Not sharable ◦Dealing with low memory phones
7. A new Species
8. ◦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
9. PROGRESSIVE WEB APP Apply the super-powers progressively
10. WEB APPS ◦Secure ◦Good rendering performance ◦Smooth Animations
11. PROGRESSIVE ◦Offline support and instant loading ◦Push notifications ◦Add to Homescreen
12. Ingredients
13. ◦ A Service Worker ◦ Web Manifest ◦ High Performing App ◦ And YOU
14. ◦Promise based JavaScript worker ◦Programmable network proxy ◦Enables push notifications ◦Requires HTTPs SERVICE WORKER
15. Intercepting requests
16. ◦ Tell the browser how to launch the web app ◦ Simple JSON configuration WEB APP MANIFEST
17. Manifest JSON
19. ◦Smooth Animations ◦Better Frameworks ◦Always Profile your App WEB APP PERFORMANCE
20. “ Chrome DevTool is Your Best Friend More on developers.google.com/web
21. TOOLING
22. Google App shell SW-TOOLBOX Web App Manifest Generator SW-PRECACHE
23. “ REAL WORLD PWAs
24. FLIPKART LITE Flipkart is the most popular E-commerce website in India
25. POKEDEX.ORG An index of Pokémon, built as a client-side JavaScript webapp. Powered by ServiceWorker, PouchDB, virtual-dom, and web workers.
26. FLIPBOARD Flipboard is a social- network aggregation, magazine-format mobile app localized in more than 20 languages
27. FUTURE ?
28. HTML Streaming HTTP 2 Content Security Policies
29. THANKS! @shidhincr www.undefinednull.com