Increase performance and users engagement with PWAs

Progressive Web Applications (PWAs) are the state of art of modern web solutions. In this session we will analyze PWAs from different perspectives and describe which tools we can use to develop them with ease. By choosing the proper caching strategies it is possible to drastically improve the performance of our web site, providing data even without a valid network connection. We will then proceed seeing how to overcome the limitations of the Cache API in order to create a truly seamless experience. In addition, push notifications will be presented as a powerful mechanism to retain and re-engage our users.

Transcript

1. Increase Performance with s!!
2. Increase User Engagement with s!!
3. BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH Francesco Leardini Senior Consultant & Angular Trainer @paco_ITA dev.to/paco_ita
5. @paco_ITA
6. Branded offline pages Engaging pages @paco_ITA
7. https://whatwebcando.today @paco_ITA
8. https://whatwebcando.today @paco_ITA
9. A Small Test… NATIVE APP @paco_ITA PWA
10. Speed Thanks to Caching Strategies
11. @paco_ITA Cache First Network First Performance (default) Freshness
12. Stale While Revalidate Strategy Ideal for: resources updating frequently, but providing the latest version is not so important @paco_ITA
13. Cache & Network Race Strategy Ideal for: devices with slow disk access and performance has first priority @paco_ITA
14. PWA Tools
15. @paco_ITA
16. @paco_ITA
17. @paco_ITA
18. @paco_ITA
19. @paco_ITA
20. Angular Service Worker With angular-cli (1.6+) we can easily turn an existing application into a PWA: Two new files are added to our project: • ngsw-config.json • manifest.json @paco_ITA
21. A Basic Angular PWA https://github.com/pacoita/angular-pwa-boilerplate
22. How can we do better? CACHE API allows to cache only GET calls…
23. Firebase Platform @paco_ITA
24. Cloud Firestore • Out of the beta release (Oct 2017  Jan 2019) • NoSQL Database • Real-time data updates (3-way binding) • Offline support for mobile (iOS/Android) and web @paco_ITA
25. @paco_ITA
26. A never offline web application
27. @paco_ITA Increase Users Engagement!!
28. @paco_ITA Source: Localytics 2018
29. Send meaningful information Send meaningful information     @paco_ITA
30. Send meaningful information     @paco_ITA
31. Right time: collect geo-location data to know your users time zone Personal content: tailor the content for the single recipients Clear actions: make it clear what the user can do 3 Golden Rules @paco_ITA
32. Push Services @paco_ITA Apple Push Notification Service (APNs) Windows Push Notification Services (WNS)
33. Voluntary Application Server Identification (VAPID) Cryptographic public/private key pair: { "publicKey": "BLBx-qEa0qKbGDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qEFo", "privateKey": "PkVHOUKgY29NM7myQXXoGbp_bH_9j-cxW5cO-fGcSsA" } Public key: used as a identifier for subscribing the user to notifications sent by our server Private key: used by the server to sign messages, before sending them to the Push Service @paco_ITA
34. @paco_ITA Npm web-push library
35. @paco_ITA
36. @paco_ITA
37. PushSubscription @paco_ITA
38. Angular swPush class @paco_ITA
39. PushSubscription { "endpoint": "https://fcm.googleapis.com/fcm/send/cbx2Qaa....", "expirationTime": null, "keys": { "p256dh": "BOXYnlKnMkzlMc6xlIjD8OmqVh-….", "auth": "if-YFywyb4g-bFB1hO9WMw==" } } @paco_ITA
40. @paco_ITA
41. @paco_ITA
42. Test Push Notifications @paco_ITA
43. For Further Details… https://dev.to/paco_ita @paco_ITA