The Progression of Web Apps @ GDG DevFest Belgium

This talk is about the progression of web apps. And no, that is not a typo. It's about web apps in general, but mostly about Progressive Web Apps. How have we been building web apps so far. And what tools can we use to build native apps using web technologies. And finally what actually are Progressive Web Apps anyway?

Transcript

1. THE PROGRESSION 

   OF WEB APPS
   GDG DEVFEST BELGIUM, 23RD OCTOBER 2016
   

   View Slide

2. THE PROGRESSION 

   OF WEB APPS
   GDG DEVFEST BELGIUM, 23RD OCTOBER 2016
   

   View Slide

3. View Slide

4. View Slide

5. THE PROGRESSION 

   OF WEB APPS
   

   View Slide

6. THE PROGRESSION 

   OF WEB APPS
   

   View Slide

7. PROGRESSIVE WEB APPS
   

   View Slide

8. Photo by Daniel Appelquist
   

   View Slide

9. View Slide

10. PROGRESSIVE
    

    View Slide

11. RESPONSIVE
    

    View Slide

12. CONNECTIVITY INDEPENDENT
    

    View Slide

13. APP-LIKE
    

    View Slide

14. FRESH
    

    View Slide

15. SAFE
    

    View Slide

16. DISCOVERABLE
    

    View Slide

17. RE-ENGAGEABLE
    

    View Slide

18. INSTALLABLE
    

    View Slide

19. LINKABLE
    

    View Slide

20. View Slide

21. PROGRESSIVE
    

    View Slide

22. WEB APP
    

    View Slide

23. RESPONSIVE
    

    View Slide

24. airhorner.com
    

    View Slide

25. CONNECTIVITY INDEPENDENT
    

    View Slide

26. View Slide

27. APP-LIKE
    MENU
    Where is my
    navigation?
    Click on the hamburger
    menu to get access to
    all of the navigation
    options.
    

    View Slide

28. APP-LIKE
    

    View Slide

29. FRESH
    

    View Slide

30. View Slide

31. FRESH
    

    View Slide

32. SAFE
    

    View Slide

33. DISCOVERABLE
    

    View Slide

34. Hi there! I’m a Web App!
    

    View Slide

35. RE-ENGAGEABLE
    Something not very

    important has happened
    Battery is almost empty,

    connect your charger
    Someone you hardly know

    posted what he just ate
    This is a test pushmessage 

    on acceptation.
    You have 4 app updates

    available
    

    View Slide

36. View Slide

37. INSTALLABLE
    

    View Slide

38. airhorner.com
    The Airhorner

    airhorner.com
    ADD TO HOMESCREEN
    ×
    

    View Slide

39. LINKABLE
    

    View Slide

40. Airhorner
    

    View Slide

41. Airhorner
    no results found
    

    View Slide

42. https://airhorner.com
    

    View Slide

43. View Slide

44. View Slide

45. THIS IS NOT A NEW IDEA
    

    View Slide

46. View Slide

47. The full Safari engine is inside of iPhone. 

    And so, you can write amazing Web 2.0 and
    Ajax apps that look exactly and behave exactly
    like apps on the iPhone. And these apps can
    integrate perfectly with iPhone services.
    “
    — Steve Jobs, 2007
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. The fundamental problem on the iPhone is not
    Apple’s App Store approval policies, but the iPhone
    developers’ arrogant disdain for Web technologies.
    I reviewed the apps I have on my iPhone, and most
    can be released as a Web app right now.
    “
    — Peter Paul Koch, 2009
    

    View Slide

53. The fundamental problem on the iPhone is not
    Apple’s App Store approval policies, but the iPhone
    developers’ arrogant disdain for Web technologies.
    I reviewed the apps I have on my iPhone, and most
    can be released as a Web app right now.
    “
    — Peter Paul Koch, 2009
    

    View Slide

54. View Slide

55. ✓ PROGRESSIVE
    ✓ RESPONSIVE
    ✓ CONNECTIVITY INDEPENDENT
    ✓ APP-LIKE
    ✓ SAFE
    ✓ DISCOVERABLE
    ✓ INSTALLABLE
    ✓ LINKABLE
    

    View Slide

56. LOTS OF UGLY HACKS
    

    View Slide

57. LOTS OF BROWSER QUIRKS
    

    View Slide

58. NON-STANDARD API’S
    

    View Slide

59. NO DEVICE API’S
    

    View Slide

60. View Slide

61. BUILDING NATIVE APPS 

    USING WEB TECHNOLOGY
    

    View Slide

62. WHY?
    

    View Slide

63. WE KNOW HTML, 

    CSS AND JAVASCRIPT
    

    View Slide

64. CROSS PLATFORM

    DEVELOPMENT
    

    View Slide

65. GET ACCESS TO NATIVE API’S
    

    View Slide

66. THE APP STORE
    

    View Slide

67. $
    €
    £
    $
    ¥
    €
    ¥
    £
    kr.
    جد
    ₽
    €
    ¥
    ₽
    

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

79. View Slide

80. PACKAGED WEB APPS
    

    View Slide

81. }
    

    View Slide

82. HOSTED WEB APPS
    

    View Slide

83. }
    + URL of the hosted web app
    

    View Slide

84. View Slide

85. View Slide

86. xmlns="http://ns.adobe.com/air/application/2.5">

    nl.salonhub.Salonhub
    Salonhub
    Salonhub
    6.0.356
    De flexibele en complete oplossing voor uw kapsalon
    
    platform/air/app/index.html
    1024
    768
    application.xml
    

    View Slide

87. adt 

    -package 

    -storetype pkcs12 -keystore cert.p12 -storepass ****** 

    dist/air/Salonhub-6.0.365.air 

    build/air/application.xml 

    -C build/air assets external lib platform settings.js
    

    View Slide

88. Salonhub.air
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. DEVICE API’S
    Battery Status
    Camera
    Device Motion
    Device Orientation
    Geolocation
    Media Capture
    Splashscreen
    Vibration Network Information
    Statusbar
    Media
    Files
    File Transfers
    Dialogs
    

    View Slide

94. PLUGINS
    

    View Slide

95. PhoneGap is a polyfill, and the ultimate 

    purpose of PhoneGap is to cease to exist
    “
    — Brian LeRoux
    

    View Slide

96. View Slide

97. 2012
    chrome app
    

    View Slide

98. chromebook
    

    View Slide

99. chrome web store
    

    View Slide

100. 2012
     chrome app
     

     View Slide

101. View Slide

102. View Slide

103. chromium
     +
     

     View Slide

104. const electron = require('electron');
     const app = electron.app;
     let mainWindow;
     function createWindow () {
     mainWindow = new electron.BrowserWindow({ width: 800, height: 600 });

     mainWindow.loadURL('file://' + __dirname + '/app/index.html');
     mainWindow.on('closed', () => { mainWindow = null });
     }
     app.on('ready', () => {
     createWindow();
     });
     app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
     app.quit();
     }
     launch.js
     

     View Slide

105. View Slide

106. View Slide

107. 2014
     Universal Windows Platform
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. npm install -g manifoldjs

     manifoldjs https://airhorner.com -d ~/Projects -p windows10
     manifoldjs package ~/Projects/AirHorner/windows10
     

     View Slide

116. UNIVERSAL WINDOWS APPS
     HAVE ACCESS TO THE

     UNIVERSAL WINDOWS API
     

     View Slide

117. DEPLOY ON 

     DESKTOP, MOBILE 

     AND XBOX ONE
     

     View Slide

118. 2014
     Universal Windows Platform
     

     View Slide

119. AND MANY MORE…
     

     View Slide

120. BUT…
     

     View Slide

121. DEPENDANT ON THIRD PARTIES
     

     View Slide

122. NOT PART OF THE WEB
     

     View Slide

123. View Slide

124. PROGRESSIVE WEB APPS
     

     View Slide

125. WEB MANIFEST
     

     View Slide

126. 
     
     
     HTML5test - How well does your browser support HTML5?
     index.html
     

     View Slide

127. 
     
     
     HTML5test - How well does your browser support HTML5?
     
     
     index.html
     

     View Slide

128. 
     
     
     HTML5test - How well does your browser support HTML5?
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

129. 
     
     
     HTML5test - How well does your browser support HTML5?
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

130. 
     
     
     HTML5test - How well does your browser support HTML5?
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

131. 
     
     
     HTML5test - How well does your browser support HTML5?
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

132. 
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

133. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

134. PLACE EVERYTHING 

     IN A SEPARATE JSON FILE
     

     View Slide

135. {
     "name": "HTML5test",
     "theme_color": "#0092bf",
     "display": "standalone",

     "icons": [
     {
     "src": "/icon-192x192.png",
     "sizes": "192x192",
     "type": "image/png"
     },
     {
     "src": "/icon-256x256.png",
     "sizes": "256x256",
     "type": "image/png"
     },
     {
     "src": "/icon-512x512.png",
     "sizes": "512x512",
     "type": "image/png"
     }
     manifest.json
     

     View Slide

136. APP NAME
     ICONS

     THEME COLORS
     SETTINGS
     

     View Slide

137. LAUNCH FULL SCREEN
     {
     "display": "standalone"

     }
     

     View Slide

138. LIMIT SCREEN ORIENTATION
     {
     "orientation": "portrait"

     }
     

     View Slide

139. START A DIFFERENT URL
     {
     "start_url": "standalone.html"

     }
     

     View Slide

140. View Slide

141. 
     
     
     HTML5test - How well does your browser support HTML5?
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

142. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

143. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

144. BROWSER SUPPORT
     Chrome 39 Opera 32
     

     View Slide

145. DEVICE API’S
     

     View Slide

146. navigator.vibrate(200);

     

     navigator.vibrate([100, 200, 200, 200, 500]);
     VIBRATION
     

     View Slide

147. navigator.getUserMedia(
     {
     audio: true,
     video: { width: 1280, height: 720 }
     },
     function(stream) {
     },
     function(err) {
     }
     });
     CAMERA & MICROPHONE
     

     View Slide

148. BATTERY
     navigator.getBattery().then(function(battery) {

     battery.addEventListener('chargingchange', function() {
     console.log(battery.charging);
     });
     battery.addEventListener('levelchange', function() {
     console.log(battery.level);
     });
     

     });
     

     View Slide

149. GEOLOCATION

     DEVICE MOTION

     DEVICE ORIENTATION
     AMBIENT LIGHT
     BLUETOOTH
     

     View Slide

150. SERVICE WORKERS
     

     View Slide

151. Application Cache is a Douchebag!
     “
     — Jake Archibald
     

     View Slide

152. View Slide

153. View Slide

154. View Slide

155. ×
     ?
     

     View Slide

156. if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js');
     }
     

     View Slide

157. View Slide

158. View Slide

159. ×
     

     View Slide

160. THE SERVICE WORKER RUNS
     JAVASCRIPT CODE :-)
     

     View Slide

161. self.addEventListener('install', function(event) {
     // Perform install steps
     });
     sw.js
     

     View Slide

162. self.addEventListener('install', function(event) {
     event.waitUntil(
     caches.open('v1').then(function(cache) {
     return cache.addAll([
     '/index.html',
     '/styles/main.css',
     '/scripts/main.js'
     ]);
     })
     );
     });
     sw.js
     

     View Slide

163. return cache.addAll([
     '/index.html',
     '/styles/main.css',
     '/scripts/main.js'
     ]);
     })
     );
     });
     sw.js
     

     View Slide

164. return cache.addAll([
     '/index.html',
     '/styles/main.css',
     '/scripts/main.js'
     ]);
     })
     );
     });
     self.addEventListener('fetch', function(event) {
     // Intercept network requests
     });
     sw.js
     

     View Slide

165. return cache.addAll([
     '/index.html',
     '/styles/main.css',
     '/scripts/main.js'
     ]);
     })
     );
     });
     self.addEventListener('fetch', function(event) {
     event.respondWith(
     caches.match(event.request)
     .then(function(response) {
     if (response) {
     return response;
     }
     return fetch(event.request);
     }
     )
     );
     });
     sw.js
     

     View Slide

166. THE SERVICE WORKER IS 

     INDEPENDENT OF YOUR WEBPAGE
     

     View Slide

167. BROWSER SUPPORT
     Chrome 40 Opera 27 Firefox 44 Samsung 4 Edge
     (behind flag)
     

     View Slide

168. PUSH NOTIFICATIONS
     

     View Slide

169. WEB PUSH 

     API
     WEB PUSH 

     PROTOCOL
     SERVICE
     WORKERS
     WEB
     NOTIFICATIONS
     

     View Slide

170. View Slide

171. navigator.serviceWorker.ready.then(function(sw) {
     sw.pushManager.subscribe().then(function(subscription) {
     // Send subscription to server
     })
     })
     

     View Slide

172. Send the subscription data to our server, 

     including the URL of the push server
     

     View Slide

173. The webpage is closed and 

     the service worker is sleeping
     

     View Slide

174. The server has new 

     information for the user
     

     View Slide

175. The server sends a message to the 

     push server using the Web Push protocol
     

     View Slide

176. The push server wakes up 

     the service worker
     

     View Slide

177. self.addEventListener('push', function(event) {
     // We received a push message
     });
     

     View Slide

178. (optional)
     

     View Slide

179. self.registration.showNotification('Attention!', {
     body: 'Push message received',
     icon: 'icon.png'
     });
     (optional)
     

     View Slide

180. The webpage is still closed and 

     the service worker is sleeping again
     

     View Slide

181. BROWSER SUPPORT
     Chrome 42 Opera 30 Firefox 44 Samsung 4 Edge
     (behind flag)
     

     View Slide

182. WEB PAYMENTS
     

     View Slide

183. Start payment process by
     clicking a button in your app
     

     View Slide

184. Start payment process by
     clicking a button in your app
     var methodData = [
     {
     supportedMethods: ["visa", "mastercard"]
     }
     ];
     

     View Slide

185. Start payment process by
     clicking a button in your app
     var details = {
     displayItems: [
     {
     label: "Donation",
     amount: { currency: "USD", value : "55.00" }
     }
     ],
     total: {
     label: "Total",
     amount: { currency: "USD", value : "55.00" }
     }
     };
     

     View Slide

186. var request = new PaymentRequest(
     methodData, // required payment method data
     details // required transaction information
     );
     

     View Slide

187. request.show().then(function(response) {
     // success
     }).catch(function(err) {
     // failed
     });
     

     View Slide

188. Select your payment 

     method or use the default
     

     View Slide

189. Enter your CVC code or
     confirm with your fingerprint
     

     View Slide

190. Done!

     

     View Slide

191. BROWSER SUPPORT
     Chrome Samsung 4 Edge
     (behind flag)
     (coming soon)
     

     View Slide

192. BUT WHAT ABOUT 

     THE DESKTOP?
     

     View Slide

193. BROWSER DEVELOPMENT 

     IS DRIVEN BY MOBILE
     

     View Slide

194. View Slide

195. BUT…
     

     View Slide

196. NATIVE PWA SUPPORT 

     IN THE WINDOWS STORE
     

     View Slide

197. NATIVE PWA SUPPORT 

     IN THE WINDOWS STORE
     

     View Slide

198. View Slide

199. BUT WHAT ABOUT 

     APPLE?
     

     View Slide

200. THIS IS NOT A GOOGLE THING
     

     View Slide

201. View Slide

202. BUT…
     

     View Slide

203. ?
     ×
     

     View Slide

204. THE OLD HACKS STILL WORK
     

     View Slide

205. MAYBE, HOPEFULLY, POSSIBLY

     THIS WILL CHANGE IN THE FUTURE
     

     View Slide

206. OR NOT
     

     View Slide

207. View Slide

208. View Slide

209. View Slide

210. View Slide

211. View Slide

212. View Slide

213. View Slide

214. THANK YOU!
     @HTML5TEST
     

     View Slide

215. PROGRESSIVE WEB APPS

     CODE LAB
     

     14:00 - 15:30
     

     View Slide

216. 18 NOVEMBER, LONDON
     Dylan Schiemann, Christian Heilmann,
     Mark Wubben, Jonathan Fielding

     and me
     

     View Slide