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 !

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
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…
18. How to build a FIRE
19. Fast
29. Intersection Observer
31. const observer = new IntersectionObserver( changes => { /* Do something */}, { threshold: [0.1, 0.2, 0.3...] } ); observer.observe(element);
33. Integrated
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
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
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)
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