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

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?
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!'); }); }); } });
15. CAT FACTS!
16. PERMISSIONS
17. PERMISSIONS Notifications Geolocation Media Devices Bluetooth, Midi, USB...
18. PERMISSIONS Notifications Geolocation Media Devices Bluetooth, Midi, USB...
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
32. UNLESS IT'S OBVIOUS
34. NOTIFICATIONS
35. CAT FACTS!
36. TIMELY, ACTIONABLE AND PERSONAL
37. TIMELY
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
47. PEOPLE DON'T WANT NOTIFICATIONS ALL THE TIME
48. LET THEM OPT OUT INSIDE YOUR APPLICATION
49. THE ALTERNATIVE?
54. IT'S REALLY EASY TO BLOCK NOTIFICATIONS
56. IT'S REALLY HARD TO UNBLOCK NOTIFICATIONS
57. SMS
58. START AGAIN! START, YES, UNSTOP
59. CAT FACTS!
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