Introduction to Progressive Web App, a new kind of app that stands in the middle of native app and web app.

1. Progressive Web Apps for
Beginners
Pietro Alberto Rossi

2. Pietro Alberto Rossi
pietroalberto.rossi@gmail.com
www.sprik.it
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

3. Before starting…

4. @: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting

5. Before starting
13% Mobile web
87% Apps
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

6. Before starting
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

7. Before starting
Progressive Web Apps!!!
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

8. What are the Progressive Web Apps?

9. Progressive Web Apps
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.
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

10. Progressive Web Apps
A Progressive Web App is
•Progressive - Works for every user, regardless of
browser choice because it's built with progressive
enhancement as a core tenet.
•Responsive - Fits any form factor: desktop, mobile,
tablet, or whatever is next.
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

11. Progressive Web Apps
• Connectivity independent - Enhanced with service
workers to work offline or on low-quality networks.
• App-like - Feels like an app to the user with app-style
interactions and navigation because it's built on the
app shell model.
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

12. Progressive Web Apps
• Fresh - Always up-to-date thanks to the service worker
update process.
• Safe - Served via HTTPS to prevent snooping and
to ensure content hasn't been tampered with.
• Discoverable - Is identifiable as an "application" thanks
to W3C manifest and service worker registration scope,
allowing search engines to find it.
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

13. Progressive Web Apps
• Re-engageable - Makes re-engagement easy through
features like push notifications.
• Installable - Allows users to "keep" apps they find most
useful on their home screen without the hassle of an
app store.
• Linkable - Easily share via URL, does not require complex
installation.
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

14. History Case

15. The Washington Post
https://wapo.com/pwa
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

16. The Washington Post
Add to Home Screen
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

17. The Washington Post
Add to Home Screen
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

18. The Washington Post
Splash Screen
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

19. The Washington Post
Launch it!
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

20. The Washington Post
Task Manager
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

21. AliExpress
2x more page views
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

22. Jumia
38% open rate
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

23. A bit of codes

24. manifest.json
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

25. manifest.json
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

26. manifest.json
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

27. pwa.html
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

28. main.js
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

29. sw.js
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

30. Final Considerations

31. Final Considerations
• Instant Loading
• Add to Home Screen
• Push Notifications
• Fast
• Secure
• Responsive
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

32. Final Considerations
Code, code
and code!
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

33. Final Considerations
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

34. Final Considerations
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-
fb8555addcbb

35. Questions?

36. References
+PietroAlbertoRossi
@sprik89
Pietro Alberto Rossi
Pietro Alberto Rossi
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

37. Resources
• Washington Post PWA - https://wapo.com/pwa
• SSLMate - https://sslmate.com
• Let’s Encrypt - https://letsencrypt.org/
• Manifest Generator - https://brucelawson.github.io/manifest/
• Manifest Validator - https://manifest-validator.appspot.com/
• Favicon Generator - http://realfavicongenerator.net/
• Code labs - https://codelabs.developers.google.com/pwa-roadshow
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

38. Grazie