Aggressive Web Apps at Web Directions Code

Push notifications on the web can be a force for good, but is that how they are coming across? We'll take a look at how to implement push notifications in Angular applications, from permissions to notification. Then we'll see how it's being done wrong and how to improve on that.

We'll then look at the notifications themselves, find out what the best kind of notifications are and how not to wind up with your app's, or the entire web's, notifications blocked forever.

--

Links:

Permissions on the web suck: https://philna.sh/blog/2018/01/08/permissions-on-the-web-suck/

Push notifications documentation: https://developers.google.com/web/fundamentals/push-notifications/

Discussion on requiring user input: https://github.com/WICG/interventions/issues/49
Permissions API spec: https://w3c.github.io/permissions/

Transcript

1. AGGRESSIVE WEB APPS
2. Ketan Joshi @KetanJ0 Dear website, - I don't want you to post notifications to my desktop - I don't want to subscribe to your thing via a popup - I don't want you to know my location - Please stop autoplaying that video - I am angry and sad now 7:17 PM - May 13, 2018 31.2K 8,643 people are talking about this @philnash
3. Aggressive Web Apps Good push noti cations Permissions @philnash
4. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
5. PROGRESSIVE WEB APPS @philnash
7. Service Worker Support ✅ ✅ ✅ ✅ ✅ @philnash
8. PUSH NOTIFICATIONS @philnash
9. Push Noti cation Support ✅ ✅ ✅ ❌ ✅ @philnash
10. @philnash
11. @philnash
12. GOOD PUSH NOTIFICATIONS
13. I don't want you to post noti cations to my desktop @philnash
14. I DON'T BELIEVE THIS @philnash
15. PUSH NOTIFICATIONS ARE INCREDIBLY USEFUL @philnash
16. Side note I believe that you don't want push noti cations @philnash
17. Good noti cations • Appointment reminders • Chat alerts • ETA alerts • Event updates @philnash
18. TIMELY, ACTIONABLE AND PERSONAL @philnash
19. TIMELY @philnash
20. Timely noti cations "Daisy just sent you a message" "Your car is here" "You can check in now" @philnash
21. @philnash
22. @philnash
23. TIME OF DAY, TIME ZONE, NUMBER OF NOTIFICATIONS @philnash
24. ACTIONABLE @philnash
25. Actionable noti cations "Daisy just sent you a message" "Your car is here" "You can check in now" @philnash
26. PERSONAL @philnash
27. Personal noti cations "Daisy just sent you a message" "Your car is here" "You can check in now" @philnash
28. KNOW WHEN TO BREAK THE RULES @philnash
29. @philnash
30. LET THEM OPT OUT WITHIN YOUR APPLICATION @philnash
31. @philnash
32. THE ALTERNATIVE? @philnash
33. @philnash
34. @philnash
35. @philnash
36. WE NEED TO TALK ABOUT... @philnash
37. PERMISSIONS
38. Permissions • Push noti cations • Geolocation • Media Devices • Bluetooth, MIDI, WebUSB... @philnash
39. @philnash
40. @philnash
41. @philnash
42. @philnash
43. @philnash
44. NO CONTEXT @philnash
45. STOP THIS!
46. @philnash
47. Firefox @firefox You know who loves push notifications? . . . yeah . . . We couldn't think of anyone either so we made it so you can deny sites from even asking if you want to receive them: techcrunch.com/2018/03/13/fir… 8:04 AM - May 23, 2018 5,373 1,272 people are talking about this Firefox can now block those annoying notification requests Virtually every random site you go to these days wants you to su… techcrunch.com @philnash
48. PLEASE DO NOT DEMAND PERMISSIONS ON PAGE LOAD @philnash
49. PERMISSIONS WILL BECOME THE NEW POPUPS @philnash
50. WHEN USERS DISMISS PERMISSIONS BY DEFAULT THE WEB PLATFORM LOSES ITS POWER @philnash
51. @philnash
52. PLEASE DO NOT DEMAND PERMISSIONS ON PAGE LOAD @philnash
53. SUGGESTIONS
54. WAIT @philnash
55. @philnash
56. @philnash
57. UNLESS IT'S OBVIOUS @philnash
58. @philnash
59. FOR THE FUTURE @philnash
60. TOGETHER WE CAN FIX THIS! @philnash
61. BROWSERS SHOULD ENFORCE A USER INTERACTION BEFORE ASKING FOR PERMISSION @philnash
62. GET INVOLVED @philnash
63. Get involved https:/ /github.com/WICG/interventions/issues/49 @philnash
64. Get involved Permissions API https:/ /w3c.github.io/permissions @philnash
65. CONCLUSION
66. PUSH NOTIFICATIONS ARE AWESOME FOR THE RIGHT THINGS @philnash
67. DO NOT DEMAND PERMISSIONS ON PAGE LOAD @philnash
68. MAKE NOTIFICATIONS TIMELY, ACTIONABLE AND PERSONAL @philnash
69. OR DON'T. BUT DO ALLOW OPT OUTS @philnash
70. IF USERS BLOCK ALL NOTIFICATIONS THE WHOLE WEB SUFFERS @philnash
71. BUILD PROGRESSIVE WEB APPS @philnash
72. NOT AGGRESSIVE WEB APPS @philnash
73. THANKS!
74. Thanks! @philnash http:/ /philna.sh philnash@twilio.com