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.
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, …)
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.
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
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>
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
+ …
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)
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
Notes de l'éditeur
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
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.