The Progression of Web Apps @ Fronteers

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
   FRONTEERS @ MIRABEAU, 18TH AUGUST 2016
   

   View Slide

2. View Slide

3. View Slide

4. THE PROGRESSION 

   OF WEB APPS
   

   View Slide

5. PROGRESSIVE WEB APPS
   

   View Slide

6. Photo by Daniel Appelquist
   

   View Slide

7. View Slide

8. PROGRESSIVE
   

   View Slide

9. WEB APP
   

   View Slide

10. WEB APP
    

    View Slide

11. WEB APP
    

    View Slide

12. WEB APP
    

    View Slide

13. RESPONSIVE
    

    View Slide

14. airhorner.com
    

    View Slide

15. CONNECTIVITY INDEPENDENT
    

    View Slide

16. View Slide

17. APP-LIKE
    

    View Slide

18. APP-LIKE
    

    View Slide

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

    View Slide

20. FRESH
    

    View Slide

21. SAFE
    

    View Slide

22. DISCOVERABLE
    

    View Slide

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

    View Slide

24. RE-ENGAGEABLE
    

    View Slide

25. INSTALLABLE
    

    View Slide

26. airhorner.com
    

    View Slide

27. airhorner.com
    

    View Slide

28. LINKABLE
    

    View Slide

29. Airhorner
    

    View Slide

30. Airhorner
    no results found
    

    View Slide

31. https://airhorner.com
    

    View Slide

32. View Slide

33. THIS IS NOT A NEW IDEA
    

    View Slide

34. View Slide

35. 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

36. View Slide

37. 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

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

    View Slide

39. LOTS OF UGLY HACKS
    

    View Slide

40. LOTS OF BROWSER QUIRKS
    

    View Slide

41. NON-STANDARD API’S
    

    View Slide

42. NO DEVICE API’S
    

    View Slide

43. View Slide

44. BUILDING NATIVE APPS 

    USING WEB TECHNOLOGY
    

    View Slide

45. WHY?
    

    View Slide

46. WE KNOW HTML, 

    CSS AND JAVASCRIPT
    

    View Slide

47. CROSS PLATFORM

    DEVELOPMENT
    

    View Slide

48. GET ACCESS TO NATIVE API’S
    

    View Slide

49. THE APP STORE
    

    View Slide

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

    View Slide

51. 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. PACKAGED WEB APPS
    

    View Slide

61. }
    

    View Slide

62. HOSTED WEB APPS
    

    View Slide

63. }
    + URL of the hosted web app
    

    View Slide

64. View Slide

65. View Slide

66. 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

67. 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

68. Salonhub.air
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. PhoneGap is a polyfill, and the ultimate 

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

    View Slide

73. 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

74. PLUGINS
    

    View Slide

75. 2012
    chrome app
    

    View Slide

76. chromebook
    

    View Slide

77. chrome web store
    

    View Slide

78. View Slide

79. ×
    

    View Slide

80. View Slide

81. View Slide

82. chromium
    +
    

    View Slide

83. 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

84. 2014
    Universal Windows Platform
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. npm install -g manifoldjs

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

    View Slide

93. UNIVERSAL WINDOWS APPS
    HAVE ACCESS TO THE

    UNIVERSAL WINDOWS API
    

    View Slide

94. DEPLOY ON 

    DESKTOP, MOBILE 

    AND XBOX ONE
    

    View Slide

95. AND MANY MORE…
    

    View Slide

96. BUT…
    

    View Slide

97. DEPENDANT ON THIRD PARTIES
    

    View Slide

98. NOT PART OF THE WEB
    

    View Slide

99. View Slide

100. PROGRESSIVE WEB APPS
     

     View Slide

101. WEB MANIFEST
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

108. 
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

109. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

110. PLACE EVERYTHING 

     IN A SEPARATE JSON FILE
     

     View Slide

111. {
     "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

112. APP NAME
     ICONS

     THEME COLORS
     SETTINGS
     

     View Slide

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

     }
     

     View Slide

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

     }
     

     View Slide

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

     }
     

     View Slide

116. View Slide

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

     View Slide

118. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

119. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     index.html
     

     View Slide

120. NOT POSSIBLE TO SPECIFY 

     DIFFERENT ICON STYLES FOR 

     DIFFERENT PLATFORMS :-(
     

     View Slide

121. View Slide

122. BROWSER SUPPORT
     Chrome 39 Opera 32
     

     View Slide

123. DEVICE API’S
     

     View Slide

124. navigator.vibrate(200);

     

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

     View Slide

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

     View Slide

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

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

     });
     

     View Slide

127. GEOLOCATION

     DEVICE MOTION

     DEVICE ORIENTATION
     AMBIENT LIGHT
     BLUETOOTH
     

     View Slide

128. SERVICE WORKERS
     

     View Slide

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

     View Slide

130. View Slide

131. View Slide

132. View Slide

133. ×
     ?
     

     View Slide

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

     View Slide

135. View Slide

136. View Slide

137. ×
     

     View Slide

138. THE SERVICE WORKER RUNS
     JAVASCRIPT CODE :-)
     

     View Slide

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

     View Slide

140. 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

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

     View Slide

142. 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

143. THE SERVICE WORKER IS 

     INDEPENDENT OF YOUR WEBPAGE
     

     View Slide

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

     View Slide

145. PUSH NOTIFICATIONS
     

     View Slide

146. WEB PUSH 

     API
     WEB PUSH 

     PROTOCOL
     SERVICE
     WORKERS
     WEB
     NOTIFICATIONS
     

     View Slide

147. View Slide

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

     View Slide

149. Send the subscription data to our server, 

     including the URL of the push server
     

     View Slide

150. The webpage is closed and 

     the service worker is sleeping
     

     View Slide

151. The server has new 

     information for the user
     

     View Slide

152. The server sends a message to the 

     push server using the Web Push protocol
     

     View Slide

153. The push server wakes up 

     the service worker
     

     View Slide

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

     View Slide

155. (optional)
     

     View Slide

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

     View Slide

157. The webpage is still closed and 

     the service worker is sleeping again
     

     View Slide

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

     View Slide

159. WEB PAYMENTS
     

     View Slide

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

     View Slide

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

     View Slide

162. 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

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

     View Slide

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

     View Slide

165. Select your payment 

     method or use the default
     

     View Slide

166. Enter your CVC code or
     confirm with your fingerprint
     

     View Slide

167. Done!

     

     View Slide

168. BROWSER SUPPORT
     Chrome Edge
     (behind flag)
     

     View Slide

169. BUT WHAT ABOUT 

     THE DESKTOP?
     

     View Slide

170. BROWSER DEVELOPMENT 

     IS DRIVEN BY MOBILE
     

     View Slide

171. View Slide

172. BUT…
     

     View Slide

173. NATIVE PWA SUPPORT 

     IN THE WINDOWS STORE
     

     View Slide

174. View Slide

175. BUT WHAT ABOUT 

     APPLE?
     

     View Slide

176. THIS IS NOT A GOOGLE THING
     

     View Slide

177. View Slide

178. BUT…
     

     View Slide

179. ?
     

     View Slide

180. ?
     ×
     

     View Slide

181. THE OLD HACKS STILL WORK
     

     View Slide

182. MAYBE, HOPEFULLY, POSSIBLY

     THIS WILL CHANGE IN THE FUTURE
     

     View Slide

183. OR NOT
     

     View Slide

184. View Slide

185. View Slide

186. View Slide

187. THANK YOU!
     @HTML5TEST
     

     View Slide