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

1 537 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
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 537
Sur SlideShare
0
Issues des intégrations
0
Intégrations
324
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Si le device peut exécuter Chrome, alors il peut exécuter les Applications Chrome également

  • Pour les différentes versions par OS :
    http://www.chromium.org/getting-involved/dev-channel

    Différence entre Chromium et Chrome : tout l’aspect légal : codecs vidéo et audio ne sont pas dispo sur Chromium. Chrome dispose de la surcouche Google : rapport de crash et d’utilisatoin, update auto, pdf viewer, etc. Autre point : Chromium est public : les sources sont dispo sous licences BSD. Chrome est privé (ces sources ne sont pas disponibles).
    Pour connaitre les API implémentées et les versions en cours : https://www.chromestatus.com/features.
    Par exemple en ce moment : 41, 40, 39, 38
  • *non standardisées ou en cours de standardisation.
  • A savoir qu’il faudra également prévoir des images complémentaires pour la mise à dispo sur le store (notamment des screenshots)
  • La liste complète des permissions est disponible ici : https://developer.chrome.com/apps/declare_permissions
  • Le format CRX est un format ouvert : on peut même carrément créer son propre script dans le langage de son choix pour le créer.
  • Par exemple, Web Speech API et getUserMedia sont en cours de standardisation mais pas implémentées par tous les navigateurs. Typiquement, le webspeech API est dispo sur Chrome, mais pas sur Firefox.

    utiliser caniuse.com pour savoir si on peut utiliser une API ou pas selon le navigateur.
    Certaines API ne sont pas encore spécifiées et sont encore à l'état de bouillon (DRAFT), mais sont déjà implémentées dans Chrome. Par exemple : http://w3c.github.io/web-animations/
    Comment savoir si une fonctionnalité est implémnetées ?
    On peut regarder sur le site de Mozilla pour connaitre l'implémentation de certaines Web API.
    https://developer.mozilla.org/en-US/docs/Web/API/

    Sinon, plus spécifiquement à Chrome : 
    https://www.chromestatus.com/features

  • Inspiré de http://arduino.cc/en/Tutorial/Blink
  • Plus d’info sur https://developer.chrome.com/apps/contentSecurityPolicy
  • AngularJS uses Function(string) generated functions as a speed optimization. Applying the ngCsp directive will cause Angular to use CSP compatibility mode. When this mode is on AngularJS will evaluate all expressions up to 30% slower than in non-CSP mode, but no security violations will be raised.
    CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically includes some CSS rules (e.g. ngCloak). To make those directives work in CSP mode, include the angular-csp.css manually.

    Plus d’info : https://docs.angularjs.org/api/ng/directive/ngCsp
  • Disponible ici : https://chrome.google.com/webstore/category/collection/for_your_desktop
  • Disponible ici : https://chrome.google.com/webstore/category/collection/for_your_desktop
  • Crosswalk embed une webview Chromium. Permet d’exécuter des appli chrome sur des device qui n’avais pas encore Chrome.
    Jusquà Android ICS.
  • Crosswalk embed une webview Chromium. Permet d’exécuter des appli chrome sur des device qui n’avais pas encore Chrome.
    Jusquà Android ICS.
  • tap-delay. Sur les browser-mobiles, il y’a toujours un délai de 300ms entre l’appui et le moment ou le « click » est considéré. UX dégradée ! L’histoire du tap-delay est expliquée ici : http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
  •  Les alarmes ne se déclenchent que si l’application est au premier plan  Les méthodes JS (chrome.i18n) sont fonctionnelles mais pas les instructions CSS.  Qualité Bêta  Local storage only. Le sync storage fonctionne en mode dégradé (comme storage.local)  Qualité Alpha

    A surveiller sur : https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/APIStatus.md
  • Crosswalk embed une webview Chromium. Permet d’exécuter des appli chrome sur des device qui n’avais pas encore Chrome.
    Jusquà Android ICS.
  • Par exemple, le Manifest Android (Manifest.xml nécessaire à la constitution de l’APK) : le champ android:versionName est déduit de la version de l’application renseignée dans le manifest.json et le champ android:versionCode est déduit du fichier manifest.mobile.json
  • Crosswalk embed une webview Chromium. Permet d’exécuter des appli chrome sur des device qui n’avais pas encore Chrome.
    Jusquà Android ICS.
  • Ephemeral Apps : applications « One-time ». Processus d’installation/désinstallation simplifié.
    App_shell : mode d’exécution sans tirer tout le runtime Chrome.
    2 use cases : les applications Kiosks, les exécutions sur environnements à ressources limitées.
  • 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

    ×