développez des applications natives en html/js avec chrome apps

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