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
   

   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