Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Devoxx FR 2016 - Progressive Web Apps par Florian Orpelière & Cyril Balit

1 143 vues

Publié le

Découvrez les slides de Florian Orpelière et de Cyril Balit lors de leur présentation Progressive Web Apps à Devoxx FR 2016 !

Publié dans : Technologie
  • Soyez le premier à commenter

Devoxx FR 2016 - Progressive Web Apps par Florian Orpelière & Cyril Balit

  1. 1. #DevoxxFR Devoxx France 2016 Progressive Web App
  2. 2. #DevoxxFR Nous Cyril Balit @cbalit Florian Orpelière @florpeliere 2
  3. 3. 3 Un petit fond musical, c’est bien ... Ils en font du bruit ...
  4. 4. 4 Les PWA’s c’est de la bombe. Qui regarde ?
  5. 5. 5 Un petit fond musical, c’est bien ... Tiens c’est calme d’un coup ...
  6. 6. 6
  7. 7. #DevoxxFR 7 Le mobile Aujourd’hui
  8. 8. #DevoxxFR 8 Le mobile Aujourd’hui
  9. 9. #DevoxxFR 9 Le mobile Aujourd’hui
  10. 10. #DevoxxFR 10 Le mobile Aujourd’hui
  11. 11. #DevoxxFR 11 <link rel="apple-touch-icon" href="touch-icon-iphone.png"> // Later on, more icon sizes.... <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-retina.png"> // Nice splash screen ... <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> if(navigation.standalone) { // do something ace with the UI } 2007 : L’iphone
  12. 12. #DevoxxFR 12 2012 : Android
  13. 13. #DevoxxFR https://infrequently.org/2015/06/progressive-apps- escaping-tabs-without-losing-our-soul/ 13 @slightlylate Les débuts : Juin 2015
  14. 14. #DevoxxFR 14
  15. 15. #DevoxxFR 15
  16. 16. #DevoxxFR 16 Une progressive Web App PWA’s
  17. 17. #DevoxxFR 17 PWA’s Progressive Une progressive Web App
  18. 18. #DevoxxFR 18 Responsive PWA’s Progressive Une progressive Web App
  19. 19. #DevoxxFR 19 Offline Responsive PWA’s Progressive Une progressive Web App
  20. 20. #DevoxxFR 20 Sécurisée Une progressive Web App Offline Responsive PWA’s Progressive
  21. 21. #DevoxxFR 21 Une progressive Web App Sécurisée Offline Responsive PWA’s Progressive Up to date
  22. 22. #DevoxxFR 22 Une progressive Web App Sécurisée Offline Responsive PWA’s Progressive Up to date Installable
  23. 23. #DevoxxFR 23 Engageante Une progressive Web App Sécurisée Offline Responsive PWA’s Progressive Up to date Installable
  24. 24. #DevoxxFR 24 ● Performante ● App-like ● Découvrable ● Linkable Engageante Sécurisée Offline Responsive PWA’s Progressive Up to date Installable Mais aussi
  25. 25. #DevoxxFR 25 Les exemples
  26. 26. #DevoxxFR + = 26 https://sfeir.github.io/peoples/#/home Notre projet
  27. 27. Responsive
  28. 28. #DevoxxFR Sécurité
  29. 29. #DevoxxFR Votre service worker à besoin de HTTPS, mais comment faire ? 29 Sécurité → HTTPS
  30. 30. #DevoxxFR 127.0.0.1 / localhost 30 Sécurité → HTTPS
  31. 31. #DevoxxFR 31 Sécurité → HTTPS
  32. 32. #DevoxxFR https://letsencrypt.org/ 32 Sécurité → HTTPS
  33. 33. #DevoxxFR Notre méthode inspiré des sfeirschooll 33 Instant Loading
  34. 34. #DevoxxFR ● Compression ● async defer ● HTTP2 ● Critical CSS vs loadCSS ● Une bonne gestion du cache ● Pas de paint/layout ● ... 34 Vitesse et performance
  35. 35. #DevoxxFR 35
  36. 36. #DevoxxFR 36 Offline #offlineosaurus
  37. 37. #DevoxxFR 37 Online OfflineLie-Fi Le réseau
  38. 38. Service Worker
  39. 39. #DevoxxFR 39 Service Worker
  40. 40. #DevoxxFR Permet d’intercepter ou de modifier la navigation et les requêtes de ressources. 40 Service Worker
  41. 41. #DevoxxFR 41
  42. 42. #DevoxxFR 42 Stratégie de cache #offlineosaurus
  43. 43. #DevoxxFR 43 Live coding !
  44. 44. #DevoxxFR 44 On install
  45. 45. #DevoxxFR 45 Offline first
  46. 46. #DevoxxFR 46 API cache
  47. 47. #DevoxxFR 47 Avatar cache
  48. 48. #DevoxxFR 48 Installable
  49. 49. #DevoxxFR 49 ● Un manifest ● service worker ● 2 interactions en - de 5mn Ajouter à l’écran d’accueil
  50. 50. Le Manifest
  51. 51. #DevoxxFR 51 <link rel="manifest" href="/manifest.json"> Manifest : lier à l’application
  52. 52. #DevoxxFR 52 { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } Le fichier
  53. 53. #DevoxxFR 53 { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } Icone
  54. 54. #DevoxxFR 54 { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } Page de garde
  55. 55. #DevoxxFR { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } 55 Page de garde
  56. 56. #DevoxxFR { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } 56 Premier écran
  57. 57. #DevoxxFR 57 { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } Standalone
  58. 58. #DevoxxFR 58 { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "window", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } Window
  59. 59. #DevoxxFR Réengageante
  60. 60. #DevoxxFR 60 Ask User to Subscribe User Subscribes Send End Point Details Check If User Is Subscribed Save End Point Details ServerBrowser Souscription
  61. 61. #DevoxxFR 61 Send to End Point Send To Browser Received by Browser Generate Message Server End Point Client Envoyer un message
  62. 62. #DevoxxFR 62 SW Starts Handle Message Show Notification Push Arrives Client Recevoir un message
  63. 63. #DevoxxFR 63
  64. 64. #DevoxxFR 64 { "name": "Peoples", "short_name": "Peoples", "icons": [ { "src": "../img/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "gcm_sender_id": "912272722967" } Rajouter l’ID
  65. 65. #DevoxxFR 65 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(reg) { reg.pushManager.getSubscription() .then(function(sub) { console.log('Subscription Info', sub); }); }); } else { console.log('Subscription Info', 'Not Supported'); } Vérifier les souscriptions
  66. 66. #DevoxxFR 66 function subscribe() { navigator.serviceWorker.getRegistration().then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(sub) { console.log('Update Server with End Point', sub); }).catch(function(error) { console.log('Unable to subscribe user', error); }); }); } S’abonner
  67. 67. #DevoxxFR 67 function subscribe() { navigator.serviceWorker.getRegistration().then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(sub) { console.log('Update Server with End Point', sub); }).catch(function(error) { console.log('Unable to subscribe user', error); }); }); } S’abonner
  68. 68. #DevoxxFR 68 function unsubscribe() { navigator.serviceWorker.getRegistration().then(function(reg) { reg.pushManager.getSubscription().then(function(sub) { if (sub) { sub.unsubscribe(); console.log('Unsubscribe - user has been unsubscribed!'); } }); }).catch(function(error) { console.log('Error while trying to unsubscribe', error); }); } Se désabonner
  69. 69. #DevoxxFR 69 POST /gcm/send HTTP/1.1 HOST: android.googleapis.com Authorization: key=XXXXXXXXXXXXXXXXXXXXXXXXX Content-Type: application/json Content-Length: ## {"registration_ids": ["fs...Tw:APA...SzXha", "ws...bW:ABE...JzEuO"] } Envoyer un message
  70. 70. #DevoxxFR 70 POST /gcm/send HTTP/1.1 HOST: android.googleapis.com Authorization: key=XXXXXXXXXXXXXXXXXXXXXXXXX Content-Type: application/json Content-Length: ## {"registration_ids": ["fs...Tw:APA...SzXha", "ws...bW:ABE...JzEuO"] } API Key from Google Cloud Console Envoyer un message
  71. 71. #DevoxxFR 71 POST /gcm/send HTTP/1.1 HOST: android.googleapis.com Authorization: key=XXXXXXXXXXXXXXXXXXXXXXXXX Content-Type: application/json Content-Length: ## {"registration_ids": ["fs...Tw:APA...SzXha", "ws...bW:ABE...JzEuO"] } Subscription IDs from users Envoyer un message
  72. 72. #DevoxxFR 72 self.addEventListener('push', function(event) { event.waitUntil( function() { self.registration.showNotification('Title', { body: 'I'm the message body', icon: 'images/icons.png', tag: 'tag', }); }); }); Traiter une notification
  73. 73. #DevoxxFR 73 self.addEventListener('push', function(event) { event.waitUntil( function() { self.registration.showNotification('Title', { body: 'I'm the message body', icon: 'images/icons.png', tag: 'tag', }); }); }); Traiter une notification
  74. 74. #DevoxxFR 74 self.addEventListener('push', function(event) { event.waitUntil( fetch('/notification.json').then(function(response) { return response.json(); }).then(function(data) { self.registration.showNotification(data.title, { body: data.body, icon: data.avatar, tag: data.mail }); }) ); }); De vrais données
  75. 75. #DevoxxFR 75 self.addEventListener('push', function(event) { event.waitUntil( fetch('/weather-alert.json').then(function(response) { return response.json(); }).then(function(data) { self.registration.showNotification(data.name, { body: data.body, icon: data.avatar, tag: data.mail }); }) ); }); De vrais données
  76. 76. #DevoxxFR 76 self.registration.showNotification(data.title, { body: data.body, icon: data.icons, tag: data.tag, actions: [ {action: 'open', title: 'Show me more details'}, {action: 'cancel', title: 'No thanks'} ] }); Proposer des actions
  77. 77. #DevoxxFR 77 self.addEventListener('notificationclick', function(event) { var url; event.notification.close(); if (event.action === 'open') { url = 'http://localhost:8080/#/people/' + event.notification.tag; } clients.openWindow(url); }); Gérer l’action
  78. 78. #DevoxxFR 78 self.addEventListener('notificationclick', function(event) { var url; event.notification.close(); if (event.action === 'open') { url = 'http://localhost:8080/#/people/' + event.notification.tag; } clients.openWindow(url); }); Gérer l’action
  79. 79. #DevoxxFR 79 self.addEventListener('notificationclick', function(event) { var url; event.notification.close(); if (event.action === 'open') { url = 'http://localhost:8080/#/people/' + event.notification.tag; } clients.openWindow(url); }); Gérer l’action
  80. 80. #DevoxxFR Tools
  81. 81. #DevoxxFR 81 Un onglet dédié aux SW Debug
  82. 82. #DevoxxFR 82 simuler un push Debug
  83. 83. #DevoxxFR 83 Visualiser le contenu du cache Debug
  84. 84. #DevoxxFR 84 Debuger le sw Debug
  85. 85. #DevoxxFR 85 Tester le offline Debug
  86. 86. #DevoxxFR 86 Simuler l’ installation Debug
  87. 87. #DevoxxFR ● https://github.com/GoogleChrome/propel ● Polymer: platinium sw-cache et sw-push ● https://github.com/GoogleChrome/sw-precache/ ● https://github.com/GoogleChrome/sw-toolbox ● https://www.npmjs.com/package/idb 87 Des outils pour aller plus loin
  88. 88. #DevoxxFR Industrialiser le SW : gulp 88 ● Permettre de préparer le cache du service worker ● Avoir un mode avec et sans service worker
  89. 89. #DevoxxFR 89 PROGRESSIVE Alors les PWA’s
  90. 90. #DevoxxFR 90 OFFLINE Alors les PWA’s
  91. 91. #DevoxxFR 91 PERFORMANTE Alors les PWA’s
  92. 92. #DevoxxFR Vous aussi faites des Progressives Web Apps 92
  93. 93. #DevoxxFR ● https://jakearchibald.com/2014/offline-cookbook/ ● https://developers.google.com/web/fundamentals/getting-started/?hl=en ● https://speakerdeck.com/jaffathecake/offline-first-progressive-apps ● https://developer.mozilla.org/en- US/docs/Web/API/Service_Worker_API/Using_Service_Workers ● http://www.html5rocks.com/en/tutorials/service-worker/introduction/ ● https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ ● https://medium.com/google-developers/instant-loading-web-apps-with- an-application-shell-architecture-7c0c2f10c73#.m91quu2iq 93 Ressources
  94. 94. #DevoxxFR ● https://www.w3.org/TR/service-workers/ ● https://www.w3.org/TR/appmanifest/ ● https://www.w3.org/TR/push-api/ ● https://fetch.spec.whatwg.org/ 94 Specs
  95. 95. #DevoxxFR Cyril @cbalit Florian @florpeliere Devoxx France 2016 Merci de votre attention ! #PWA

×