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 full-size slide

  2. theiinternet needs
    more cats

    View full-size slide

  3. you need to send mei
    more cats

    View full-size slide

  4. confession
    i hate apps

    View full-size slide

  5. lol battery lifei
    i hate apps

    View full-size slide

  6. likei a lot
    i hate apps

    View full-size slide

  7. i ὑ the web
    likei a lot

    View full-size slide

  8. works everywherei*
    i ὑ the web

    View full-size slide

  9. why do we think
    we ὑ apps?

    View full-size slide

  10. we ὑ icons

    View full-size slide

  11. we ὑ offline

    View full-size slide

  12. we ὑ alerts

    View full-size slide

  13. the web does too
    spoilers

    View full-size slide

  14. service worker

    View full-size slide

  15. omg!
    service worker

    View full-size slide

  16. @jaffacake

    service worker

    View full-size slide

  17. offline alerts
    on theiweb!
    &

    View full-size slide

  18. events not clicks
    works with

    View full-size slide

  19. install
    events like

    View full-size slide

  20. fetch
    events like

    View full-size slide

  21. stop trying to makei
    happen
    fetch

    View full-size slide

  22. it’s a proxy
    basically

    View full-size slide

  23. lol browser cache

    View full-size slide

  24. is it supported?
    but wait!

    View full-size slide

  25. progressive enhancement
    it’s a web standard

    View full-size slide

  26. only makes it better
    progressive enhancement

    View full-size slide

  27. network
    XMLHttpRequest
    page

    View full-size slide

  28. page
    service worker
    fetch()

    View full-size slide

  29. page
    service worker network
    fetch()
    XHR

    View full-size slide

  30. page
    service worker network
    fetch()
    XHR

    View full-size slide


  31. page
    service worker network
    cache
    fetch()
    XHR

    View full-size slide



  32. page
    service worker network
    cache
    fetch()
    XHR

    View full-size slide

  33. page
    service worker network
    fetch()

    View full-size slide


  34. page
    service worker network
    cache
    fetch()

    View full-size slide



  35. page
    service worker network
    cache
    fetch()

    View full-size slide

  36. page
    service worker network
    cache


    fetch()
    XHR

    View full-size slide

  37. https all the time
    realtalk

    View full-size slide

  38. push
    events like

    View full-size slide

  39. surprisei!
    push notifications

    View full-size slide

  40. bit.ly/caturday-post

    View full-size slide

  41. bit.ly/caturday-post

    View full-size slide

  42. bit.ly/caturday-post

    View full-size slide

  43. bit.ly/caturday-post

    View full-size slide

  44. bit.ly/caturday-post

    View full-size slide

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

    View full-size slide

  46. more cats
    now send me

    View full-size slide

  47. sooooo i’m
    kinda canadian

    View full-size slide

  48. like a canadian
    designipush notifications

    View full-size slide

  49. how even?
    ok but

    View full-size slide

  50. ok but
    @gauntfacei

    how even?

    View full-size slide

  51. service worker

    View full-size slide

  52. service worker
    cat server

    View full-size slide

  53. service worker
    cat server
    cat notification
    push

    View full-size slide

  54. service worker network
    cat server
    cat notification
    push XHR

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. i ὑ polymer

    View full-size slide

  59. i ὑ polymer

    View full-size slide


  60. i ὑ polymer

    View full-size slide

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

    View full-size slide

  62. now what?
    put an arduino on it

    View full-size slide

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

    View full-size slide

  64. bit.ly/caturday-post-meow

    View full-size slide


  65. @notwaldorf

    View full-size slide

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

    View full-size slide