Extension:MobileFrontend/Configurer la détection automatique du navigateur

This page is a translated version of the page Extension:MobileFrontend/Configuring browser auto-detection and the translation is 100% complete.

Ce document explique comment les administrateurs de sites peuvent activer un site pour mobiles pour leur extension Mediawiki, de sorte à ce que les utilisateurs qui utilisent des appareils mobiles pour se connecter au site soient directement redirigés sur l'affichage pour mobiles plutôt que sur l'affichage pour bureau.

Autodetection embarquée

Depuis la validation 5a1867e, MobileFrontend prend en charge la détection automatique des appareils pour une configuration minimale. Tout ce que vous avez à faire est d'initialiser $wgMFAutodetectMobileView = true; dans votre fichier LocalSettings.php. Bien que ce soit la manière la plus facile, ce ne sera certes pas la plus performante. Cette solution N'EST PAS compatible avec la mise en cache côté client, car elle n'apporte pas de solution pour que votre cache puisse savoir la différence entre l'affichage pour mobile et l'affichage pour bureau.

Filtre AMF pour mobiles (Apache Mobile Filter)

Avec la validation 0fb2c72d, MobileFrontend prend en charge le filtrage Apache des mobiles (AMF) pour la détection des appareils. Vous devez utiliser un serveur web Apache. Suivez les instructions pour installer/configurer AMF, et cela devrait suffire. Cette fonction est très similaire à la détection automatique déjà implémentée, et ne sera pas compatible avec la mise en cache côté client sans une configuration spéciale.

Détection des appareils serveur web et cache de serveur mandataire

Certains serveurs mandataires inversés (tels que Varnish ) peuvent informer MediaWiki s'il doit utiliser la version mobile ou pas, en créant ainsi une détection automatique conviviale par un cache.

Pour Varnish 4.0+ , remplacer le mot clé remove par unset.

Détection utilisant Varnish: site mobile sur un autre domaine

Supposez que nous utilisions Varnish, et que nous voulons que wiki.example.com s'affiche en version bureau, et que m.wiki.example.com soit en version mobile. Voici comment faire cela.

sub vcl_recv {
	remove req.http.x-subdomain; # Le demandeur ne doit pas être autorisé à soumettre d'entête X-Subdomain arbitraire
	if (req.http.host == "m.wiki.example.com") { # domaine mobile
		set req.http.host = "wiki.example.com"; # domaine bureau
		set req.http.x-subdomain = "m";
	}
}
sub vcl_hash {
	# Mettre en cache séparément la version pour mobile.
	#
	# NOTE: l'entête x-subdomain (lorsqu'elle est présente) ne doit avoir qu'une seule valeur, c'est pourquoi vcl_recv() doit supprimer l'entête X-Subdomain fournie par l'utilisateur.
	hash_data(req.http.x-subdomain);
}

LocalSettings.php doit contenir ceci :

$wgMFAutodetectMobileView = false;
$wgMobileUrlCallback = fn ( $domain ) => "m.$domain"; // domaine du site pour mobiles
$wgCookieDomain = ".wiki.example.com";

%h<#> correspond à un segment de l'hôte (le hostname) de $wgServer. Donc si $wgServer = 'en.wikipedia.org';, %h0 vaut en, %h1 vaut wikipedia, %h2 vaut org. Partant de cela, le $wgMobileUrlTemplate ci-dessus va automatiquement transformer votre URL mobile en en.m.wikipedia.org. Ceci est particulièrement utile pour la WMF et les projets tels que Wikipedia, qui suivent le modèle <code de langue>.wikipedia.org, donc le domaine mobile ressemblera toujours à <code de langue>.m.wikipedia.org.

Dans cette solution, la détection automatique interne doit être désactivée ($wgMFAutodetectMobileView = false;), afin que MediaWiki ne remette pas en cause les décisions de Varnish.

Détection utilisant Varnish: un même domaine pour les sites bureau et mobile

Supposez que nous utilisions, et nous voulons que wiki.example.com affiche la version bureau et mobile avec la même URL (sans créer de domaines supplémentaires tels que m.wiki.example.com, etc.). Voici comment faire :

sub vcl_recv {
	remove req.http.x-subdomain; # Le demandeur ne doit pas être autorisé à fournir d'entête arbitraire X-Subdomain
	if(req.http.User-Agent ~ "(?i)^(lg-|sie-|nec-|lge-|sgh-|pg-)|(mobi|240x240|240x320|320x320|alcatel|android|audiovox|bada|benq|blackberry|cdm-|compal-|docomo|ericsson|hiptop|htc[-_]|huawei|ipod|kddi-|kindle|meego|midp|mitsu|mmp\/|mot-|motor|ngm_|nintendo|opera.m|palm|panasonic|philips|phone|playstation|portalmmm|sagem-|samsung|sanyo|sec-|sendo|sharp|softbank|symbian|teleca|up.browser|webos)") {
		set req.http.x-subdomain = "m";
	}

	if(req.http.Cookie ~ "mf_useformat=") {
		# Cela signifie que l'utilisateur a cliqué sur le lien ''Version mobile'' en bas de la page, permettant de basculer l'affichage.
		# Informer vcl_hash() que ceci doit être mis en cache en tant que page mobile.
		set req.http.x-subdomain = "m";
	}
}
sub vcl_hash {
	# Mettre en cache la version mobile séparément.
	#
	# NOTE: l'entête x-wap (lorsqu'elle est présente) ne doit avoir qu'une valeur, c'est pourquoi vcl_recv() doit supprimer l'entête X-Subdomain fournie par l'utilisateur.
	hash_data(req.http.x-subdomain);
}

LocalSettings.php doit contenir ceci :

$wgMFAutodetectMobileView = true;
$wgCookieDomain = ".wiki.example.com";
Dans cette solution, la detection automatique existante doit être activée (elle n'impactera pas le cache) :
$wgMFAutodetectMobileView = true;

Sinon MobileFrontend se comporte mal (si nous n'initialisons pas $wgMobileUrlCallback, il ignore l'entête X-Subdomain , et si nous le faisons, il ne positionne pas les cookies useformat pour le lien permettant de basculer vers la Version mobile, en bas de la page).

Détection utilisant nginx : site mobile sur un autre domaine

Supposons que nous utilisions nginx, et que nous voulions que wiki.example.com affiche la version pour bureau, et que m.wiki.example.com affiche la version pour mobile. Voici comment faire. Cette configuration imite le comportement des sites de la WMF.

# [...]

server_tokens off;
set_real_ip_from localhost;
real_ip_header X-Forwarded-For;

map $cookie_stopMobileRedirect $mobile_redirect {
	default ?01;
	"" ${http_sec_ch_ua_mobile}1;
}

ssl_certificate /path/to/ssl-certificate.pem;
ssl_certificate_key /path/to/ssl-certificate-key.pem;
ssl_dhparam /path/to/ssl-dhparams.pem;

server {
	listen 443 ssl;
	listen [::]:443 ssl;

	root /var/www/html/example;

	index index.php;

	server_name localhost;

	location ~ ^/w/(index|load|api|thumb|opensearch_desc|rest|img_auth)\.php$ {
		include fastcgi_params;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
		fastcgi_pass unix:/run/php/php8.1-fpm.sock;
	}

	location /w/images {}

	location /w/images/deleted {
		deny all;
	}

	location ~ ^/w/resources/(assets|lib|src) {
		try_files $uri 404;
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location ~ ^/w/(skins|extensions)/.+\.(css|js|gif|jpg|jpeg|png|svg|wasm|ttf|woff|woff2)$ {
		try_files $uri 404;
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location = /w/images/favicon.svg {
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location = /favicon.ico {
		rewrite ^ /w/images/favicon.ico;
	}

	location = /w/images/favicon.ico {
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location /w/sitemap {}

	location = /sitemap.xml {
		rewrite ^ /w/sitemap/sitemap-index-wiki.xml;
	}

	location ~ ^/w/(COPYING|CREDITS)$ {
		default_type text/plain;
	}

	location /w/rest.php/ {
		try_files $uri $uri/ /w/rest.php?$query_string;
	}

	location /wiki/ {
		rewrite ^/wiki/(?<pagename>.*)$ /w/index.php;
	}

	location = / {
		return 301 /wiki/Main_Page;
	}

	location / {
		return 404;
	}

	error_page 404 /w/images/404.html;

	location /w/images/404.html {
		internal;
	}
}

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	server_name wiki.example.com;

	return 301 https://$host$request_uri;

	return 404;
}

server {
	listen 443 default_server ssl;
	listen [::]:443 default_server ssl;

	server_name wiki.example.com;

	location / {
		if ($arg_mobileaction = toggle_view_desktop) {
			add_header Set-Cookie "stopMobileRedirect=true; Domain=.wiki.example.com; Path=/; Max-Age=2592000; HttpOnly; Secure";
			break;
		}

		if ($mobile_redirect != ?01) {
			return 302 https://m.wiki.example.com$request_uri;
		}

		if ($http_host != wiki.example.com) {
			return 301 https://wiki.example.com$request_uri;
		}

		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass https://localhost;
	}
}

server {
	listen 443 ssl;
	listen [::]:443 ssl;

	server_name m.wiki.example.com;

	location / {
		if ($arg_mobileaction = toggle_view_mobile) {
			add_header Set-Cookie "stopMobileRedirect=; Domain=.wiki.example.com; Path=/; Max-Age=0; HttpOnly; Secure";
		}

		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Subdomain m;
		proxy_pass https://localhost;
	}
}

LocalSettings.php doit contenir ceci :

$wgMFAutodetectMobileView = false;
$wgMobileUrlCallback = fn ( $domain ) => "m.$domain";
$wgCookieDomain = ".wiki.example.com";