View
323
Download
2
Category
Preview:
Citation preview
Développez vos applications natives en HTML/JS avec les
Chrome Apps
Qui suis-je ?
Florent DupontExpert Technique Web & Mobilitéflorent-dupont.blogspot.fr
+FlorentDUPONTCette 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.
Chrome Apps
Tour d’horizon des applications Chromeprogrammez 178
Découverte des applications Chrome Mobilesprogrammez 179
Chrome en une phrase…
“ Apporter l’expérience la richesse du Web en dehors de votre navigateur.
”… et en 4 conceptsUI Immersive
Accès hardware
Offline par default
Sécurisé
Multi-devices
ChromeOS, windows, Linux, OSX
Apache Cordova : ioS, Android
Chrome – les canaux de développement
CanaryRun side-by-sideProfile dédiéRelease daily as it’s buildPas testéReport & statistics to GoogleTrès proche de dev channel
Dev channelRelease 1 to 2 /Week
Bêta channelRelease Weekly
1 month before Stable
Chromium buildsOpen-source projectSourcesContinuous buildWorking copyCan be build from source
Stable channelFully tested
Updated every 2-3 weeks
Major update 6 months
Release public
Early access StableSources
Web Apps vs Chrome Extensions vs Chrome Apps
Web Apps
Hébergée
Distant
WEB/JS/CSS
Online
Execution dans navigateur
Service en ligne
API : API Web Chrome *
Chrome Extensions
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, …)
Chrome Apps
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éer une application4 é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é
Raccourcis Windows Page de management
Carrées
Down/up-scalées si besoin
Permissions
Définir les accès autorisés par 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 toutes les URL
API
serial, storage, videoCapture, …
Disponible sur la documentation des API.
Script de lancementapp.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 de commande
chrome.exe --pack-extension=C:\myapp --pack-extension-key=C:\myapp.pem
DémoCréation, packaging & lancement
APITour d’horizon
Quelles API ?
Les API Web standards : JS standard Web (document, window, etc), librairies JS tierces (jQuery, Angular), XHR.
Les API Web non-standardisées implémentées par Chrome : audio, geolocalisation, canvas, mais également Web Speech, getUserMedia, Web Animations, …
Les API Webkit : CSS webkit-* (webkit-transform, webkit-transition, … )
API V8 : JSON
Les API Chrome Apps
pas les API Chrome Extensions
API Matérielle
Serial, Socket (TCP, UDP), USB, HID, bluetooth, BLE
Rich Notifications
Différents types : basic, image, list, progression
API Système
Idle,
power,
system.* : CPU, display, Memory, Network, Storage
OS et applications
Runtime StorageSyncFileSystemApp.runtime, app.windowCommandsEventsmediaGalleriesWallpaper, audio*
*Chrome OS only in dev Channel
Cloud et services
pushMessaging
GCM
Identity
Copresence*
*dev channel
Accessibilité
TTS (Text-To-Speech), accessiblityFeatures
I18N
DémoJouons avec Arduino et le Serial API
Démo du Serial API – Communication avec Arduino
USB (profil serie)
Intégration avec les frameworks Web
Content Security Policy
Idée : se prémunir des failles Cross-Site Scripting (XSS)
Impacts :
• Pas d’utilisation d’inline scripting dans le HTML : les balises <script>, les events handlers (i.e onclick()) bloqués
• Pas de référencement à des resources externes : img, frame, font, media, style(except audio et video).
• Les fonction « string-to-JS » ne sont pas autorisées (eval(), Function(), …)
Intégration avec l’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égration avec Angular
Mode de compatibilité CSP : Directive ngCsp
Impacts :
• Evaluation des expressions 30% plus lent.
• Inclusion angular-csp.css manuellement
• Ajout de la directive ng-csp.<!doctype html>
<html ng-app ng-csp>
Intégration avec Polymer
Externaliser les portions de 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
Intégration avec Polymer
Vulcanizer l’application
…mais incompatible avec ChromeOS (NodeJS indisponible).
Utiliser Chrome Dev Editor pour refactorer pour 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>
Outils de développement
Chrome Dev Editor (developer preview)
Chrome Dev Editor (developer preview)
Outil unifié pour les développement JS/Dart
Compatible Web Apps & Chrome Apps
Intégration Bower
Déploiement sur Mobile
Publication Play Store
Clone depuis Github
Polymer Designer
+ …
Chrome Apps & Extensions Developer Tool
Un chrome://extensions amélioré
Améliore le flow de travail
Séparation apps/extensions
Historique des appels (debug)
Distribuer son application
Chrome Web Store
Découvrabilité des applications
listing, notations, revues, commentaires, achat et installation
centralisés au sein d’une plateforme unique.
Monétisation.
Compte développeur : 5$
Chrome App Launcher
Intégré à l’OS.
Compatible tous OS
Point central pour les applications
Chrome App Launcher depuis Chrome
Disponible sous : chrome://apps
Administration via chrome://extensions
Et sur mobile ?
Basé sur Apache Cordova (Adobe PhoneGap)
Applications Hybride = Application Web dans un conteneur natif via WebView.
Google contributeur
Plugin Cordova pour Chrome Apps
Objectif :
Proposer les API clés de Chrome pour une utilisation avec iOS et Android.
Historique des Webviews
IOS : UIWebControl
Android < 4.4 : moteur de rendu du Browser Android (basé sur Webkit, limité)
Android 4.4 : moteur Chromium M30 (V8, quelques standards).
Android 5 : moteur Chromium M37 (WebRTC, WebAudio, WebGL, WebComponents, …)
Updatable depuis Google Play !
Limitations ergonomiques
Layout en orientation portrait privilégier les media-queries CSS.
Tailles de fenêtre indiquées par chrome.app.window ignorées. Appli en plein-
écran par défaut !
Petits boutons/icones en mode tactile prévoir > 44px.
Elements en survol de souris : comportements incertains A éviter
Tap-delay de 300ms Utiliser librairies tierces ou Chrome >M32.
Compatibilités
Certaines fonctionnalités Web
désactivées, mais portées par
Cordova.
En cours de portage…
Android IOSAlarmes
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éer son application mobile
Création d’un nouveau projet
$ cca create MonApp
Construction de l’APK
$ cca build
Exécuter
$ cca run
Manifest.mobile.json mobile
Paramétrage spécifique à l’application mobile.
Utile pour constitution des manifest natifs (Manifest.xml sous Android)
{
"packageId": "com.your.company.HelloWorld",
"versionCode": 1,
"CFBundleVersion": "1.1.1"
}
Autres spécificités
Cycle de vie et Evenements différents entre Desktop et Mobile !
Chrome Apps Developer Tools (Android only)
Distribution sur Web Store (et non!) Store dédiés : Google Play, Apple App Store
Coûts de distribution plus élevés : 25$ (Google) et 99$ (Apple)
Management, monétisation, notation et commentaires éparpillés
Et après ?
Et après ?
Ephemeral Apps
Manifest v3 (promise-based APIs)
App_shell
Service Worker
CrossWalk Webview
Plus d’exemples et outils
What are Chrome Apps : https://developer.chrome.com/apps
Les vidéos de 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és dispo dans Chrome : https://www.chromestatus.com/features
Recommended