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

How to build a FIRE

How to build a FIRE

PWA - Progressive Web App is a web application that is
Fast, Integrated, Reliable, and Engaging !

This is a slides from my talk @viewsourceconf in London 2017

License : CC BY-NC-SA 4.0

I’d love to know if you use this in your blog/video/talk/workshop !

Mariko Kosaka

October 27, 2017
Tweet

More Decks by Mariko Kosaka

Other Decks in Technology

Transcript

  1. How to build
    a FIRE

    View Slide

  2. This is a slides from my talk
    @viewsourceconf in London 2017
    License : CC BY-NC-SA 4.0

    I’d love to know if you use this in your blog/video/talk/workshop !

    View Slide

  3. @kosamari
    Hi !

    View Slide

  4. @kosamari
    NYC

    View Slide

  5. @kosamari
    Google

    Web DevRel

    View Slide

  6. View Slide

  7. Web application that is
    Fast, Integrated, Reliable, and Engaging
    is…

    View Slide

  8. I promise this is the last slide I mention PWA
    Web application that is
    Fast, Integrated, Reliable, and Engaging
    is…

    View Slide

  9. I promise this is the last slide I mention PWA
    Web application that is
    Fast, Integrated, Reliable, and Engaging
    is…

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. How to build a FIRE

    View Slide

  19. Fast

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. Intersection Observer

    View Slide

  30. View Slide

  31. const observer = new IntersectionObserver(
    changes => { /* Do something */},
    { threshold: [0.1, 0.2, 0.3...] }
    );
    observer.observe(element);

    View Slide

  32. View Slide

  33. Integrated

    View Slide

  34. View Slide

  35. View Slide


  36. Web App Manifest

    View Slide

  37. {
    "name": "CNET Tech Today",
    "short_name": "Tech Today",
    "icons": [{
    "src": "icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#FF0000",
    "theme_color": "#FF0000"
    }

    View Slide

  38. {
    "name": "CNET Tech Today",
    "short_name": "Tech Today",
    "icons": [{
    "src": "icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#FF0000",
    "theme_color": "#FF0000"
    }

    View Slide

  39. {
    "name": "CNET Tech Today",
    "short_name": "Tech Today",
    "icons": [{
    "src": "icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#FF0000",
    "theme_color": "#FF0000"
    }

    View Slide

  40. {
    "name": "CNET Tech Today",
    "short_name": "Tech Today",
    "icons": [{
    "src": "icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#FF0000",
    "theme_color": "#FF0000"
    }

    View Slide

  41. ˒ Web App Manifest
    ˒ Offline support

    (with service worker)
    ˒ Engaged User
    Prompt to Install*

    View Slide

  42. Payment Request

    View Slide

  43. Web Share
    navigator.share({
    title: 'Web Fundamentals',
    text: 'Check out Web Fundamentals — it rocks!',
    url: 'https://developers.google.com/web',
    })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));

    View Slide

  44. Media Session
    Photo by Michael Alø-Nielsen / CC BY 2.0

    View Slide

  45. Media Session API

    View Slide

  46. Media Session API
    navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
    { src: 'https://dummyimage.com/96x96',
    sizes: ‘96x96',
    type: 'image/png' } …
    ]
    });

    View Slide

  47. Photo by Michael Alø-Nielsen / CC BY 2.0

    View Slide

  48. Reliable

    View Slide

  49. Li-Fi

    View Slide

  50. Credit: Jake Archibald

    View Slide

  51. ServiceWorker, What are you?
    Illustration by @kosamari

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. ~ Fin ~

    View Slide

  61. Cache, Falling Back to Network
    Page
    Service Worker
    Network
    Cache
    X

    View Slide

  62. Network, Falling Back to Cache
    Page
    Service Worker Network
    Cache
    X

    View Slide

  63. Cache, then Network
    Page
    Service Worker Network
    Cache

    View Slide

  64. Generic Fallback
    Page
    Service Worker Network
    Cache
    X
    X

    View Slide

  65. https://workboxjs.org

    View Slide

  66. Engaging

    View Slide

  67. Push Notification

    View Slide

  68. Push Notification
    https://really-annoying-website.fake wants to send you
    notifications.
    ALLOW
    BLOCK

    View Slide

  69. Double Permission
    Pattern

    View Slide

  70. View Slide

  71. contextual
    &

    user initiated

    View Slide

  72. contextual
    &

    user initiated

    View Slide

  73. No surprises!

    View Slide

  74. Give users options!

    View Slide

  75. https://developers.google.com/fundamentals

    View Slide

  76. Secure

    View Slide

  77. APIs that require HTTPS
    Service Workers
    getUserMedia
    Push Notifications
    HTTPS/2
    Geo Location

    App Cache
    Encrypted Media Extensions

    View Slide

  78. HTTPS is like a secret letter
    Illustration by @kosamari

    View Slide

  79. HTTP(non-secure) is like sending a post card

    View Slide

  80. HTTP(non-secure) is like sending a post card

    View Slide

  81. HTTPS is like a secret letter

    View Slide

  82. HTTPS is like a secret letter

    View Slide

  83. How do you get the crypto sunglass ?

    View Slide

  84. First, Public Key Cryptography

    View Slide

  85. Encrypt with Public Key
    ONLY Decrypt-able with
    Private Key

    View Slide

  86. How do you get the crypto sunglass ?

    (TLS Handshake)

    View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. Build with FIRE in mind

    View Slide

  92. Build with FIRE in mind
    secure

    View Slide

  93. Thank you !

    Mariko Kosaka
    @kosamari
    Icon credit : Hand, Coding, Party, Running, Handshake, Consumer Protection, Partner by BomSymbols | Computer by Gábor István Karaba

    Statue Of Liberty by shashank singh | Bonfire by cathy moser | Extinguishing by Luis Prado | Balloons by Made by Made

    View Slide