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

Développezvosapplicationsnativesen
HTML/JSavecles
ChromeApps

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.

ChromeApps
Tourd’horizon des applicationsChrome
programmez 178
Découvertedes applicationsChrome Mobiles
programmez 179

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

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 & 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

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, …)

Créeruneapplication
4éléments

Manifest.json
{
"name": "My awesome App",
"version": "2.0.1",
"manifest_version": 2,
"permissions": [...],
"minimum_chrome_version": "23",
"icons": {
...
},
"app": {
"background": {
"scripts": ["app.js"]
}
}
}

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

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.

Scriptdelancement
app.js
______________________________________________________________________
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: "mainwin",
bounds: {
width: 320,
height: 240
}
});
});

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

Démo
Création,packaging&lancement

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

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*
*Chrome OS only in dev Channel

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 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(), …)

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.

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>

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>
<template>
<h1>{{label}}</h1>
</template>
<script src="my-title.js"></script>
</polymer-element>
ready: function() {
}
});
my-title.js
my-title.htmlmy-title.html

IntégrationavecPolymer
Vulcanizer l’application
…mais incompatibleavec ChromeOS
(NodeJS indisponible).
UtiliserChromeDev Editorpour
refactorerpour CSP.
<template>
<h1>{{label}}</h1>
</template>
<script>
ready: function() {
}
});
</script>
</polymer-element>

ChromeDevEditor (developer preview)

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
+ …

ChromeApps&ExtensionsDeveloperTool
Un chrome://extensions amélioré
Améliore le flow de travail
Séparation apps/extensions
Historique des appels (debug)

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

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

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

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.

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 !

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.

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)  

Créersonapplicationmobile
Création d’un nouveau projet
$ cca create MonApp
Constructionde l’APK
$ cca build
Exécuter
$ cca run

Manifest.mobile.jsonmobile
Paramétragespécifique à l’applicationmobile.
Utilepour constitutiondes manifestnatifs(Manifest.xmlsousAndroid)
{
"packageId": "com.your.company.HelloWorld",
"versionCode": 1,
"CFBundleVersion": "1.1.1"
}

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 

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 : 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

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

Contenu connexe

Tendances (16)

En vedette (20)

Similaire à Développez des applications natives en HTML/JS avec Chrome apps (20)

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

Notes de l'éditeur