Mettez un Panda Roux dans votre Webview HTML5

# .title[Mettez un .orange[Panda Roux] dans votre .white[Webview]]

.gray.large[[@dlecan](https://twitter.com/dlecan) - #DevFest]

---

Par

# Damien Lecan

Web & mobile Architect @.red[[SQLI](http://www.sqli.com)]

Open Source - Web

---
name: menu
class: center, middle, bg-orange, white

# .black[Menu]

## [Webview ?](#webview)
### [Et problèmes sous Android](#webview)

## [Les solutions de Mozilla](#solutions)

---
class: center, middle

# .gray.onceupon.x-large[Il était une fois ...]

???

- Expert technique

- MOA qui vient vous voir

- Super appli

---
class: middle, center, bg-gray

# .x-large.app-title[.orange[N].green[B].blue[A]]
## .white.app-subtitle[New Banking App]

---
name: exigences

# Exigences

Tablettes / Accès par les stores

Desktop / Site web

Expérience utilisateur (quasi) identique partout

Effet .red[*_Whaou !_*]

*Time-to-market* court

... et budget réduit !

---
class: center, middle

#  Quelle technologie de dev. sur tablette ?

iOS ... .green[OK]

Windows 8 ...  .green[OK]

Android : 
--
.red[Fail !!]

---
name: webview
class: center, middle, bg-black, white

# [](#menu)

# Webview ?

---
background-image: url("resources/biere.jpg")

# .white.center.middle[HTML5 / JS / CSS  ]

# .left[WEBVIEW !]

---
background-image: url("resources/webview_healthtap_simple.png")
class:  middle

# .blue[WEBVIEW !]

Moteur HTML5 embarquable dans une app mobile

"Concept" disponible sur tous les OS mobiles

---
# Webview sous Android ?

```java
String url = "http://devfest.gdgnantes.com/";
// Ou bien pourrait être une URL locale pour une application
// Javascript riche (type AngularJS ...)
// url = "file:///...";

WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl(url);

WebSettings ws = webview.getSettings();
// JS désactivé par défaut !
ws.setJavaScriptEnabled(true);
```

- Lien Java <-> JavaScript possible
- Paramétrage fin des caches
- Désactivation de comportements "Web" : rebond, zoom ...

---
class: middle, center

# Que valent ces Webviews ?

---

Support des fonctionnalités HTML5

---

Parts de marché des versions Android

.footnote[Source (2014-11-03): [Android Dashboard](https://developer.android.com/about/dashboards/index.html#Platform)]

---

# .center[En résumé]

1. Combinaison HTML5 + Natif selon plateformes : _Time-to-market_ et budget à risques 
2. HTML5 sur toutes les plateformes
 * Android ≤ 4.3 : performances insuffisantes 
 * Android 4.4 et 5+ : parts de marché insuffisantes

--
.center[![Colère de la MOA](resources/colere.jpg)]

---
name: solutions
class: center, middle, bg-black, white

# [](#menu)

# Les solutions de Mozilla

---
class: center, bottom
background-image: url("resources/firefoxos6.jpg")

# .contrast[Geckoview .red[//] Open Web Apps for Android]

---
class: center, middle, bg-black, white

# Geckoview

---
# Geckoview

- Extraction du moteur Fennec/Firefox mobile
  - Embarquable dans votre APK : API Java + lib natives
--

- Disponible pour plusieurs architectures
  - x86 et armv7 : ~7Mo de librairies
  - armv6 : support stoppé il y a quelques mois
--

- Prêt pour le développement
  - Debug à distance possible par ex.
- [Intégration au sein de Cordova](https://issues.apache.org/jira/browse/CB-3990) dans les cartons

---
# Geckoview

### Quelques ressources

- [Page du projet](https://wiki.mozilla.org/Mobile/GeckoView)
- [Navigateur simple basé sur Geckoview](https://github.com/mfinkle/geckobrowser)

---

# Geckoview

```
final String url = "http://devfest.gdgnantes.com/"; // Ou file:///

GeckoView geckoView = (GeckoView) findViewById(R.id.webview);

browser.setChromeDelegate(new GeckoViewChrome() {
  public void onReady(GeckoView view) {
    view.addBrowser(url);
  }
  // Il faut aussi redéfinir d'autres méthodes pour gérer
  // correctement le cycle de vie de la webview
  // onAlert, onConfirm, onDebugRequest, onScriptMessage
});
```

---

# Geckoview

- On attend une release
- API incompatible avec celle de la Webview Android
- Pas (encore) intégrée avec Cordova
- Packaging complexe *
- Non disponible sous iOS
]

.footnote.left[*[Pistes d'améliorations](http://www.ncalexander.net/blog/2014/07/10/build-your-own-browser-a-maven-repository-for-geckoview/)]

???

- Non compatible iOS ou Windows Phone/8

- Support riche d'HTML5
- Performances HTML/JS/CSS
- Maîtrise de votre plateforme d'exécution
  - Version du moteur HTML5
  - Indépendance des versions d'Android
]

---
class: center, middle, bg-black, white

# Open Web Apps for Android

???

Plus industriel

---

# Open Web Apps for Android

.float-right.mozilla[![Mozilla](resources/mozilla-wordmark-white.png)]

- Initiative de Mozilla
- Apporter à Android une expérience d'applications "natives" avec HTML5/CSS/JS

## Comment ? 
--
.green[Avec une usine à produire des APK Web Apps]

- Construction d'APK à partir d'un Manifest ou d'un contenu web
  - Service en SaaS
.float-right.firefox[![Mozilla](resources/firefox_logo-only_RGB.png)]
  - [Installation locale possible](https://github.com/mozilla/apk-factory-service)
- Exécution basée sur une installation de Firefox Mobile
  - Locale au terminal

---

# Open Web Apps for Android

## Processus de construction d'une Web App

Construction de l'application Web (hébergée ou packagée)

Description de la Web App à l'aide d'un `manifest.webapp`

Construction de l'APK de notre application avec les outils de Mozilla

Déploiement de l'APK dans les terminaux
 Au 1er lancement, installation de Firefox Mobile si besoin

---

# Open Web Apps for Android

Exemple de `manifest.webapp`

```JSON
{
  "name":"Devfest Nantes 2014",
  "description":"Application Devfest Nantes 2014",
  "version":"1.0",
  "icons":{
    "128":"128.png"
  },
  "installs_allowed_from":["*"],
  "launch_path":"index.html",
  "developer":{
    "name":"Damien Lecan",
    "url":"http://twitter.com/dlecan"
  }
}

```

---
class: center, middle, bg-black, white

# Démo

---

# Open Web Apps for Android

- Peu requérir un store tiers* (Marketplace)
- Requiert l'installation de Firefox Mobile
- Pas disponible pour iOS

]

.footnote.left[*Et donc d'autoriser les "Sources inconnues" d'applications, ce qui n'est jamais sûr]

- Construction de Web Apps très simple
  - Pas une ligne de Java
- API puissantes et ouvertes pour les apps packagées : paiement ...
- Outils de développement/debug prêts
- Ponts aisés vers d'autres OS
]

---
class: center, middle, bg-black, white

# Et du côté de Google ?

---

# Nouveauté Android 5

.blockquote[Android 5.0 includes a version of WebView based on the Chromium M37 release, adding support for WebRTC, WebAudio, WebGL (...) Custom Elements, Shadow DOM, HTML Imports (...).
 
The Chromium layer is now .green[**updatable from Google Play**].
 
 
[Android Developers](http://developer.android.com/about/versions/lollipop.html#WebView)
]

Proche Open Web Apps : un *runtime* est déposé sur le téléphone, partagé et les "Web Apps" s'appuient dessus.

## .red[Idéal dans 3 ans] (~ Chrome 64, Firefox 59 !!)

---
name: conclusion
class: bg-black, white, center, middle

# .red[Geckoview] .blue[&] .orange[Open Web Apps]

## Deux solutions qui font avancer le web sur Android

---
class: bg-black, center, white

# .blue.title[Merci !]

# .title[.red[Q] .green[&] .blue[R]]

.gray.large[[@dlecan](https://twitter.com/dlecan) - #Devfest]

.footnote.left[Built with [remark](https://github.com/gnab/remark/)]

---

name: intro-devfest
background-image: url("resources/2014_affiche_A2_paysage_avec sponsors_16-9.png")