pwa - android chrome add to home screen full screen

El botón "Agregar a la pantalla de inicio" en Android no muestra el sitio web como una aplicación web

Question

He creado un sitio web compatible con dispositivos móviles con jQuery Mobile y agregué algo de metainformación para que se incluya en las pantallas de inicio de iOS y Android y se lance como una aplicación web (en otras palabras: en un navegador, pero sin navegación por el navegador elementos).

Funciona bien para iOS, pero no funciona para Android 4.4.2.

Seguí this tutorial para crear aplicaciones web compatibles con Android:

A pesar de agregar toda la información meta como se indica en el tutorial, Android muestra el botón "Agregar a la pantalla de inicio" de mi sitio web, pero no inicia el sitio web sin los elementos de navegación del navegador como se describe en el tutorial.

¿Qué estoy haciendo mal?

Answer 1

La guide indica que a partir de Chrome 68 se espera que el desarrollador de la aplicación agregue un botón a su aplicación. Y que solo debería funcionar si se cumplen los criteria PWA. Luego, debe poder usar el siguiente código para obtener una devolución de llamada a su aplicación, donde puede mostrar un botón al usuario para iniciar el aviso Add to home screen .

Por la guía, agregue este oyente.

let deferredPrompt;

window.addEventListener(''beforeinstallprompt'', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = ''block'';
});

Luego .... el usuario debe hacer clic en el botón, después de lo cual puede ejecutar este código.

btnAdd.addEventListener(''click'', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = ''none'';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === ''accepted'') {
        console.log(''User accepted the A2HS prompt'');
      } else {
        console.log(''User dismissed the A2HS prompt'');
      }
      deferredPrompt = null;
    });
});

Lo convertí en un componente de reacción con bastante facilidad, el código siguiente se ha reducido de mi proyecto de Redux, por lo que no funcionará copiar / pegar, pero debería dar una idea general.

import React, { Component } from ''react''
import Button from ''@material-ui/core/Button''

class AddToHomeScreen extends Component {
  constructor (props) {
    super(props)
    this.deferredPrompt = null
    this.state = {
      show: false
    }
  }

  componentDidMount () {
    var component = this
    window.addEventListener(''beforeinstallprompt'', e => {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault()
      // Stash the event so it can be triggered later.
      component.deferredPrompt = e
      // Show button
      console.log(''beforeinstallprompt triggered... show add button'')
      component.setState({ show: true })
    })
  }

  // bind to this
  handleAddClick () {
    if (this.deferredPrompt) {
      this.setState({ show: false })
      // Show the prompt
      this.deferredPrompt.prompt()
      // Wait for the user to respond to the prompt
      this.deferredPrompt.userChoice.then(choiceResult => {
        if (choiceResult.outcome === ''accepted'') {
          console.log(''User accepted the A2HS prompt'')
        } else {
          console.log(''User dismissed the A2HS prompt'')
        }
        this.deferredPrompt = null
      })
    } else {
      console.log(''Invalid prompt object'')
    }
  }

  render () {
    const { show } = this.state
    if (!show) return null

    return (
      <div className={classes.root}>
        <Button variant="contained" onClick={this.handleAddClick.bind(this)}>
          Add to home screen
        </Button>
      </div>
    )
  }
}

export default AddToHomeScreen

Referencias: guide

Answer 2

Como puedes ver here esta función aún está etiquetada como Beta . Supongo que necesitarás probar esta función con la última versión de Chrome. Del artículo:

Apoyo a agregar a las aplicaciones de pantalla de inicio

Chrome buscará la siguiente etiqueta meta en el elemento de la página web:

<meta name="mobile-web-app-capable" content="yes">

El atributo de nombre DEBE ser "compatible con la aplicación web móvil" y el atributo de contenido debe ser "sí" (mayúsculas y minúsculas). Si hay algún otro valor en el atributo de contenido, la aplicación web se agregará como un marcador regular.

Icono

El icono que se utiliza para instalar en la pantalla de inicio se determina utilizando el icono más grande que se encuentra en una de las siguientes etiquetas <link> :

<link rel="shortcut icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

Precaución : Se recomienda el formato de imagen de 192px. Los dos últimos formatos (apple-touch- *) están en desuso y solo se admitirán por un corto tiempo.

Etiqueta de icono

El elemento <title> la aplicación sirve como etiqueta predeterminada para el icono en la pantalla de inicio.

Configuración

El siguiente ejemplo es la configuración mínima requerida para admitir una experiencia de lanzamiento de pantalla de inicio.

<!doctype html>
<html>
   <head>
     <title>Awesome app</title>
     <meta name="viewport" content="width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" sizes="192x192" href="/icon.png">
   </head>
   <body></body>
</html>

Comparación con iOS Safari Añadir a la pantalla de inicio

Chrome también permitirá que las aplicaciones web se inicien en "Modo de aplicación" si incrustan una metaetiqueta con el nombre "Apple-mobile-web-capacitado para aplicaciones web". Chrome dejará de admitir este uso en una próxima versión. Actualmente, Chrome muestra una advertencia de desaprobación en el registro de la consola de las Herramientas del desarrollador cuando detecta una página con solo la etiqueta meta "apple-mobile-web-capaz-app". La advertencia aparece de la siguiente manera:

Aunque Chrome acepta temporalmente el uso de "apple-mobile-web-app-capable" , Chrome no ofrece compatibilidad con las API de Safari de iOS que incluyen:

window.navigator.standalone
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="/startup.png">

Espero que ayude.