Convierte tu web en una aplicación móvil


Esta URL ha sido visualizada 197 veces

Para realizar esta prueba
comenzaremos cargando estos tres archivos en nuestro servidor , ya sea en una carpeta o en la raiz.. solo recuerda , que si cargas en la raiz no olvides cambiarle el nombre al archivo index.html y por error dañes la pagina principal de tu sitio web.


El archivo app.json es el principal que modificaremos.. para darle la apariencia a nuestra web app
En el archivo index.html referenciaremos a este archivo para que cuando el usuario navegue en la pagina le de la opcion de instalar la app
El archivo logo.png sera el logotipo que se ocupara para la instalación de la app

dentro del archivo encontraremos el siguiente codigo:

{
  "background_color": "#0578D9",
  "description": "Instalaremos nuestra WEB APP en tu telefono",
  "display": "standalone",
  "orientation": "portrait",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "TLAPA Tecnologics",
  "short_name": "TLAPA Tecnologics",
  "start_url": "index.html"
}


En pocas palabras nos define :
El color de fondo
La descripción
La orientación
El icono de la app
El nombre de la app
y la URL a donde apuntara nuestra web app

y para hacer que este archivo funcione, mandaremos a llamar nuestro archivo json desde la pagina donde queremos que se convierta en una web app, en nuestro casi sera en el archivo index.html ,  colocando la siguiente linea de codigó


De esta manera haremos un llamado a nuestra web app para su instalación
Cuando el usuario visite la pagina en este caso el index.html

le mostrara una opción en la parte de abajo para instalar la APP, como se muestra en la imagen




Puedes descargar el ejemplo de la siguiente url





Comparte este articulo

Deja tus comentarios aqui

Publicar nuevo comentario

Recuerda que debes iniciar sesion para comentar *