Progressive Web App at Google I/O at Google I/O 2016 Extended in Korea

Presentation for Google I/O Extended 2016 in Seoul, Korea. It covers what is the new at PWA. For example, basic knowledge of PWA and high-perfomance app and status of Chrome in emerging margets

Transcript

1. Progressive
   Web
   App
   @ Google I/O 2016
   

   View Slide

2. Progressive Web App?
   

   View Slide

3. - Progressively
   Becoming Apps,
   building in as
   Progressive
   Enhancement
   Alex Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
   

   View Slide

4. - Progressively
   Becoming Apps,
   building in as
   Progressive
   Enhancement
   Alex Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
   

   View Slide

5. - The site begins
   life as a regular
   tab. It doesn’t
   have super-
   powers
   

   View Slide

6. - The site begins
   life as a regular
   tab. It doesn’t
   have super-
   powers
   

   View Slide

7. - The site begins
   life as a regular
   tab. It doesn’t
   have super-
   powers
   - The site begins
   life as a regular
   tab. It doesn’t
   have super-
   powers
   

   View Slide

8. But it is but using
   Progressive App features
   - Security
   - Responsive
   Design
   

   View Slide

9. But it is but using
   Progressive App features
   - Security
   - Responsive
   Design
   

   View Slide

10. But it is but using
    Progressive App features
    - Offline
    experience
    

    View Slide

11. But it is but using
    Progressive App features
    - Offline
    experience
    

    View Slide

12. But it is but using
    Progressive App features
    - Re-engaging by
    push notification
    

    View Slide

13. But it is but using
    Progressive App features
    - Re-engaging by
    push notification
    

    View Slide

14. The second (or third or
    fourth) time one visits the
    site
    - prompt is
    shown by the
    browser
    - Add to home
    screen
    

    View Slide

15. The second (or third or
    fourth) time one visits the
    site
    - prompt is
    shown by the
    browser
    - Add to home
    screen
    

    View Slide

16. The second (or third or
    fourth) time one visits the
    site
    - prompt is
    shown by the
    browser
    - Add to home
    screen
    Users can decide to keep
    apps to
    - the home
    screen or app
    launcher
    - Splash screen
    - Instant loading
    

    View Slide

17. When launched from the
    home screen, these apps
    blend into their
    environment
    - top-level
    - full-screen
    

    View Slide

18. When launched from the
    home screen, these apps
    blend into their
    environment
    - top-level
    - full-screen
    

    View Slide

19. Progressive
    Web
    App
    @ Google I/O 2016
    

    View Slide

20. +JimmyMoon
    @ragingwind
    Google Developer Expert
    KOSSLab
    

    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. View Slide

30. View Slide

31. View Slide

32. “How do you build a great (progressive) web
    app on the mobile … ?
    > Our answer is to”
    

    View Slide

33. http://goo.gl/xU2MMu
    

    View Slide

34. Use the Platform
    to build create apps
    - Minimal payload &
    overhead
    - Minimal time to first
    interaction
    - Offline-first
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. Using Custom Elements with Platform power for App shell architecture
    Pages are Web Components
    

    View Slide

40. Using Custom Elements with Platform power for App shell architecture
    Pages are Web Components
    

    View Slide

41. http://jonrimmer.github.io/are-we-componentized-yet/
    

    View Slide

42. View Slide

43. - Service Worker
    - Push notification
    - Geolocation and
    More Platform APIs
    - HTTP/2
    - Firebase hosting
    - Brotli
    HTTPS
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. Our tools become part of our deploy process,
    but not part of our development process
    

    View Slide

49. Use the Platform
    to build create apps
    - Minimal payload &
    overhead
    - Minimal time to
    first interaction
    - Offline-first
    

    View Slide

50. - Very fast first
    loading
    experience
    - Cached shell
    load instantly
    - Running on RAIL
    App shell
    architecture
    

    View Slide

51. - Very fast first
    loading
    experience
    - Cached shell
    load instantly
    - Running on RAIL
    App shell
    architecture
    

    View Slide

52. View Slide

53. View Slide

54. Three components for App shell. Using transform, rAF and … layout once
    FLIP animations
    

    View Slide

55. Three components for App shell. Using transform, rAF and … layout once
    FLIP animations
    

    View Slide

56. Devtools Time
    Timeline: https://googlechrome.github.io/ui-element-
    samples/expand-collapse/
    

    View Slide

57. Using Polymer’s for App shell architecture
    
    

    View Slide

58. Using Polymer’s for App shell architecture
    
    

    View Slide

59. Using Polymer’s for App shell architecture
    
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Service Worker
    - Born to kill the offline-
    dinosaur
    - Javascript running in
    background
    - Full programmatic control
    of network and cache
    - IndexedDB
    - Plugins
    https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. Lighthouse demo:
    https://jakearchibald-gcm.appspot.com/
    

    View Slide

79. View Slide

80. Devtools Time
    Service Worker: https://airhorner.com/
    

    View Slide

81. Use the Platform
    to build create apps
    - Minimal payload &
    overhead
    - Minimal time to first
    interaction
    - Offline-first
    

    View Slide

82. Handling Offline
    

    View Slide

83. Handling Offline
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. Cache
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. Devtools Time
    Cache: https://jakearchibald-gcm.appspot.com/
    

    View Slide

94. Installable App
    launch from home screen
    splash screen
    

    View Slide

95. Installable App
    launch from home screen
    splash screen
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. http://app-manifest.firebaseapp.com/
     

     View Slide

106. $ npm install -g pwa-manifest
     

     View Slide

107. $ npm install -g pwa-manifest
     

     View Slide

108. Devtools Time
     Web Manifest: https://airhorner.com/
     

     View Slide

109. Storage
     

     View Slide

110. View Slide

111. View Slide

112. IndexedDB
     It’s the worst API ever designed in the history of computer science.
     

     View Slide

113. View Slide

114. View Slide

115. It was a challenge. Wrap IndexedDB, Stash IDB first, try to write it to
     firebase and then remove that stashed data
     Stashing IndexedDB and Pushing Firebase
     

     View Slide

116. It was a challenge. Wrap IndexedDB, Stash IDB first, try to write it to
     firebase and then remove that stashed data
     Stashing IndexedDB and Pushing Firebase
     

     View Slide

117. View Slide

118. View Slide

119. Devtools Time
     IndexedDB: https://jakearchibald-gcm.appspot.com/
     

     View Slide

120. Sync
     

     View Slide

121. View Slide

122. View Slide

123. View Slide

124. Web Push
     for Push notification
     

     View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. View Slide

137. View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. https://github.com/gauntface/simple-push-demo
     

     View Slide

151. Pushing for engaging

     on Progressive Web Apps
     

     View Slide

152. Pushing for engaging

     on Progressive Web Apps
     

     View Slide

153. View Slide

154. View Slide

155. View Slide

156. View Slide

157. View Slide

158. Next
     • All screenshots and video clips come from Google IO
     2016 Videos for Progressive Web App
     • Google I/O 2016 Codelabs
     • Progressive Web App Dev Summit 2016
     • Progressive Web App on Google developers site
     • GDG Meetup
     • Join GDG slack channel #progressive-webapp
     

     View Slide