Progressive Web Apps – the universal benefits

A short introduction into the essential aspects of Progressive Web Apps.

Transcript

1. The universal benefits Radimir Bitsov @radibit Progressive Web Apps
2. @radibit
3. @radibit Radimir Bitsov Front-end engineer who ❤ web performance, accessibility, and interface animation.
4. @radibit @radibit GitHub · Twi er · CodePen
5. @radibit A11y Meetup Berlin #3
6. @radibit What is Progressive Web App?
7. @radibit
8. @radibit https://www
9. @radibit https :// www
10. “Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications.” h ps://developer.mozilla.org/en-US/Apps/Progressive
11. “These apps work everywhere and provide several features that give them the same user experience advantages as native apps.” h ps://developer.mozilla.org/en-US/Apps/Progressive
12. @radibit “These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.” Alex Russell, 
 Senior Staff So ware Engineer, Google Progressive Web Apps: Escaping Tabs Without Losing Our Soul
13. @radibit PWA is secure
14. @radibit PWA is responsive
 ⌚
15. @radibit PWA is fresh
16. @radibit Wait, Service Worker?
17. @radibit Service Worker A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction like push notifications and background sync. Service Workers: an Introduction Application Service Worker Cache Network
18. @radibit No Service Worker Installing Service Worker lifecycle The Service Worker Lifecycle
19. @radibit No Service Worker Installing Activated Error Service Worker lifecycle The Service Worker Lifecycle
20. @radibit No Service Worker Installing Activated Error Idle Terminated Fetch / Message Service Worker lifecycle The Service Worker Lifecycle
21. @radibit Service Worker resources
22. @radibit Service Worker resources
23. @radibit Service Worker resources
24. @radibit PWA is offline first
25. @radibit PWA is discoverable
26. @radibit Wait, Web App Manifest?
27. @radibit Web App Manifest A JSON file that gives information about our app such as name, description, theme color, icons for the home screen, and a splash screen. Its purpose is to install web apps to the home screen of a device, providing users with quicker access and a richer experience. Web App Manifest
28. @radibit Tools ⚒
29. @radibit PWA Builder A tool that takes data form your site and uses that to generate cross- platform Progressive Web App. h ps://www.pwabuilder.com/
30. @radibit Sonarwhal A tool that can analyze your website and generate a report which can help you to fix potential performance bo lenecks, accessibility and security issues. h ps://sonarwhal.com/
31. If you’re building web apps with performance, accessibility, and security in mind using some of the modern web features, you’re already creating a PWA.
32. @radibit Why PWA?
33. @radibit comScore Mobile Metrix, U.S., Age 18+, June 2016 Mobile web engagement A research on the top 1000 mobile apps vs. the top 1000 mobile web sites 186.6 9.3 Average minutes per visitor Mobile Web Apps
34. @radibit comScore Mobile Metrix, U.S., Age 18+, August 2017 Mobile web is attracting larger audiences A research on the top 500 mobile apps vs. the top 500 mobile web sites 7.0 15.7 Average monthly unique visitors (Million) Mobile Web Apps
35. @radibit Pinterest PWA Performance Case Study Same experience, reduced download cost Comparing Pinterest PWA to the native apps 9.6 MB 56 MB Android 150 KB iOS PWA
36. @radibit Quick and seamless installation process Progressive Web Apps: a love story
37. There is no bigger more popular platform than the Web. PWA combines the ease of access and reach of the Web, along the immersive experience of the native apps.
38. I’m betting on the Web as a platform and I’m all in ❤ How about you
39. @radibit Thank you @radibit Slides: h p://bit.ly/2wmCreb