The Progression of Web Apps @ GDG DevFest Belgium

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?

De023a9aff4c7a5ede3a81e8c76f17b5?s=128

Niels Leenheer

October 23, 2016
Tweet

Transcript

  1. 3.
  2. 4.
  3. 9.
  4. 13.
  5. 14.
  6. 15.
  7. 19.
  8. 20.
  9. 22.
  10. 26.
  11. 27.

    APP-LIKE MENU Where is my navigation? Click on the hamburger

    menu to get access to all of the navigation options.
  12. 28.
  13. 29.
  14. 30.
  15. 31.
  16. 32.
  17. 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
  18. 36.
  19. 39.
  20. 40.
  21. 43.
  22. 44.
  23. 46.
  24. 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
  25. 48.
  26. 49.
  27. 50.
  28. 51.
  29. 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
  30. 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
  31. 54.
  32. 55.

    ✓ PROGRESSIVE ✓ RESPONSIVE ✓ CONNECTIVITY INDEPENDENT ✓ APP-LIKE ✓

    SAFE ✓ DISCOVERABLE ✓ INSTALLABLE ✓ LINKABLE
  33. 60.
  34. 62.
  35. 68.
  36. 69.
  37. 70.
  38. 71.
  39. 72.
  40. 73.
  41. 74.
  42. 75.
  43. 76.
  44. 77.
  45. 78.
  46. 79.
  47. 81.

    }

  48. 84.
  49. 85.
  50. 86.

    <application 
 xmlns="http://ns.adobe.com/air/application/2.5">
 <id>nl.salonhub.Salonhub</id> <filename>Salonhub</filename> <name>Salonhub</name> <versionNumber>6.0.356</versionNumber> <description>De flexibele en

    complete oplossing voor uw kapsalon</description> <initialWindow> <content>platform/air/app/index.html</content> <width>1024</width> <height>768</height> application.xml
  51. 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
  52. 89.
  53. 90.
  54. 91.
  55. 92.
  56. 93.

    DEVICE API’S Battery Status Camera Device Motion Device Orientation Geolocation

    Media Capture Splashscreen Vibration Network Information Statusbar Media Files File Transfers Dialogs
  57. 94.
  58. 95.

    PhoneGap is a polyfill, and the ultimate 
 purpose of

    PhoneGap is to cease to exist “ — Brian LeRoux
  59. 96.
  60. 101.
  61. 102.
  62. 103.
  63. 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
  64. 105.
  65. 106.
  66. 108.
  67. 109.
  68. 110.
  69. 111.
  70. 112.
  71. 113.
  72. 114.
  73. 120.
  74. 123.
  75. 127.

    <!doctype> <html> <head> <title>HTML5test - How well does your browser

    support HTML5?</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> index.html
  76. 128.

    <!doctype> <html> <head> <title>HTML5test - How well does your browser

    support HTML5?</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> index.html
  77. 129.

    <!doctype> <html> <head> <title>HTML5test - How well does your browser

    support HTML5?</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> index.html
  78. 130.

    <!doctype> <html> <head> <title>HTML5test - How well does your browser

    support HTML5?</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> index.html
  79. 131.

    <!doctype> <html> <head> <title>HTML5test - How well does your browser

    support HTML5?</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> <link rel="icon" type="image/png" href="/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/icon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/icon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/icon-196x196.png" sizes="196x196"> index.html
  80. 132.

    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon"

    sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> <link rel="icon" type="image/png" href="/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/icon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/icon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/icon-196x196.png" sizes="196x196"> index.html
  81. 133.

    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon"

    sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> <link rel="icon" type="image/png" href="/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/icon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/icon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/icon-196x196.png" sizes="196x196"> <meta name="application-name" content="HTML5test"> <meta name="msapplication-TileColor" content="#0092bf"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> index.html
  82. 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
  83. 140.
  84. 141.

    <!doctype> <html> <head> <title>HTML5test - How well does your browser

    support HTML5?</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> <link rel="icon" type="image/png" href="/icon-16x16.png" sizes="16x16"> index.html
  85. 142.

    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon"

    sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> <link rel="icon" type="image/png" href="/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/icon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/icon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/icon-196x196.png" sizes="196x196"> <meta name="application-name" content="HTML5test"> <meta name="msapplication-TileColor" content="#0092bf"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> index.html
  86. 143.

    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon"

    sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0092bf"> <link rel="icon" type="image/png" href="/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/icon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/icon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/icon-196x196.png" sizes="196x196"> <meta name="application-name" content="HTML5test"> <meta name="msapplication-TileColor" content="#0092bf"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <link rel="manifest" href="/manifest.json"> index.html
  87. 147.

    navigator.getUserMedia( { audio: true, video: { width: 1280, height: 720

    } }, function(stream) { }, function(err) { } }); CAMERA & MICROPHONE
  88. 152.
  89. 153.
  90. 154.
  91. 155.
  92. 157.
  93. 158.
  94. 159.

    ×

  95. 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
  96. 170.
  97. 175.
  98. 178.
  99. 184.

    Start payment process by clicking a button in your app

    var methodData = [ { supportedMethods: ["visa", "mastercard"] } ];
  100. 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" } } };
  101. 186.

    var request = new PaymentRequest( methodData, // required payment method

    data details // required transaction information );
  102. 190.
  103. 194.
  104. 195.
  105. 198.
  106. 201.
  107. 202.
  108. 203.
  109. 206.
  110. 207.
  111. 208.
  112. 209.
  113. 210.
  114. 211.
  115. 212.
  116. 213.