Développezvosapplicationsnativesen
HTML/JSavecles
ChromeApps
Quisuis-je?
Florent Dupont
Expert TechniqueWeb & Mobilité
florent-dupont.blogspot.fr
+FlorentDUPONT
Cette présentation a é...
ChromeApps
Tourd’horizon des applicationsChrome
programmez 178
Découvertedes applicationsChrome Mobiles
programmez 179
Chromeenunephrase…
“Apporterl’expériencelarichesseduWebendehorsdevotrenavigateur.
”…eten4concepts
UI Immersive
Accèshardwa...
Multi-devices
ChromeOS,windows, Linux, OSX
ApacheCordova : ioS, Android
Chrome–lescanauxdedéveloppement
Canary
Run side-by-side
Profile dédié
Release daily as it’s build
Pas testé
Report & stati...
WebAppsvsChromeExtensionsvsChromeApps
Web Apps
Hébergée
Distant
WEB/JS/CSS
Online
Execution dans navigateur
Service en lig...
Créeruneapplication
4éléments
Manifest.json
{
"name": "My awesome App",
"version": "2.0.1",
"manifest_version": 2,
"permissions": [...],
"minimum_chrome...
Icones
16px 32px 48px 128px
Installation,Web Store
Fortement recommandé
favicon, infobars
(extensions)
recommandé
Raccourc...
Permissions
Définir les accèsautoriséspar l’application.
URL
http://*/* : toutes les URL qui matchent le protocole http.
P...
Scriptdelancement
app.js
______________________________________________________________________
chrome.app.runtime.onLaunc...
Empaquetage
Depuis chrome://extensions
En ligne decommande
chrome.exe --pack-extension=C:myapp --pack-extension-key=C:myap...
Démo
Création,packaging&lancement
API
Tourd’horizon
QuellesAPI?
Les API Web standards : JS standardWeb (document, window, etc), librairiesJS
tierces(jQuery, Angular), XHR.
Le...
APIMatérielle
Serial, Socket(TCP, UDP), USB, HID, bluetooth,BLE
RichNotifications
Différentstypes : basic, image, list,progression
APISystème
Idle,
power,
system.*: CPU, display, Memory,Network,Storage
OSetapplications
Runtime
Storage
SyncFileSystem
App.runtime,app.window
Commands
Events
mediaGalleries
Wallpaper, audio*
*C...
Cloudetservices
pushMessaging
GCM
Identity
Copresence*
*dev channel
Accessibilité
TTS(Text-To-Speech), accessiblityFeatures
I18N
Démo
JouonsavecArduinoetleSerialAPI
DémoduSerialAPI–CommunicationavecArduino
USB (profil serie)
Intégration
aveclesframeworksWeb
ContentSecurityPolicy
Idée: se prémunir des faillesCross-SiteScripting (XSS)
Impacts:
• Pas d’utilisationd’inline scriptin...
Intégrationavecl’existant
index.html
main.js
index.html
Refused to evaluate a string as JavaScript
because 'unsafe-eval' i...
IntégrationavecAngular
Mode de compatibilitéCSP : DirectivengCsp
Impacts:
• Evaluationdes expressions30% plus lent.
• Incl...
IntégrationavecPolymer
Externaliserles portionsde scripts
<polymer-element name="my-title">
<template>
<h1>{{label}}</h1>
...
IntégrationavecPolymer
Vulcanizer l’application
…mais incompatibleavec ChromeOS
(NodeJS indisponible).
UtiliserChromeDev E...
Outilsdedéveloppement
ChromeDevEditor (developer preview)
ChromeDevEditor (developer preview)
Outil unifié pour les développementJS/Dart
CompatibleWeb Apps & ChromeApps
Intégration...
ChromeApps&ExtensionsDeveloperTool
Un chrome://extensions amélioré
Améliore le flow de travail
Séparation apps/extensions
...
Distribuersonapplication
ChromeWebStore
Découvrabilitédes applications
listing, notations,revues, commentaires,achat etinstallation
centralisésau s...
ChromeAppLauncher
Intégréà l’OS.
CompatibletousOS
Pointcentral pour les applications
ChromeAppLauncherdepuisChrome
Disponible sous : chrome://apps
Administrationvia chrome://extensions
Etsurmobile?
BasésurApacheCordova(Adobe PhoneGap)
ApplicationsHybride = ApplicationWeb dans un conteneurnatifvia WebView.
Google contri...
HistoriquedesWebviews
IOS : UIWebControl
Android < 4.4 : moteur de rendu du BrowserAndroid (basé sur Webkit, limité)
Andro...
Limitationsergonomiques
Layout en orientationportrait  privilégierlesmedia-queries CSS.
Taillesde fenêtreindiquées par ch...
Compatibilités
CertainesfonctionnalitésWeb
désactivées,mais portéespar
Cordova.
En cours de portage…
Android IOS
Alarmes ...
Créersonapplicationmobile
Création d’un nouveau projet
$ cca create MonApp
Constructionde l’APK
$ cca build
Exécuter
$ cca...
Manifest.mobile.jsonmobile
Paramétragespécifique à l’applicationmobile.
Utilepour constitutiondes manifestnatifs(Manifest....
Autresspécificités
Cyclede vie etEvenements différentsentreDesktop etMobile !
Chrome Apps Developer Tools(Android only)
Di...
Etaprès?
Etaprès?
Ephemeral Apps
Manifestv3 (promise-basedAPIs)
App_shell
Service Worker
CrossWalkWebview
Plusd’exemplesetoutils
What are Chrome Apps : https://developer.chrome.com/apps
Les vidéosde Google I/O 2014 : Chrome Apps...
Prochain SlideShare
Chargement dans…5
×

Développez des applications natives en HTML/JS avec Chrome apps

2 531 vues

Publié le

Cette présentation a été donnée en Novembre 2014 dans le cadre d’une session Tech Study Group, une session de partage et de veille à SQLI Nantes.

Publié dans : Internet
  • Soyez le premier à commenter

Développez des applications natives en HTML/JS avec Chrome apps

  1. 1. Développezvosapplicationsnativesen HTML/JSavecles ChromeApps
  2. 2. Quisuis-je? Florent Dupont Expert TechniqueWeb & Mobilité florent-dupont.blogspot.fr +FlorentDUPONT Cette présentation a été donnée en Novembre 2014 dans le cadre d’une session Tech Study Group, une session de partage et de veille à SQLI Nantes. Cette présentation de Chrome Apps est mise à disposition selon les termes de la licence Creative Commons by-nc-sa.
  3. 3. ChromeApps Tourd’horizon des applicationsChrome programmez 178 Découvertedes applicationsChrome Mobiles programmez 179
  4. 4. Chromeenunephrase… “Apporterl’expériencelarichesseduWebendehorsdevotrenavigateur. ”…eten4concepts UI Immersive Accèshardware Offline par default Sécurisé
  5. 5. Multi-devices ChromeOS,windows, Linux, OSX ApacheCordova : ioS, Android
  6. 6. Chrome–lescanauxdedéveloppement Canary Run side-by-side Profile dédié Release daily as it’s build Pas testé Report & statisticsto Google Très proche de dev channel Dev channel Release 1 to 2 /Week Bêta channel Release Weekly 1 month before Stable Chromium builds Open-sourceproject Sources Continuousbuild Working copy Can be build from source Stablechannel Fully tested Updated every 2-3 weeks Major update 6 months Release public Earlyaccess StableSources
  7. 7. WebAppsvsChromeExtensionsvsChromeApps Web Apps Hébergée Distant WEB/JS/CSS Online Execution dans navigateur Service en ligne API : API Web Chrome * ChromeExtensions Packagé en CRX (zip-like) Local WEB/JS/CSS Offline Execution dans navigateur Fonctionnalité du navigateur API : API Web Chrome *, API extensions (bookmarks, cookies, devtools, downloads, history, …) ChromeApps Packagée en CRX (zip-like) Local WEB/JS/CSS Offline Execution hors navigateur Application native API :API Web Chrome *, API apps (bluetooth, serial, fileSystem, runtime, …)
  8. 8. Créeruneapplication 4éléments
  9. 9. Manifest.json { "name": "My awesome App", "version": "2.0.1", "manifest_version": 2, "permissions": [...], "minimum_chrome_version": "23", "icons": { ... }, "app": { "background": { "scripts": ["app.js"] } } }
  10. 10. Icones 16px 32px 48px 128px Installation,Web Store Fortement recommandé favicon, infobars (extensions) recommandé RaccourcisWindows Page de management Carrées Down/up-scaléessi besoin
  11. 11. Permissions Définir les accèsautoriséspar l’application. URL http://*/* : toutes les URL qui matchent le protocole http. Par exemple : http://www.google.com/ file:///foo* : tous les accès aux fichiers locaux dont les fichiers commencent par foo* <all_urls> : matche toutesles URL API serial, storage, videoCapture, …  Disponible sur la documentationdes API.
  12. 12. Scriptdelancement app.js ______________________________________________________________________ chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('index.html', { id: "mainwin", bounds: { width: 320, height: 240 } }); });
  13. 13. Empaquetage Depuis chrome://extensions En ligne decommande chrome.exe --pack-extension=C:myapp --pack-extension-key=C:myapp.pem
  14. 14. Démo Création,packaging&lancement
  15. 15. API Tourd’horizon
  16. 16. QuellesAPI? Les API Web standards : JS standardWeb (document, window, etc), librairiesJS tierces(jQuery, Angular), XHR. Les API Web non-standardiséesimplémentéespar Chrome : audio, geolocalisation, canvas, mais égalementWeb Speech,getUserMedia,Web Animations,… Les API Webkit : CSS webkit-* (webkit-transform, webkit-transition, … ) API V8 : JSON Les API ChromeApps pas les API Chrome Extensions
  17. 17. APIMatérielle Serial, Socket(TCP, UDP), USB, HID, bluetooth,BLE
  18. 18. RichNotifications Différentstypes : basic, image, list,progression
  19. 19. APISystème Idle, power, system.*: CPU, display, Memory,Network,Storage
  20. 20. OSetapplications Runtime Storage SyncFileSystem App.runtime,app.window Commands Events mediaGalleries Wallpaper, audio* *Chrome OS only in dev Channel
  21. 21. Cloudetservices pushMessaging GCM Identity Copresence* *dev channel
  22. 22. Accessibilité TTS(Text-To-Speech), accessiblityFeatures I18N
  23. 23. Démo JouonsavecArduinoetleSerialAPI
  24. 24. DémoduSerialAPI–CommunicationavecArduino USB (profil serie)
  25. 25. Intégration aveclesframeworksWeb
  26. 26. ContentSecurityPolicy Idée: se prémunir des faillesCross-SiteScripting (XSS) Impacts: • Pas d’utilisationd’inline scriptingdans le HTML : les balises <script>,les events handlers (i.e onclick())bloqués • Pas de référencementà des resourcesexternes: img, frame, font, media, style (exceptaudio et video). • Les fonction« string-to-JS» nesont pas autorisées(eval(), Function(), …)
  27. 27. Intégrationavecl’existant index.html main.js index.html Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
  28. 28. IntégrationavecAngular Mode de compatibilitéCSP : DirectivengCsp Impacts: • Evaluationdes expressions30% plus lent. • Inclusionangular-csp.css manuellement • Ajoutde la directiveng-csp. <!doctype html> <html ng-app ng-csp>
  29. 29. IntégrationavecPolymer Externaliserles portionsde scripts <polymer-element name="my-title"> <template> <h1>{{label}}</h1> </template> <script> Polymer("my-title", { ready: function() { this.label = "I <3 my ChromeBook"; } }); </script> </polymer-element> <polymer-element name="my-title"> <template> <h1>{{label}}</h1> </template> <script src="my-title.js"></script> </polymer-element> Polymer("my-title", { ready: function() { this.label = "I <3 my ChromeBook"; } }); my-title.js my-title.htmlmy-title.html
  30. 30. IntégrationavecPolymer Vulcanizer l’application …mais incompatibleavec ChromeOS (NodeJS indisponible). UtiliserChromeDev Editorpour refactorerpour CSP. <polymer-element name="my-title"> <template> <h1>{{label}}</h1> </template> <script> Polymer("my-title", { ready: function() { this.label = "I <3 my ChromeBook"; } }); </script> </polymer-element>
  31. 31. Outilsdedéveloppement
  32. 32. ChromeDevEditor (developer preview)
  33. 33. ChromeDevEditor (developer preview) Outil unifié pour les développementJS/Dart CompatibleWeb Apps & ChromeApps IntégrationBower Déploiement sur Mobile PublicationPlayStore Clone depuis Github Polymer Designer + …
  34. 34. ChromeApps&ExtensionsDeveloperTool Un chrome://extensions amélioré Améliore le flow de travail Séparation apps/extensions Historique des appels (debug)
  35. 35. Distribuersonapplication
  36. 36. ChromeWebStore Découvrabilitédes applications listing, notations,revues, commentaires,achat etinstallation centralisésau sein d’une plateformeunique. Monétisation. Comptedéveloppeur : 5$
  37. 37. ChromeAppLauncher Intégréà l’OS. CompatibletousOS Pointcentral pour les applications
  38. 38. ChromeAppLauncherdepuisChrome Disponible sous : chrome://apps Administrationvia chrome://extensions
  39. 39. Etsurmobile?
  40. 40. BasésurApacheCordova(Adobe PhoneGap) ApplicationsHybride = ApplicationWeb dans un conteneurnatifvia WebView. Google contributeur Plugin Cordova pour ChromeApps Objectif: Proposerles API clés de Chrome pour une utilisationavec iOS etAndroid.
  41. 41. HistoriquedesWebviews IOS : UIWebControl Android < 4.4 : moteur de rendu du BrowserAndroid (basé sur Webkit, limité) Android 4.4 : moteur Chromium M30 (V8, quelques standards). Android 5 : moteurChromium M37 (WebRTC,WebAudio, WebGL, WebComponents,…) Updatabledepuis Google Play !
  42. 42. Limitationsergonomiques Layout en orientationportrait  privilégierlesmedia-queries CSS. Taillesde fenêtreindiquées par chrome.app.windowignorées.Appli en plein- écran par défaut ! Petitsboutons/iconesen mode tactile prévoir> 44px. Elements en survol de souris : comportementsincertains A éviter Tap-delayde 300ms  Utiliserlibrairiestiercesou Chrome>M32.
  43. 43. Compatibilités CertainesfonctionnalitésWeb désactivées,mais portéespar Cordova. En cours de portage… Android IOS Alarmes    Système de Fichier   Internationalisation    Identité   Veille (idle)   Notifications   Power   Push Messaging    Socket TCP/UDP   Stockage   API syncFileSystem   Paiements    Bluetooth   Commandes   Menus contextuels   Galerie médias   Permissions   Port Série   Info Système   Synthèse vocale   types   USB   Webstore   Balise <webview>   Client Natif (NaCl)  
  44. 44. Créersonapplicationmobile Création d’un nouveau projet $ cca create MonApp Constructionde l’APK $ cca build Exécuter $ cca run
  45. 45. Manifest.mobile.jsonmobile Paramétragespécifique à l’applicationmobile. Utilepour constitutiondes manifestnatifs(Manifest.xmlsousAndroid) { "packageId": "com.your.company.HelloWorld", "versionCode": 1, "CFBundleVersion": "1.1.1" }
  46. 46. Autresspécificités Cyclede vie etEvenements différentsentreDesktop etMobile ! Chrome Apps Developer Tools(Android only) Distributionsur Web Store(et non!) Storedédiés : Google Play, Apple App Store Coûtsde distributionplusélevés : 25$ (Google) et 99$ (Apple) Management,monétisation,notationetcommentaireséparpillés 
  47. 47. Etaprès?
  48. 48. Etaprès? Ephemeral Apps Manifestv3 (promise-basedAPIs) App_shell Service Worker CrossWalkWebview
  49. 49. Plusd’exemplesetoutils What are Chrome Apps : https://developer.chrome.com/apps Les vidéosde Google I/O 2014 : Chrome Apps : State of the Union et Chrome Apps on Android Les examples de chaque API : https://github.com/GoogleChrome/chrome-app-samples Les fonctionnalitésdispo dans Chrome : https://www.chromestatus.com/features

×