Push notifications for fun and profit (if by profit you mean cats)

Service Workers are a new shiny for the web platform. They let you get offline experiences, background syncs and push notifications. By default, they do not let you get cats.
We will fix that.

Video: https://vimeo.com/137771040

Transcript

1. PUSH NOTIFICATIONS
   FUN PROFIT*
   for
   &
   *if by profit you mean cats
   

   View Slide

2. theiinternet needs
   more cats
   

   View Slide

3. you need to send mei
   more cats
   

   View Slide

4. @notwaldorf
   

   View Slide

5. View Slide

6. View Slide

7. polymer
   

   View Slide

8. ok so
   

   View Slide

9. confession
   i hate apps
   

   View Slide

10. lol battery lifei
    i hate apps
    

    View Slide

11. likei a lot
    i hate apps
    

    View Slide

12. i ὑ the web
    likei a lot
    

    View Slide

13. works everywherei*
    i ὑ the web
    

    View Slide

14. why do we think
    we ὑ apps?
    

    View Slide

15. we ὑ icons
    

    View Slide

16. we ὑ offline
    

    View Slide

17. we ὑ alerts
    

    View Slide

18. the web does too
    spoilers
    

    View Slide

19. web worker
    

    View Slide

20. service worker
    

    View Slide

21. omg!
    service worker
    

    View Slide

22. @jaffacake
    ☛
    service worker
    

    View Slide

23. offline alerts
    on theiweb!
    &
    

    View Slide

24. events not clicks
    works with
    

    View Slide

25. install
    events like
    

    View Slide

26. fetch
    events like
    

    View Slide

27. stop trying to makei
    happen
    fetch
    

    View Slide

28. it’s a proxy
    basically
    

    View Slide

29. lol browser cache
    

    View Slide

30. is it supported?
    but wait!
    

    View Slide

31. progressive enhancement
    it’s a web standard
    

    View Slide

32. only makes it better
    progressive enhancement
    

    View Slide

33. page
    

    View Slide

34. network
    XMLHttpRequest
    page
    

    View Slide

35. page
    service worker
    fetch()
    

    View Slide

36. page
    service worker network
    fetch()
    XHR
    

    View Slide

37. page
    service worker network
    fetch()
    XHR
    

    View Slide

38. 
    page
    service worker network
    cache
    fetch()
    XHR
    

    View Slide

39. 
    
    page
    service worker network
    cache
    fetch()
    XHR
    

    View Slide

40. page
    service worker network
    fetch()
    

    View Slide

41. 
    page
    service worker network
    cache
    fetch()
    

    View Slide

42. 
    
    page
    service worker network
    cache
    fetch()
    

    View Slide

43. page
    service worker network
    cache
    
    
    fetch()
    XHR
    

    View Slide

44. https all the time
    realtalk
    

    View Slide

45. push
    events like
    

    View Slide

46. surprisei!
    push notifications
    

    View Slide

47. View Slide

48. bit.ly/caturday-post
    
    

    View Slide

49. bit.ly/caturday-post
    

    View Slide

50. bit.ly/caturday-post
    

    View Slide

51. bit.ly/caturday-post
    

    View Slide

52. bit.ly/caturday-post
    

    View Slide

53. View Slide

54. https://youtu.be/ci7PfjnhTDU
    demo
    

    View Slide

55. more cats
    now send me
    

    View Slide

56. sooooo i’m
    kinda canadian
    

    View Slide

57. like a canadian
    designipush notifications
    

    View Slide

58. how even?
    ok but
    

    View Slide

59. ok but
    @gauntfacei
    ☛
    how even?
    

    View Slide

60. service worker
    

    View Slide

61. service worker
    cat server
    

    View Slide

62. service worker
    cat server
    cat notification
    push
    

    View Slide

63. service worker network
    cat server
    cat notification
    push XHR
    

    View Slide

64. 
    service worker
    cache
    network
    cat server
    cat notification
    push XHR
    

    View Slide

65. service worker
    cache
    network
    cat server
    cat notification
    push XHR
    
    

    View Slide

66. alt: scrolling gif of all the push notifications code
    

    View Slide

67. View Slide

68. i ὑ polymer
    

    View Slide

69. 
    

    View Slide

70. 
    

    View Slide

71. 
    

    View Slide

72. i ὑ polymer
    
    

    View Slide

73. 
    i ὑ polymer
    

    View Slide

74. now what?
    

    View Slide

75. now what?
    node.js server
    /notwaldorf/caturday-post
    

    View Slide

76. now what?
    put an arduino on it
    

    View Slide

77. i ὑ johnny-fivei
    put an arduino on it
    

    View Slide

78. bit.ly/caturday-post-meow
    

    View Slide

79. ❤
    @notwaldorf
    

    View Slide

80. links to things i talked about:
    bit.ly/service-worker-is-coming
    bit.ly/offline-cookbook
    bit.ly/push-notifications-tutorial
    

    View Slide