Save 37% off PRO during our Black Friday Sale! »

Aggressive Web Apps at Web Directions Code

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
August 02, 2018

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/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

August 02, 2018
Tweet

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

  6. None
  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