Développer la WebView

Chargez une expérience OmniLab dans une WebView React Native, iOS ou Android, avec les réglages qui comptent.

Ajoutez OmniLab comme écran dans votre app. Cette page s'adresse à votre développeur mobile ; elle suppose que les exigences WebView sont déjà confirmées.

React Native

npm install react-native-webview

OmniLab dans une WebView React Native

import React from "react";
import { WebView } from "react-native-webview";

export default function OmniLabScreen({ language, memberId }) {
  const url =
    `https://experience.example.com/<campaign-public-link>` +
    `?embedded=1&c=<touchpoint-id>` +
    `&l=${encodeURIComponent(language)}` +
    (memberId ? `&fci=${encodeURIComponent(memberId)}` : "");

  return (
    <WebView
      source={{ uri: url }}
      style={{ flex: 1 }}
      javaScriptEnabled
      domStorageEnabled
      sharedCookiesEnabled
      thirdPartyCookiesEnabled
      allowsInlineMediaPlayback
      mediaPlaybackRequiresUserAction={false}
      onShouldStartLoadWithRequest={(request) => {
        // Garder OmniLab dans la WebView ; envoyer le reste au navigateur système.
        return request.url.startsWith("https://experience.example.com");
      }}
    />
  );
}

flex: 1 compte plus qu'il n'y paraît — une WebView sans cela s'effondre à une hauteur nulle et n'affiche rien, ce qui ressemble à un échec de chargement.

Le garde onShouldStartLoadWithRequest empêche les liens externes (site d'un partenaire, conditions générales) d'ouvrir dans votre app, où ils n'auraient aucun moyen de revenir.

Utilisez WKWebView. Activez JavaScript, autorisez la lecture média inline, et implémentez le delegate de permission de capture média pour qu'une demande caméra dans l'expérience atteigne la demande native — sans cela la demande est refusée silencieusement et un jeu de scan paraît cassé.

Ajoutez à Info.plist les descriptions d'usage nécessaires (NSCameraUsageDescription, NSLocationWhenInUseUsageDescription). Une description manquante fait crasher l'app à la première demande de permission.

Android natif

Utilisez la WebView standard avec javaScriptEnabled et domStorageEnabled. Implémentez onPermissionRequest dans votre WebChromeClient et accordez la permission après avoir vérifié la permission runtime de l'app — la demande navigateur et la permission Android sont deux barrières distinctes et les deux doivent passer.

Mettez setMediaPlaybackRequiresUserGesture(false) si l'expérience lance des médias automatiquement.

Transmettre votre membre connecté

Si votre app sait qui est le participant, ajoutez fci à l'adresse plutôt que de le faire se reconnecter dans la WebView. Voir URLs d'expérience pour une app.

Gardez les identifiants hors du bundle de l'app

Si votre app a aussi besoin d'un accès serveur à serveur à OmniLab, faites-le depuis votre propre backend. Tout ce qui est livré dans un bundle d'app peut en être extrait.

Checklist de debug

Vérifiez que la WebView charge la bonne adresse, avec embedded=1 et la langue attendue.
Journalisez l'adresse construite — un paramètre mal encodé est la cause la plus fréquente du « ça ouvre la mauvaise campagne ».
Testez caméra et localisation sur un vrai appareil, pas un simulateur.
Testez le clavier sur chaque champ de formulaire.
Passez l'app en arrière-plan en cours d'expérience puis revenez.

Pour aller plus loin

Intégration application mobileExigences WebViewÀ confirmer d'abord.Intégration application mobileURLs d'expérience pour une appConstruire l'adresse chargée par cet écran.Intégration application mobileChecklist intégration mobileLa passe avant de soumettre une version.