Vue page WebView
Au cours précédent, nous avons vu où se trouve l’interface utilisateur de notre page. Nous allons continuer l’apprentissage aujourd’hui.
Comprendre la vue web native unique (WebView)
Toutes les applications mobiles développées avec NativePHP utilisent une unique vue web native (WebView) comme support principal. La vue web vous permet de concevoir l’interface de l’application avec n’importe quelle technologie frontale web que vous maîtrisez. Puisqu’il s’agit essentiellement d’une page web, le navigateur intégré se charge de l’affichage.
Par défaut, la WebView occupe toute la zone visible de l’écran ; cependant, lorsque vous activez des fonctions comme l’appareil photo, l’écran de prise de vue recouvre temporairement la WebView.
Fondement de NativePHP : Backend PHP + développement hybride avec n’importe quelle pile frontale (Vue, jQuery, Tailwind, etc.)
La WebView s’affiche toujours au premier plan ; seuls les écrans plein écran comme l’appareil photo ou le navigateur intégré la masquent. Toute l’interface UI visible par l’utilisateur est gérée par la WebView.
Architecture bas niveau de NativePHP Mobile : conteneur WebView unique, sans couches de pages natives multiples. Autrement dit, NativePHP ne dispose que d’une seule page ; toutes les navigations et retours s’exécutent au sein de cette même WebView.
Une application mobile NativePHP ne contient toujours qu’un seul contrôle WebView natif. L’affichage de toutes les pages de l’app est contenu dans ce seul conteneur web :
- Les changements de page, routage, retour page précédente, popups, sous-pages et basculement SPA ne créent jamais de seconde WebView. Ce mécanisme vise à réduire la consommation de mémoire.
- Il n’existe pas de pile de pages natives Android/iOS, ni de hiérarchie Activity/ViewController ;
- Les « plusieurs pages » que l’on voit ne sont que des basculements de DOM dans la même WebView via le routage frontal (Laravel / Livewire / Vue Router…), identique au fonctionnement des SPA web classiques.
1 Configuration Viewport (étiquette meta pour l’adaptation écran)
Tous ceux qui ont développé des sites mobiles connaissent ce paramètre.
Comme un navigateur classique, la WebView utilise le concept de Viewport (zone d’affichage), contrôlé par une balise meta, avec une syntaxe identique aux pages web traditionnelles.
<meta name="viewport" content="width=device-width, initial-scale=1">Langage du code : HTML, XML (xml)Ajoutez cette balise meta dans votre fichier HTML ou Blade PHP. Aujourd’hui, presque tous les sites web l’intègrent pour s’adapter aux navigateurs mobiles. Sans cela, le rendu se base sur les écrans PC : les polices paraissent fines et la mise en page est déformée, car les téléphones ont une densité de pixels (DPI) élevée.
Vous pouvez tester sur n’importe quel site, par exemple la documentation officielle NativePHP : Web View – NativePHP mobile v3 – NativePHP. Faites un clic droit sur la page et affichez le code source pour voir la balise.
Cette configuration comporte deux attributs principaux :
width=device-width : La largeur de la page correspond à la largeur physique de l’écran de l’appareil
initial-scale=1 : Échelle initiale de rendu 1:1, sans zoom automatique
2 Désactiver le zoom à deux doigts (simuler l’expérience app native)
Les applications natives Android ou iOS ne permettent pas de zoomer/dézoomer avec deux doigts, contrairement aux navigateurs mobiles. Pour que votre interface NativePHP ressemble à une app native, il faut désactiver ce geste de zoom.
Lors du développement mobile, on veut contrôler précisément l’affichage ; interdire le zoom manuel permet d’obtenir le même comportement qu’une application purement native.
Ajoutez l’attribut suivant à votre balise viewport :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Langage du code : HTML, XML (xml)user-scalable=no : Désactive le geste de zoom manuel
3 Affichage plein bord Edge-to-Edge (prérequis pour encoches et écrans courbes)
Pour maximiser la liberté de conception UI, la WebView remplit tout l’écran par défaut. Grâce à HTML/CSS/JS, vous pouvez positionner des contenus n’importe où en premier plan.
Cependant, toute la surface de l’écran n’est pas exploitable. La plupart des appareils possèdent une encoche pour caméra avant, des coins arrondis, des écrans courbes ou l’île dynamique sur iPhone. Ces zones font partie du viewport mais masquent le contenu et ne sont pas cliquables.
Pour gérer les écrans à formes spéciales, ajoutez viewport-fit=cover dans la balise meta viewport et associez-le aux marges de sécurité (Safe Area Insets).
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">Langage du code : HTML, XML (xml)viewport-fit=cover : Autorise le rendu de la page jusqu’aux bords extrêmes de l’écran (y compris encoches et coins arrondis). Ce paramètre seul ne suffit pas, car le contenu sera masqué par l’encoche ; il faut obligatoirement l’associer aux styles CSS des zones de sécurité, voir ci-dessous.
Zones de sécurité Safe Areas
Les zones de sécurité correspondent aux zones visibles non masquées de l’écran : elles ne sont pas recouvertes par les composants matériels (coins arrondis, encoche caméra, île dynamique) ni par les interfaces système permanentes (barre de gestes du bas, barre d’état).
L’appareil calcule automatiquement les limites des zones de sécurité, qui s’adaptent dynamiquement lors du basculement portrait/paysage. NativePHP propose des variables CSS natives pour réaliser une mise en page adaptée à tous les appareils.
<!-- Appliquer la contrainte globale de zone de sécurité sur le body -->
<body class="nativephp-safe-area">
<!-- Barre de navigation haute avec marges gauche/droite pour les coins arrondis -->
<div class="fixed top-0 left-0 w-full bg-red-500 pl-[var(--inset-left)] pr-[var(--inset-right)]">
Barre de navigation haute
</div>
</body>Langage du code : HTML, XML (xml)--inset-top: Marge de sécurité supérieure (hauteur barre d’état / encoche)--inset-bottom: Marge de sécurité inférieure (hauteur barre de gestes)--inset-left: Marge de sécurité gauche pour écrans courbes / coins arrondis--inset-right: Marge de sécurité droite pour écrans courbes / coins arrondis
Ces variables CSS sont intégrées nativement à NativePHP Mobile et injectées automatiquement par le framework ; nul besoin d’importer des bibliothèques CSS externes.
Classe CSS globale rapide : nativephp-safe-area
Ajoutez simplement cette classe sur votre conteneur HTML principal : elle contraint automatiquement tout le contenu dans les zones de sécurité et simplifie le développement, voir l’exemple ci-dessus.
Nous allons comparer un rendu sans adaptation des zones de sécurité avec l’exemple officiel pour comprendre le principe, puis tester sur appareil réel par la suite. Voici un exemple sans configuration de zone de sécurité :
<div class="fixed top-0 left-0 w-full bg-red-500">
...
</div>Langage du code : HTML, XML (xml)
Sur l’image, on voit que la barre de titre haute est recouverte directement par l’encoche de la caméra avant.
En mode paysage, le rendu est encore plus mauvais, voir l’image ci-dessous :
En paysage, de grandes zones vides apparaissent à gauche et à droite, la barre haute ne remplit pas tout l’écran, le rendu est peu esthétique.
Avec la configuration des zones de sécurité, ajoutez la classe native sur la balise body :
<body class="nativephp-safe-area">
<div class="fixed top-0 left-0 w-full bg-red-500 pl-[var(--inset-left)] pr-[var(--inset-right)]">
...
</div>Langage du code : HTML, XML (xml)
L’interface remplit parfaitement l’écran, le rendu est immédiatement plus propre.
Modifier le code
Nous allons modifier le fichier d’exemple vu au cours précédent : welcome.blade.php
Remplacez le contenu de la balise body par ce qui suit. Nous utilisons Tailwind, une bibliothèque d’interface frontale similaire à Bootstrap.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Mimi') }} - Built with NativePHP ： welcome to foxdevelop.com</title>
</head>
<body>
<div class="fixed top-0 left-0 w-full bg-red-500">
Barre de navigation haute
</div>
</body>
</html>
Langage du code : HTML, XML (xml)Enregistrez le fichier, ouvrez une invite de commande dans le dossier du projet et exécutez la commande suivante :
php artisan native:jumpLangage du code : CSS (css)D:\phpproject\my-app>php artisan native:jumpLangage du code : CSS (css)
Adresse de prévisualisation : http://127.0.0.1:8000
La prévisualisation sur navigateur PC ne permet pas de voir l’adaptation mobile ; il faut tester sur appareil réel.
Débogage sur appareil réel
La procédure est identique au développement d’applications Android : munissez-vous d’un téléphone Android, connectez-le à l’ordinateur par câble USB et activez le mode développeur sur le téléphone (vous trouverez la méthode facilement sur internet). Installez également l’outil ADB, fourni par Google pour contrôler le téléphone depuis l’ordinateur ; il est inclus avec Android Studio.
Installez complètement Android Studio avec Android SDK et SDK Platform Tools (incluant ADB).
Vérifiez l’installation d’ADB :
Ouvrez le terminal et entrez la commande : adb devices
D:\phpproject\my-app>adb devices
List of devices attached
a34354354354352 deviceLangage du code : PHP (php)Cet exemple signifie qu’un téléphone est bien connecté.
Accédez au dossier du projet dans CMD et exécutez cette commande pour compiler et installer l’app Android : php artisan native:run android
D:\phpproject\my-app>php artisan native:run android
Running NativePHP for Android
Build log: D:\phpproject\my-app\nativephp\android-build.log
Updating Android configuration ....................................................................... 903.01ms DONE
Copying Laravel source .................................................................................... 18s DONE
Installing Composer dependenciesLangage du code : PowerShell (powershell)La compilation installe automatiquement de nombreuses dépendances comme Kotlin et Gradle ; assurez-vous d’avoir une connexion internet stable.
Si vous utilisez un proxy réseau, modifiez le fichier de configuration à ce chemin : D:\phpproject\my-app\nativephp\android\gradle\wrapper\gradle-wrapper.properties
Remplacez l’adresse de téléchargement Gradle par un miroir national comme ci-dessous :
#Mon Feb 10 07:33:27 EST 2025
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
#distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
distributionUrl=https\://mirrors.aliyun.com/maven/gradle/gradle-8.13-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
Langage du code : Propriétés (properties)