iPhone WebApps, y a-t-il un moyen de détecter comment il a été chargé? Écran d'accueil vs Safari?
j'ai une application web iPhone, et je suis intéressé à détecter si l'application a été chargée soit à partir de:
- iPhone Safari
- iPhone installé application web (via le add à mon écran d'accueil) qui se charge sans les barres safari.
des idées?
8 réponses
vous pouvez déterminer si une page web est affichée en mode plein écran en utilisant la fenêtre.Navigator.propriété JavaScript booléenne autonome en lecture seule. https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
if (window.navigator.standalone) {
// fullscreen mode
}
vous pouvez détecter le mode par Javascript comme décrit ci - dessus-ou vous pouvez utiliser PHP et l'agent utilisateur.
<?
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"iphone")) {
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"safari")) {
echo('Running in browser on iPhone');
}else{
echo('Running as stand alone WebApp on iPhone');
}
}else{
echo('Running on device other than iPhone.');
}
?>
Profitez-en!
C'est ce que j'utilise, fonctionne bien:
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
alert("Yes iPhone! Yes Full Screen!");
} else {
alert("Not Full Screen!");
};} else {
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
};
Comment faire avec PHP et filtrer les faux positifs
je pense que la réponse de @strat est dans la bonne direction, si vous voulez utiliser PHP. Sauf que ça ne marchera pas à moins que le meta capable de l'application mobile ne soit défini. Sinon, l'iPhone placera à la maison un signet ouvrant safari mobile. En outre, il est retourné faux positifs, par exemple lors de l'accès à la page à partir de tout autre navigateur sur iPhone, comme le navigateur Facebook.
heureusement, le standalone user agent string a une particularité: il n'y a que 3 slashes. J'ai testé divers autres navigateurs et ils ont tous plus de 3. C'est hackish, mais on peut utiliser ça à notre avantage. En outre, il est intéressant de noter qu'un webview standard dans une application aura 2 slashes.
donc c'est l'exemple de travail minimum:
<?php
// We need to add the mobile web app capable meta. Status bar is set to black to avoid our text go under the status bar.
?>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<?php
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if ( strpos($ua,"iphone") || strpos($ua,"ipad") ) {
if ( strpos($ua,"safari") ) {
echo('Running in safari on iPhone/iPad');
} else if ( substr_count($ua, '/') === 3 ) {
echo('Running as stand alone WebApp on iPhone/iPad');
} else if ( substr_count($ua, '/') === 2 ) {
echo('Running in a WebView on a iPhone/iPad app');
} else {
echo('Running in another browser on iPhone/iPad');
}
} else {
echo('Running on device other than iPhone/iPad.');
}
?>
</body>
</html>
Je ne sais pas si ce comportement remonte loin, mais iOS présentera différentes chaînes UserAgent au serveur qui peut être utilisé pour détecter si la page est demandée par un navigateur webapp ou safari.
Navigateur Safari
Mozilla / 5.0 (iPhone; CPU iPhone OS 8_1_1 comme Mac OS X) AppleWebKit/600.1.4 (KHTML, comme Gecko) Version / 8.0 Mobile / 12B436 Safari / 600.1.4
Écran D'Accueil Bouton / Application Web
Mozilla / 5.0 (iPhone; CPU iPhone OS 8_1_1 comme Mac OS X) AppleWebKit/600.1.4 (KHTML, comme Gecko) Mobile /12B436
Avis il ne comprend pas "Safari" dans le UserAgent. J'ai confirmé que ce comportement remonte au moins à iOS 7, mais j'imagine que c'est encore plus loin.
de sorte que vous pouvez tester la présence de iPhone ou iPad dans la chaîne UserAgent et l'absence de Safari pour détecter qu'il a été ouvert à partir de l'écran d'Accueil.
je préfère cette doublure pour déterminer si c'est fullscreen/dans une application web ou non.
var webApp = (typeof window.navigator.standalone != 'undefined' && window.navigator.standalone ? true : false);
vérifiez les en-têtes HTTP lors de l'accès au site depuis iPhone Safari et la WebApp pour voir s'ils sont différents.
Je ne sais pas s'ils le sont, mais s'ils le sont, je suis sûr que vous serez en mesure de le mettre en œuvre quelque part dans votre site web.
Peut être simplifié à
var webApp = window.navigator.standalone || false;
peut être simplifié à nouveau à
var webApp = window.navigator.standalone;