Service worker & their role in PWAs

Progressive Web Applications have gained unparalleled momentum in the tech world and are currently one of the hottest trends in Web Development. Find out how PWA attempts to combine features offered by most modern browsers with the benefits of mobile experience and how service workers make them fast, reliable & engaging.

Transcript

1. Service Workers & their role in PWAs PHP UK CONFERENCE 2018
2. Hi! I’m Ipsha. ☺ Mozilla Tech Speaker @ipsha21
3. WEB vs NATIVE? Not all decisions are as easy as this..
5. “Progressive Web Apps are experiences that combine the best of the web and the best of the apps.”
7. Mobile web apps ✓ High user reach Low user engage Native Mobile Apps ✓ High user engage Low user reach PWA ✓ High user engage ✓ High user reach
8. How are PWAs different? ➢ Leverages the web's low friction. ➢ Delivers app-like user experience. ➢ Uses modern web capabilities. ➢ From pages in browser tabs to immersive apps.
9. Add to homescreen – web pages to apps Create a static web app manifest file. • Background colour • Display mode • Description etc..
10. Application icon set and rendered in a standalone mode.
12. “In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you 20% of users.” - Gabor Cselle— Google Leverages low friction of the web?
14. Why PWAs, you wonder? Use and install instead of Install and use.
15. Progressive Web Apps Progressive App-like Add to Home Screen Linkable Discoverable
16. Progressive Web Apps Re-engagable Responsive Connectivity independent Safe
17. Service Workers The backbone of PWA
18. Service Workers “Service worker is a persistent, fully asynchronous, separately threaded event based worker with the ability to intercept network requests and cache responses.”
19. How does a service worker.. work? “Think of your web requests as planes taking off. A Service Worker is the air traffic controller that routes the requests. It can load from the network or even off the cache.” - Jeff Posnick, Google
20. Let’s recap.. • JavaScript file • Proxy servers in between the web app & the browser • Runs in the background, on a different thread • No direct DOM access - isn’t able to modify elements in the web page • Fully asynchronous • Works strictly with HTTPs • Cannot be used in private browsing mode.
21. Lifecycle of a Service Worker Register Install Activate
22. Registration Installation Activation Idle Fetch/Push message Terminated New Service worker Updated service worker Old Service worker still being used? Activates to become active worker Worker in waiting
23. Registering a Service Worker #code
24. Installing a Service Worker
25. #code – on install
26. Activate a Service Worker
27. #code – on activate
28. # Offline experiences How & when to use the cache?
29. Offline browsing with Flipkart Lite
30. General idea
31. Cache falling back to network – improving performance
32. Generic fallback – offline
33. #code – generic fallback
34. Push notifications
35. What is push? “The delivery of information from application server to the user in the form of a pop-up message or an alert when the client has opted for receiving certain timely updates from applications”
36. Why push matters? ENGAGEMENT RETENTION PERMISSION BASED TIMELY UPDATES NO FORCED COMMITMENTS RELEVANT INFORMATION
38. SAFETY FIRST – HTTPS ONLY!
39. Push workflow components: ➢ Client + Service Worker subscribes to receiving push messages (1) & eventually handles the notification (4). ➢ App Server initiates the delivery of a notification. ➢ Push Service a system for processing messages routing them to the correct clients. Service workers CLIENT Application Server Push service 1. 2. 3. 4.
40. Wait, WHAT?! 1. Draw some circles. 2. Draw rest of the owl.
41. What makes push notifications? “push” action of the server supplying message information to a service worker “notification” the action of the service worker sending the information to a user. Push API Notification API
42. # Subscribing Subscribe user to push messaging: ➢ Get permission from user to send them push message ➢ Subscribe to the push service. ➢ Get a subscription object = endpoint URL + client public key ➢ Send the subscription object to the server. ➢ Stored at the server, used when push message needs to be sent.
43. # Subscription object Subscription object = endpoint URL + client public key
44. # Send a push message - from server to push service ➢ Server generates the push message. ➢ Encrypts the message with client’s public key ➢ Sends the data to the endpoint URL on the push service. ➢ Push service routes the message to the service worker associated with the endpoint URL.
45. # Push Event ➢ Push service routes the message to the correct client associated with the unique endpoint URL ➢ Service Worker is woken up & Push Event is trigger ➢ Event listener to the Push Event handles the notification display
46. Handle Push Event
47. Source: Localytics
48. Don’t be too push-y!
49. PWA rocks! - https://pwa.rocks/
50. https://www.pwastats.com/
51. Mozilla Service Workers Cookbook https://serviceworke.rs/
52. https://jakearchibald.github.io/isserviceworkerready/
53. Thank you! Ipsha Bhidonia @ipsha21