Progresive Web Apps

Una forma de crear aplicaciones y prototipos es utilizando las Progresive Web Apps (PWA). Esta es una tecnología que permite que las aplicaciones web sean "instaladas" en el smartphone como si fuesen una aplicación nativa. El principal beneficio es que son de rápida creación con las tecnologías web tradicionales y si se utilizan las herramientas adecuadas se puede lograr una experiencia de usuario muy similar a los elementos nativos. No necesitan pasar por el proceso de subir la aplicación al Appstore o Playstore, por lo que también permite mayor flexibilidad en los contenidos permitidos.

Beneficios

  • Permiten mayor rapidez y flexibilidad en contenidos y estructura de la aplicación.

  • Utilizan tecnologías web tradicionales como Javascript, CSS y HTML.

Dificultades

  • No dan acceso a características nativas sin un Wrapper (Jasonelle, Cordova, Capacitor).

  • Pueden ser más inconsistentes y requerir configuraciones especiales para las diferencias entre cada plataforma (Android, iOS).

¿PWA o Nativo?

La respuesta depende de muchos factores, pero la gran mayoría de proyectos puede partir como una aplicación web en formato PWA y luego pasar a nativo. Se recomienda optar por nativo solo si se dispone del suficiente capital humano y expertise, o que la solución requiera de tecnologías solamente disponibles para las aplicaciones nativas.

Framework7

Framework7 es una de las alternativas más populares para crear PWA, ya que a diferencia de Onsen, Ionic, NativeScript o ReactNative que son pensados como una aplicación completa, Framework7 es simplemente una serie de componentes de Javascript, HTML y CSS que permiten elaborar una aplicación web con la experiencia de usuario de una aplicación móvil Android o iOS. Además de que Framework7 tiene distintas plantillas de aplicaciones y componentes ya disponibles para crear una aplicación como base en Theme Forest.

themeforest
Figure 1. Framework7 en ThemeForest

Framework7 cuenta con dos versiones. La primera es la versión completa con todos sus componentes como el "router" y la versión ligera (lite) que solo cuenta con lo básico y los demás componentes como el "router" son proporcionados por otro framework de frontend como React, Vue, Svelte o incluso Phoenix.

En las soluciones PWA pueden ocurrir ciertos problemas de experiencia de usuario o inconsistencias que no ocurrirían en nativo, por lo que siempre estar atento a como se renderiza la página en los distintos dispositivos y tamaños.

En el desarrollo de aplicaciones móviles, contar con el framework adecuado puede marcar la diferencia. Existen muchas otras opciones disponibles que podrían adaptarse mejor a las necesidades del proyecto.

Alternativas

  • KonstaUI: Por los creadores de Framework7, son componentes basados en Tailwind pensados para la navegación móvil.

  • Tabler: Un dashboard hecho en Bootstrap para las aplicaciones administrativas.

Manifest

El archivo manifest.json es el encargado de configurar la PWA, por ejemplo su nombre, íconos, colores, entre otras configuraciones. Para esto se debe seguir un formato específico y tenerlo en la misma ubicación del archivo index.html.

Su extensión oficial es .webmanifest, por lo que podrías nombrar tu manifiesto como app.webmanifest.

Si bien la extensión recomendada es .webmanifest, cualquier nombre de archivo funcionará siempre y cuando se entregue con el tipo de contenido application/manifest+json o con otro tipo de contenido válido para JSON, como text/json. Por lo tanto, muchas PWA, en especial las más antiguas, usan manifest.json.

Existen herramientas para facilitar la creación de un manifest como: https://progressier.com/pwa-manifest-generator

Ejemplo de manifest.json
{
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "icons": [
    {
      "purpose": "maskable",
      "sizes": "512x512",
      "src": "AppIcon.png",
      "type": "image/png"
    },
    {
      "sizes": "512x512",
      "src": "AppIcon_rounded.png",
      "type": "image/png"
    },
    {
      "purpose": "any",
      "src": "AppIcon@2x.png",
      "sizes": "1024x1024",
      "type": "image/png"
    }
  ],
  "orientation": "portrait",
  "display": "standalone",
  "dir": "auto",
  "lang": "es-ES",
  "name": "Mi App",
  "short_name": "Mi App",
  "description": "Descripción",
  "start_url": "https://myweb.example",
  "scope": "https://myweb.example/"
}

Referencias