This document discusses progressive web apps (PWAs). It defines PWAs as applications that take advantage of new technologies to provide the best of mobile sites and native apps to users. PWAs are reliable, fast, and engaging. They work across all devices and platforms without installation. Core aspects of PWAs include application shells, web app manifests, and service workers. Major browsers support key PWAs features like caching, adding to home screens, and push notifications. Popular companies using PWAs include Flipkart, Paper Planes, and Housing. The document encourages building and migrating to PWAs.

1. NEW AGE OF WEB-APPS
By - Neha sharma twitter.com/hellonehha
PROGRESSIVE WEB APPS

2. NEHA SHARMAUI Tech Lead | JSLovers Organizer & Speaker
Contact me : twiiter.com/hellonehha | neha@jslovers.com

3. Mobile Web vs apps

4. Unique Users Engagement
MOBILE WEB MOBILE APPS

5. PROBLEMS

6. Slow Loading Low Network Native + Web Re-engagement

7. Progressive Web Apps

8. Progressive Web Applications take advantage of new
technologies to bring the best of mobile sites and
native applications to users. They're reliable, fast,
and engaging.

9. PROGRESSIVEWork everywhere...supercharged in modern browsers

10. FASTSay Bye Bye to white screen.After initial load

11. WORK OFFLINEEven on low quality network

12. FRESHData is always up-to-date. (Background Refresh)

13. INSTALLABLEAdd to homescreen

14. INTEGRATEDApp-like full screen theme

15. ENGAGINGPush Notifications (even when the browser is close)

16. Core of PWA

17. Application shell
Minimal HTML/CSS & JS that is required to power the user interface of a progressive web app

18. Web App Manifest
Let’s OVERLOAD the Loading… Screen

19. Service workers
Let’s take the NETWORK power

20. Push Notification
Engage the users

21. What all we need?

22. ● Chrome Latest
● HTTPS
● Local Server
● HTML/CSS/JS or whatever

23. Browser Support

24. Chrome Firefox Opera Samsung’s
browser
Microsoft Edge Safari
Cache API supported supported supported supported
In
Development
Under
consideration
Service workers supported supported supported supported
In
Development
Under
consideration
Add to homescreen supported supported supported supported
In
Development
No Plans
Push API supported supported supported supported
In
Development
No Plans

25. Who is Using?

26. FlipkartLite paperplanes.world housingGo

27. Where to use?

29. Source : google.com
Code Time

30. What are we going to build?

32. Demo : Recipe List
Code: https://github.com/Neha/PWA-Demo

33. Google Code lab
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
Migration to PWA

34. http://gadgets.ndtv.com/internet/features/why-googles-progressive-web-apps-make-sense-for-india-1463912

35. Thank You