image

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

image
Équipe Android
20 avril 2020

Le TechnIKO, c’est quoi ?

Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères à nos développeurs.

Passons sans attendre à notre premier sujet.

Communiquer avec du Javascript via une WebView au sein d’une application mobile native développée avec Kotlin

Le besoin est simple : l’application native charge une page web, développée par notre client, qui contient des méthodes Javascript, et doit appeler ces méthodes pour effectuer des traitements ou récupérer des données. Par exemple, on peut modifier un style sur la page web via une action dans l’application, ou récupérer une donnée à tracker.

La méthode simple : evaluateJavascript

Cette méthode peut être utilisée si on a besoin d’appeler une méthode javascript de manière isolée, car elle est facile à mettre en place mais peu structurée et très basique, notamment car elle ne permet de recevoir qu’une valeur maximum.

Dans l’exemple suivant, on récupère une Webview de la MainActivity qui appelle une URL, et on utilise un bouton pour récupérer la valeur donnée par une fonction Javascript et l’afficher via un Toast :

val name = "John Doe"
webview.settings.javaScriptEnabled = true
webview.loadUrl(myUrl)
button.setOnClickListener {
    webview.evaluateJavascript("javascript:myJsFunction(\"$name\");") { value ->
        Toast.makeText(this@MainActivity, value, Toast.LENGTH_SHORT).show()
    }
}

Côté web, on a une simple page avec la fonction Javascript demandée :

<script type="text/javascript">
	function myJsFunction(name) {
		return "Hello " + name + "!";
	}
</script>

La méthode musclée : @JavascriptInterface

Cette méthode est légèrement plus complexe à mettre en place et nécessite une version d’Android 16 et supérieure, mais permet de regrouper plusieurs méthodes dans une même classe afin d’avoir un code plus propre et organisé.

Pour l’exemple qui suit, on crée une classe qui agira comme interface Web, afin de tracker un évènement de connexion :

class MyWebInterface(private val context: Context) {
	private lateinit var firebaseAnalytics: FirebaseAnalytics

	init {
	  firebaseAnalytics = FirebaseAnalytics.getInstance(this)
  }

	@JavascriptInterface
  fun userLoggedIn(name: String) {
	  val bundle = bundleFromJson(jsonValue)
	  bundle.putString(FirebaseAnalytics.Param.ITEM_NAME, name)
	  firebaseAnalytics.logEvent(FirebaseAnalytics.Event.LOGIN.name(), bundle)
  }
}

Ce code implique que la page web appellera une méthode Android.userLoggedIn en Javascript, que l’application native interceptera :

<script type="text/javascript">
  // Fonction appelée par la page web
	function onUserLogin(name) {
		// Fonction détectée par Android
		Android.userLoggedIn(name)
	}
</script>

Enfin on lie cette interface à la WebView :

webview.settings.javaScriptEnabled = true
webview.addJavascriptInterface(MyWebInterface(this), "Android")
webview.loadUrl(myUrl)

En conclusion, il est très facile de lier Javascript et le natif Kotlin au sein d’une application mobile Android. Il ne reste plus qu’à choisir la bonne méthode :

  • Une seule fonction simple à appeler ? On utilisera evaluateJavascript
  • Plusieurs fonctions et des retours à traiter ? On préfèrera @JavascriptInterface

N’hésitez pas à nous contacter si vous souhaitez en savoir plus ou mettre à profit tout notre savoir-faire en conception, réalisation et exploitation d’applications mobiles natives.

image
image
Bérengère Noël
28 mai 2020
Design . Mobile

Marketing #1 Comment augmenter l’engagement de vos clients et de vos utilisateurs grâce aux mécanismes de gamification ?

Dans le domaine du web et des applications mobiles, la gamification, consiste à exploiter des mécanismes issus de l’univers du jeu dans d’autres domaines, comme des applications ou des sites internet. Elle vise à capter l’attention de l’utilisateur dans un processus de récompenses lui donnant envie de continuer et d’y revenir régulièrement. Le jeu et […]
image
image
IKOMOBI
26 mai 2020
Stratégie

Après le confinement : comment faire pour réussir sa transformation digitale ?

La mise en quarantaine d’une large partie de nos entreprises et services publics, bien que imprévisible, raisonne comme un coup de semonce pour chaque dirigeant, notamment vis à vis du niveau de “digitalisation” de son entreprise. Pour les entreprises à maturité digitale plutôt élevée, cette situation s’est transformée en stress test impromptu, impitoyable révélateur des dysfonctionnements […]
image
image
Bérengère Noël
5 mai 2020
Design

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun […]
image
image
Bérengère Noël
28 avril 2020
Design . Mobile

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de […]
image
image
Équipe iOS
23 avril 2020
Mobile . Technologie

TechnIKO #2 Migration UIWebview vers WKWebview

UIWebview vs WKWebview UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte […]
image
image
Équipe Android
20 avril 2020
Mobile . Technologie

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

Le TechnIKO, c’est quoi ? Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères […]
image
image
Florian Hureau
23 décembre 2019
Actualités

IKOMOBI News #6 : Spotify, Youtube Ads, 5G, voice, Dior, mèmes et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « 圣诞老人到了! » D’où vient cette citation ? Scrollez au bas de l’article pour voir la source 😉 2019 Wrapped : Spotify donne un aperçu de l’usage des données personnelles pour les années à venir La fin […]
image
image
Florian Hureau
3 décembre 2019
Actualités

IKOMOBI News #5 : Tesla, Black Friday, TikTok et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. “La reconnaissance faciale va protéger les droits et intérêts légitimes des citoyens contre les escroqueries et les inscriptions frauduleuses.” D’où vient la citation de la semaine ? Scrollez au bas de l’article pour voir […]
image
image
Florian Hureau
19 novembre 2019
Actualités

IKOMOBI News #4 : Disney+, WeChat, Motorola et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « L’informatique doit être au service de chaque citoyen. Elle ne doit porter atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux libertés individuelles ou publiques. » D’où […]
image
image
Équipe Android
7 novembre 2019
Technologie

London droidcon 2019 : l’incontournable grand-messe européenne des développeurs d’applications mobiles Android

Les 24 et 25 octobre derniers, deux représentants de notre équipe de développement Android se sont rendus, à Londres, à la droidcon 2019 pour faire le plein de nouveautés techniques à propos de leur plateforme fétiche. Reportage. À peine sortis de l’Eurostar, nous prenons le métro londonien pour rejoindre le Business Design Centre qui héberge […]
image
image
Florian Hureau
5 novembre 2019
Actualités

IKOMOBI News #3 : l’actualité digitale via le prisme de l’agence mobile

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. Adobe Photoshop sur iPad : fin de la version bêta La vingt-et-unième mouture de cet éditeur d’image comporte son lot de nouveautés portant sur l’amélioration continue des centaines (milliers ?) d’outils qu’il propose : […]
image
image
Florian Hureau
15 octobre 2019
Actualités

IKOMOBI News #2 : l’actualité digitale via le prisme de l’agence mobile

L’actualité UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI Mastercard, Stripe, eBay et Visa quittent Libra, la monnaie virtuelle de Facebook Après les interrogations voire réticences de nombreux gouvernements à travers le monde, ce sont maintenant ses partenaires historiques qui font faux bond au projet Libra. Tour à tour et à […]