iphone - como - pwa ipad
iPhone WebApps, ¿hay alguna manera de detectar cómo se cargó? Pantalla de inicio vs Safari? (8)
Cómo hacerlo con PHP y filtrar falsos positivos
Creo que la respuesta de @strat está en la dirección correcta, si quieres usar PHP. Excepto que no funcionará a menos que se establezca la meta compatible con la aplicación móvil. De lo contrario, el iPhone colocará en su hogar un marcador de apertura de safari móvil. Además, devolvió falsos positivos, por ejemplo, al acceder a la página desde cualquier otro navegador en iPhone, como el navegador de Facebook.
Afortunadamente, la cadena de agente de usuario independiente tiene una particularidad: solo tiene 3 barras inclinadas. Probé varios otros navegadores y todos tienen más de 3. Es hackish, pero podemos usar esto a nuestro favor. Además, es interesante observar que una vista web estándar en una aplicación tendrá 2 barras diagonales.
Este es el ejemplo mínimo de trabajo:
<?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>
Tengo una aplicación web para iPhone, y estoy interesado en detectar si la aplicación se cargó desde:
- iPhone Safari
- Aplicación web instalada de iPhone (a través de la función de agregar a la pantalla de inicio) que se carga sin las barras de safari.
¿Algunas ideas?
Compruebe los encabezados HTTP al acceder al sitio desde iPhone Safari y la aplicación web para ver si son diferentes.
No sé si lo son, pero si lo están, estoy seguro de que podrán implementarlo en algún lugar de su sitio web.
Esto es lo que uso, funciona genial:
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'';
};
No estoy seguro de qué tan atrás este comportamiento ocurra, pero iOS presentará diferentes cadenas de UserAgent para el servidor que pueden usarse para detectar si la página está siendo solicitada por una aplicación web o un navegador Safari.
Navegador Safari
Mozilla / 5.0 (iPhone; CPU iPhone OS 8_1_1 como Mac OS X) AppleWebKit / 600.1.4 (KHTML, como Gecko) Versión / 8.0 Móvil / 12B436 Safari / 600.1.4
Botón de la pantalla de inicio / Aplicación web
Mozilla / 5.0 (iPhone; CPU iPhone OS 8_1_1 como Mac OS X) AppleWebKit / 600.1.4 (KHTML, como Gecko) Móvil / 12B436
Tenga en cuenta que no incluye ''Safari'' en el UserAgent. Confirmé que este comportamiento se remonta, al menos, a iOS 7, pero me lo imagino aún más.
De modo que puede probar la presencia de iPhone o iPad en la cadena UserAgent y la falta de Safari para detectar que se ha abierto desde la pantalla de inicio.
Prefiero este one-liner para determinar si es pantalla completa / en una aplicación web o no.
var webApp = (typeof window.navigator.standalone != ''undefined'' && window.navigator.standalone ? true : false);
Puede detectar el modo a través de Javascript como se describe arriba, o puede usar PHP y el agente de usuario.
<?
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.'');
}
?>
¡Disfrutar!
Puede determinar si una página web se muestra en modo de pantalla completa usando la propiedad window.navigator.standalone de solo lectura y booleana de JavaScript. https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
if (window.navigator.standalone) {
// fullscreen mode
}
Se puede simplificar a var webApp = window.navigator.standalone || false; var webApp = window.navigator.standalone || false;
Se puede simplificar de nuevo a var webApp = window.navigator.standalone;