La aplicación Cordova no se muestra correctamente en iPhone X (Simulator)

Probé mi aplicación Cordova ayer en el iPhone X Simulator en Xcode 9.0 (9A235) y no se veía bien. En primer lugar, en lugar de llenar el área de la pantalla completa, había un área negra arriba y debajo del contenido de la aplicación. Y lo que es peor, entre el contenido de la aplicación y el negro había dos barras blancas.

Agregando cordova-plugin-wkwebview-engine para que Cordova visualice usando WKWebView (no UIWebView) corrige las barras blancas. Por mi aplicación no se migra desde UIWebView a WKWebView debido a problemas de performance y pérdida de memory cuando se utiliza cordova-plugin-wkwebview-engine que se producen cuando se cargan imágenes descargadas del contenido alojado de Inapp Purchase en un canvas HTML5 ( file:// directo file:// access by the Webview no es posible debido a las restricciones de security en WKWebView, por lo que los datos de la image deben cargarse mediante cordova-plugin-file ).

Estas capturas de pantalla muestran una aplicación de testing con un background azul en el <body >. Por encima y debajo de UIWebView, puede ver las barras blancas, pero no con WKWebView:

Ambos Cordova Webviews muestran las áreas negras en comparación con una aplicación nativa que llena el área de pantalla completa:

Encontré la solución a las barras blancas aquí :

Establezca viewport-fit=cover en la label <meta> la window <meta> , es decir:

 <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover"> 

Las barras blancas en UIWebView luego desaparecen:

La solución para eliminar las áreas negras (proporcionada por @dpogue en un comentario a continuación) es utilizar imágenes de LaunchStoryboard con cordova-plugin-splashscreen para replace las imágenes de lanzamiento henetworkingadas, utilizadas por Cordova por defecto. Para hacerlo, agregue lo siguiente a la plataforma iOS en config.xml :

 <platform name="ios"> <splash src="res/screen/ios/Default@2x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@2x~iphone~comany.png" /> <splash src="res/screen/ios/Default@2x~iphone~comcom.png" /> <splash src="res/screen/ios/Default@3x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@3x~iphone~anycom.png" /> <splash src="res/screen/ios/Default@3x~iphone~comany.png" /> <splash src="res/screen/ios/Default@2x~ipad~anyany.png" /> <splash src="res/screen/ios/Default@2x~ipad~comany.png" /> <!-- more iOS config... --> </platform> 

Luego cree las imágenes con las siguientes dimensiones en res/screen/ios (elimine las existentes):

 Default@2x~iphone~anyany.png - 1334x1334 Default@2x~iphone~comany.png - 750x1334 Default@2x~iphone~comcom.png - 1334x750 Default@3x~iphone~anyany.png - 2208x2208 Default@3x~iphone~anycom.png - 2208x1242 Default@3x~iphone~comany.png - 1242x2208 Default@2x~ipad~anyany.png - 2732x2732 Default@2x~ipad~comany.png - 1278x2732 

Una vez que se eliminan las barras negras, hay otra cosa que es diferente respecto al iPhone X para abordar: La barra de estado es más grande que 20 píxeles debido a la "notch", lo que significa que cualquier contenido en la parte superior de su aplicación Cordova será oscurecido por él :

En lugar de codificar un relleno en píxeles, puede manejar esto automáticamente en CSS usando las constantes new safe-area-inset-* en iOS 11:

 body{ padding-top: constant(safe-area-inset-top); } 

El resultado es el deseado: el contenido de la aplicación cubre la pantalla completa, pero la "notch" no lo oscurece:

He creado un proyecto de testing de Cordova que ilustra los pasos anteriores: webview-test.zip

Notas:

Botones de pie de página

  • Si su aplicación tiene botones de pie de página (como lo hace la mía), también deberá aplicar safe-area-inset-bottom para evitar que se superpongan con el button Inicio virtual en iPhone X.
  • En mi caso, no pude aplicar esto a <body> ya que el pie de página está absolutamente posicionado, así que necesitaba aplicarlo directamente al pie de página:

 .toolbar-footer{ margin-bottom: constant(safe-area-inset-bottom); } 

cordova-plugin-statusbar

  • Para aquellos que usan cordova-plugin-statusbar , necesitará una versión modificada / actualizada para aplicar a inserciones de área segura
  • Mike Hartington ha creado esta request de extracción que aplica los cambios necesarios.

orientación del dispositivo

  • Cuando se usa UIWebView, girar desde portrait> landscape> portrait hace que la safe-area-inset no se vuelva a aplicar, haciendo que el contenido sea oscurecido por la muesca nuevamente (como resaltado por jms en un comentario a continuación).
  • También sucede si la aplicación se inicia en el paisaje y luego se gira a retrato
  • Esto no ocurre cuando se utiliza WKWebView a través de cordova-plugin-wkwebview-engine .
  • Informe de radar: http://www.openradar.me/radar?id=5035192880201728

Para reference, este es el problema original de Cordova que abrí, que captura esto: https://issues.apache.org/jira/browse/CB-13273

¿Alguien más obtiene la altura incorrecta del documento en el simulador de iPhone X cuando onDeviceReady dispara usando WKWebView a través de cordova-plugin-wkwebview-engine y usando viewport-fit = cover?

Además, si giro el dispositivo en horizontal y luego en vertical, la altura del documento cambia y es correcta.

También me di count de que si hice la label html al 100% de altura, no utilizará la altura completa en el inicio, pero después de girar al paisaje y luego al retrato. Esto incluso sucede con el proyecto webview-test.zip en esta respuesta.

Para reproducir, agregue una alerta en onDeviceReady para la altura y un oyente para cambiar el tamaño:

 alert(document.documentElement.clientHeight); window.addEventListener('resize', function() { alert(document.documentElement.clientHeight); }, false); 

Las capturas de pantalla a continuación son del elemento HTML resaltado con Safari Web Inspector del simulador. Observe en la primera captura de pantalla que el azul oscuro no es de altura completa. La segunda captura de pantalla es después de rotar a paisaje y volver a retrato: note que el azul más oscuro ahora es de altura completa.

Pantalla una label HTML onDeviceReady 100% de altura

Pantalla dos después de la label HTML de rotation 100% de altura

Si elimino cordova-plugin-wkwebview-engine y uso cordova-plugin-ionic-webview, el elemento html y la altura de la window parecen estar bien incluso en DeviceReady.