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 !

F9dca45f7e9e63b3b9dbd3b2cf61bd69?s=128

Mariko Kosaka

October 27, 2017
Tweet

Transcript

  1. How to build a FIRE

  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 !
  3. @kosamari Hi !

  4. @kosamari NYC

  5. @kosamari Google
 Web DevRel

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

  8. I promise this is the last slide I mention PWA

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

    Web application that is Fast, Integrated, Reliable, and Engaging is…
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. How to build a FIRE

  19. Fast

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. Intersection Observer

  30. None
  31. const observer = new IntersectionObserver( changes => { /* Do

    something */}, { threshold: [0.1, 0.2, 0.3...] } ); observer.observe(element);
  32. None
  33. Integrated

  34. None
  35. None
  36. <link rel="manifest" href="/manifest.json"> Web App Manifest

  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" }
  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" }
  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" }
  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" }
  41. ˒ Web App Manifest ˒ Offline support
 (with service worker)

    ˒ Engaged User Prompt to Install*
  42. Payment Request

  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));
  44. Media Session Photo by Michael Alø-Nielsen / CC BY 2.0

  45. Media Session API

  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' } … ] });
  47. Photo by Michael Alø-Nielsen / CC BY 2.0

  48. Reliable

  49. Li-Fi

  50. Credit: Jake Archibald

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

  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. ~ Fin ~

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

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

    X
  63. Cache, then Network Page Service Worker Network Cache

  64. Generic Fallback Page Service Worker Network Cache X X

  65. https://workboxjs.org

  66. Engaging

  67. Push Notification

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

  69. Double Permission Pattern

  70. None
  71. contextual &
 user initiated

  72. contextual &
 user initiated

  73. No surprises!

  74. Give users options!

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

  76. Secure

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

    Geo Location
 App Cache Encrypted Media Extensions
  78. HTTPS is like a secret letter Illustration by @kosamari

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

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

  81. HTTPS is like a secret letter

  82. HTTPS is like a secret letter

  83. How do you get the crypto sunglass ?

  84. First, Public Key Cryptography

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

  86. How do you get the crypto sunglass ?
 (TLS Handshake)

  87. None
  88. None
  89. None
  90. None
  91. Build with FIRE in mind

  92. Build with FIRE in mind secure

  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