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

Aggressive Web Apps at Front End London

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
August 31, 2017

Aggressive Web Apps at Front End London

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 push notifications permissions are being implemented and how we can do it better. 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:
CanIUse Push Notifications? http://caniuse.com/#search=push
Push notification documentation from Google: https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/
Permissions UX: https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/permission-ux
That Slack flow chart tweet: https://twitter.com/mathowie/status/837735473745289218
How to stop websites from asking to show notifications 😱: https://www.howtogeek.com/288946/how-to-stop-websites-from-asking-to-show-notifications/

The Guardian on Web Push Notifications: https://medium.com/the-guardian-mobile-innovation-lab/tagged/web-notifications
The Guardian on generating images in JavaScript without canvas for notifications : https://medium.com/the-guardian-mobile-innovation-lab/generating-images-in-javascript-without-using-the-canvas-api-77f3f4355fad

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

August 31, 2017
Tweet

Transcript

  1. AGGRESSIVE WEB APPS

  2. PHIL NASH @philnash https:/ /philna.sh philnash@twilio.com

  3. Text SUBSCRIBE to: 07403 940495

  4. CAT FACTS!

  5. STOP THIS!

  6. STOP THIS! STOP, STOPALL, UNSUBSCRIBE, CANCEL, END, QUIT

  7. IT'S NOT ALL TERRIBLE

  8. SMS ALERTS POWER 2FA codes ETA alerts Appointment reminders

  9. THESE MESSAGES ARE TIMELY, ACTIONABLE AND PERSONAL

  10. WHY?

  11. None
  12. None
  13. window.addEventListener('load', ev => { if ('serviceWorker' in navigator && 'PushManager'

    in window) { navigator.serviceWorker.register('/sw.js').then(reg => { reg.pushManager .subscribe({ userVisibleOnly: true }) .then(subscription => { console.log('Push subscription successful!'); }); }); } });
  14. None
  15. CAT FACTS!

  16. PERMISSIONS

  17. PERMISSIONS Notifications Geolocation Media Devices Bluetooth, Midi, USB...

  18. PERMISSIONS Notifications Geolocation Media Devices Bluetooth, Midi, USB...

  19. None
  20. None
  21. None
  22. PLEASE! DO NOT DEMAND NOTIFICATION PERMISSIONS ON PAGE LOAD

  23. WORRY PERMISSIONS WILL BECOME THE NEW POPUPS

  24. WORRY PERMISSIONS WILL BE REVILED AND DISMISSED BY USERS

  25. WORRY WHEN USERS DISMISS PERMISSIONS BY DEFAULT THE WEB PLATFORM

    LOSES ITS POWER
  26. PLEASE! DO NOT DEMAND NOTIFICATION PERMISSIONS ON PAGE LOAD

  27. SUGGESTION? BROWSERS SHOULD ENFORCE A USER INTERACTION BEFORE ASKING FOR

    A PERMISSION
  28. BETTER PATTERNS

  29. WAIT

  30. None
  31. None
  32. UNLESS IT'S OBVIOUS

  33. None
  34. NOTIFICATIONS

  35. CAT FACTS!

  36. TIMELY, ACTIONABLE AND PERSONAL

  37. TIMELY

  38. None
  39. None
  40. TIME OF DAY, TIME ZONE, NUMBER OF NOTIFICATIONS

  41. ACTIONABLE

  42. "X sent you a message" "Your car is here" "You

    can check in now"
  43. PERSONAL

  44. "X sent you a message" "Your car is here" "You

    can check in now"
  45. KNOW WHEN TO BREAK THE RULES

  46. None
  47. PEOPLE DON'T WANT NOTIFICATIONS ALL THE TIME

  48. LET THEM OPT OUT INSIDE YOUR APPLICATION

  49. THE ALTERNATIVE?

  50. None
  51. None
  52. None
  53. None
  54. IT'S REALLY EASY TO BLOCK NOTIFICATIONS

  55. None
  56. IT'S REALLY HARD TO UNBLOCK NOTIFICATIONS

  57. SMS

  58. START AGAIN! START, YES, UNSTOP

  59. CAT FACTS!

  60. None
  61. CONCLUSION

  62. PUSH NOTIFICATIONS ARE AWESOME FOR THE RIGHT THINGS

  63. DON'T TRIGGER PERMISSIONS STRAIGHT AWAY

  64. MAKE NOTIFICATIONS TIMELY, ACTIONABLE AND PERSONAL

  65. OR DON'T BUT DO ALLOW AN OPT OUT

  66. BUILD PROGRESSIVE WEB APPS

  67. NOT AGGRESSIVE WEB APPS

  68. CAT FACTS!

  69. THANKS

  70. PHIL NASH @philnash https:/ /philna.sh philnash@twilio.com