Increase Performances and User Engagement with progressive Web Apps; Francesco Leardini - Trivadis TechEvent 2019

1. BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA
HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH
@paco_ITA
dev.to/paco_ita
Francesco Leardini

2. Once Upon A Time There Was The Downasaur…

3. Modern Websites Nowadays!
Branded offline pages Engaging pages

4. PWAs vs Native Apps https://whatwebcando.today

5. A Small Test…
NATIVE APP PWA

6. Web App Manifest (manifest.json)
Browser
Standalone
Fullscreen
Browser
Standalone
Fullscreen

7. Offline Content & Background Jobs
• is a component of JavaScript code
• works as a proxy between the browser and the network
• runs in the background on a separate thread (no blocking)
• works only on secure connections (localhost is considered secure)
service workerA :

8. Angular Caching Strategies For Data Requests
Performance (default) Freshness

9. Stale While Revalidate Strategy
Ideal for: frequently updating resources,
but the latest version is not so important (eg. avatar images)

10. Stale While Revalidate Strategy

11. PWA Tools

14. Service Workers In Angular
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

15. A Basic Angular PWA
https://github.com/pacoita/angular-pwa-boilerplate

16. How can we do
better?
CACHE API allows to cache only GET Request…

17. Firebase Platform

18. 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

19. A never offline web application

20. Re-engage Users With Push Notifications

21. Push Notifications Success Rules
Send meaningful informationSend meaningful information Send meaningful information ☺

22. Push Notifications Failure Reasons
It’s timely: The user’s behavior, location, or preference
triggers the notification.
It’s personal: The content of the push appeals to the user
as an individual
It’s actionable: The push makes it clear what the user
should do next.

23. 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

24. VAPID Generation
Npm web-push libraryFirebase platform

25. Push Notifications
PushSubscription
{
"endpoint": "https://fcm.googleapis.com/fcm/send/cbx2Qaa....",
"expirationTime": null,
"keys": {
"p256dh": "BOXYnlKnMkzlMc6xlIjD8OmqVh-….",
"auth": "if-YFywyb4g-bFB1hO9WMw=="
}
}

26. Angular swPush class

27. Push Notifications
PushSubscription
{
"endpoint": "https://fcm.googleapis.com/fcm/send/cbx2Qaa....",
"expirationTime": null,
"keys": {
"p256dh": "BOXYnlKnMkzlMc6xlIjD8OmqVh-….",
"auth": "if-YFywyb4g-bFB1hO9WMw=="
}
}

28. For Further Details…
https://dev.to/paco_ita @paco_ITA