Cette présentation traite du développement d'applications Chrome utilisant HTML et JavaScript, axée sur les fonctionnalités des Chrome Apps. Elle couvre divers aspects, notamment la création, le packaging, et les API disponibles, tout en mettant en évidence les différences entre les applications web, les extensions Chrome et les Chrome Apps. Les outils de développement et la distribution sur les stores sont également abordés, ainsi que des considérations de compatibilité entre plateformes.

1. Développezvosapplicationsnativesen
HTML/JSavecles
ChromeApps

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. ChromeApps
Tourd’horizon des applicationsChrome
programmez 178
Découvertedes applicationsChrome Mobiles
programmez 179

4. Chromeenunephrase…
“Apporterl’expériencelarichesseduWebendehorsdevotrenavigateur.
”…eten4concepts
UI Immersive
Accèshardware
Offline par default
Sécurisé

5. Multi-devices
ChromeOS,windows, Linux, OSX
ApacheCordova : ioS, Android

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. 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. Créeruneapplication
4éléments

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. 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. 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. Scriptdelancement
app.js
______________________________________________________________________
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: "mainwin",
bounds: {
width: 320,
height: 240
}
});
});

13. Empaquetage
Depuis chrome://extensions
En ligne decommande
chrome.exe --pack-extension=C:myapp --pack-extension-key=C:myapp.pem

14. Démo
Création,packaging&lancement

15. API
Tourd’horizon

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. APIMatérielle
Serial, Socket(TCP, UDP), USB, HID, bluetooth,BLE

18. RichNotifications
Différentstypes : basic, image, list,progression

19. APISystème
Idle,
power,
system.*: CPU, display, Memory,Network,Storage

20. OSetapplications
Runtime
Storage
SyncFileSystem
App.runtime,app.window
Commands
Events
mediaGalleries
Wallpaper, audio*
*Chrome OS only in dev Channel

21. Cloudetservices
pushMessaging
GCM
Identity
Copresence*
*dev channel

22. Accessibilité
TTS(Text-To-Speech), accessiblityFeatures
I18N

23. Démo
JouonsavecArduinoetleSerialAPI

24. DémoduSerialAPI–CommunicationavecArduino
USB (profil serie)

25. Intégration
aveclesframeworksWeb

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. 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. 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. 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. 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. Outilsdedéveloppement

32. ChromeDevEditor (developer preview)

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. ChromeApps&ExtensionsDeveloperTool
Un chrome://extensions amélioré
Améliore le flow de travail
Séparation apps/extensions
Historique des appels (debug)

35. Distribuersonapplication

36. ChromeWebStore
Découvrabilitédes applications
listing, notations,revues, commentaires,achat etinstallation
centralisésau sein d’une plateformeunique.
Monétisation.
Comptedéveloppeur : 5$

37. ChromeAppLauncher
Intégréà l’OS.
CompatibletousOS
Pointcentral pour les applications

38. ChromeAppLauncherdepuisChrome
Disponible sous : chrome://apps
Administrationvia chrome://extensions

39. Etsurmobile?

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. 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. 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. 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. Créersonapplicationmobile
Création d’un nouveau projet
$ cca create MonApp
Constructionde l’APK
$ cca build
Exécuter
$ cca run

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. 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. Etaprès?

48. Etaprès?
Ephemeral Apps
Manifestv3 (promise-basedAPIs)
App_shell
Service Worker
CrossWalkWebview

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