He notado un comportamiento realmente extraño de mi PWA. Puedo iniciarlo en modo "independiente" en Windows, pero cuando intento hacer lo mismo en mi dispositivo Android, se ignora el valor "independiente" y abre la URL en Chrome (Android 7.0, Chrome-Android v62.x) . Tampoco funciona en Chrome-Android Beta v63.x (en relación con esta publicación que se refiere a un error en Chrome 62.x). Revisé el archivo de manifiesto con Manifest Validator y Lighthouse. Ambas herramientas validaron el archivo y no me muestran ningún error / problema. El cuadro de diálogo "Agregar a la pantalla de inicio" se muestra directamente (en cada primer lanzamiento) y puedo agregar la PWA a mi pantalla de inicio. El service-worker funciona como se esperaba y no tengo ningún problema para ejecutar la aplicación sin conexión (en Windows y Android).

Estoy probando en mi dispositivo Android con un proxy en mi portátil (por si acaso esto pudiera ser relevante). También probé diferentes dispositivos Android, pero ocurre el mismo problema.

Nota: diferentes PWA funcionan como se espera, p. Ej. 2048 como PWA

Aquí está mi manifest.json:

{
  "icons": [
    {
      "src": "assets/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image\/png"
    }
  ],
  "short_name": "My short name",
  "name": "My not sooooo short name",
  "theme_color": "#337ab7",
  "start_url": "/index.html",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait"
}

El archivo de manifiesto está vinculado en el encabezado de mi index.html con un dispositivo móvil adicional:

<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#337ab7">
<link rel="manifest" href="manifest.json">

La aplicación web está construida con angular2 (angular-seeds), en caso de que alguien enfrente problemas similares.

¡Gracias por tu tiempo y comentarios!

ACTUALIZACIÓN 1:

Cuando no estoy usando un proxy para acceder a mi PWA desde mi dispositivo móvil y en su lugar accedo a él a través de un puerto abierto desde mi red local, la función independiente funciona bien (pero el registro del trabajador del servicio falla ...). Todavía no estoy seguro de por qué ocurre este "error" con un proxy.

ACTUALIZACION 2:

Mi verdadera pregunta es, ¿por qué sucede esto? Y la otra es, ¿cómo puedo probar realmente el comportamiento y la sensación de mi PWA en un dispositivo móvil real si todas las soluciones que encontré tienen compromisos? Respecto al entorno de desarrollo.

Mis formas de probar en un dispositivo Android:

  • abra un puerto de mi computadora portátil y acceda al interior de mi red local a través de la dirección IP de mi computadora portátil (el trabajador de servicio no está funcionando porque no es https ni localhost, pero pwa comienza en modo independiente -.-)
  • configurar un proxy en el dispositivo Android para la ip de mi computadora portátil (el trabajador de servicio funciona, el modo independiente falla)
5
goemic 13 nov. 2017 a las 17:44

2 respuestas

La mejor respuesta

Encontré una solución para probar mi PWA en cualquier dispositivo móvil sin ninguno de los compromisos enumerados. Ahora estoy usando ngrok que me permite crear un túnel a mi localhost para que sea accesible a través de https desde cualquier lugar. De ese modo, puedo probar en cualquier teléfono inteligente, tableta o emulador. ngrok se puede descargar aquí y es muy fácil de configurar. Con un solo comando puede crear el túnel a un puerto específico (por ejemplo, 8080):

ngrok http 8080

Sin embargo, todavía no estoy seguro de por qué la opción de pantalla completa no funcionó al configurar un proxy en mi dispositivo Android.

5
goemic 4 dic. 2017 a las 11:49
{
  "name": "name",
  "short_name": "name",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "images/icons/icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "./index.html",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2",
  "display": "standalone"
}
-2
ChrisF 15 nov. 2017 a las 09:07