Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Monica Dinculescu

July 23, 2015
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

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