Antes de empesar a construir cualquier aplicación que sea realmente escalable en el FRONT-END se debe dejar listos los siguientes pasos:
Settings de PWA:
Que es:
Una Progressive Web App (PWA) es una aplicación web que utiliza tecnologías web modernas para ofrecer una experiencia de usuario similar a la de una aplicación nativa en dispositivos móviles y de escritorio. Las PWAs combinan las mejores características de las aplicaciones web y las aplicaciones nativas, proporcionando una experiencia rápida, confiable y atractiva.
Características de una PWA:
- Responsiva: Se adapta a diferentes tamaños de pantalla y dispositivos, desde móviles hasta desktops.
- Progresiva: Funciona para cualquier usuario, independientemente del navegador que esté utilizando, ya que está construida con una mejora progresiva como principio básico.
- Conectividad Independiente: Puede funcionar sin conexión o con conexiones de red de baja calidad mediante el uso de tecnologías como Service Workers.
- Similar a una App Nativa: Proporciona una experiencia de usuario similar a la de una aplicación nativa, con una interfaz rápida y fluida.
- Actualización Automática: Siempre está actualizada gracias al Service Worker, que gestiona las actualizaciones de manera transparente.
- Segura: Se sirve a través de HTTPS para evitar ataques e intrusiones.
- Reenganchable: Puede enviar notificaciones push y ser añadida a la pantalla de inicio del dispositivo, fomentando el reenganche del usuario.
Secciones de la ventana
- Activar PWA
- App name (Nombre de la app) es el nombre que se mostrara en el dispositivo de usuario
- Icono de la PWA
- Theme Color - Color del tema
- Background Color - Color de fondo
- Display: Como vamos a mostrar la APP y tenemos:
- Full screen: Se utiliza toda el área de visualización disponible y no se muestra ningún cromo de agente de usuario.
- Standalone: La aplicación se verá y funcionará como una aplicación independiente. Esto puede incluir una ventana diferente, su propio ícono en el iniciador de aplicaciones, etc. En este modo, el agente de usuario excluirá los elementos de la interfaz de usuario para controlar la navegación, pero puede incluir otros elementos de la interfaz de usuario, como una barra de estado.
- Minimal-UI: La aplicación se verá y se sentirá como una aplicación independiente, pero tendrá un conjunto mínimo de elementos de interfaz de usuario para controlar la navegación. Los elementos variarán según el navegador.
- Browser: La aplicación se abre en una pestaña del navegador convencional o en una ventana nueva, según el navegador y la plataforma. Este es el valor predeterminado.
App Languages
Que es
Selección del lenguage de la aplicación
<html lang="es">
Imagenes
Si ya tienes claras las imagenes de tu App Web, aqui puedes agregarlas al storage de una vez
Founts
Aqui puedes ingresar el tipo de fuente, ya se de Google o subirla desde tu ordenador
Redirecciones
Esta ventana te permite definir cómo y a dónde redirigir una URL antigua de tu sitio web a una nueva URL, especificando tanto la URL de origen como la URL de destino, junto con el tipo de redirección (permanente o temporal).
Headers
Permite manejar los cabezotes de la aplicación en general
Iframe Embedding (Inserción de Iframe):
- Aquí puedes controlar si tu sitio web puede ser incrustado en un iframe en otros sitios web.
- Opciones:
- Allow: Permitir que tu sitio web sea incrustado en iframes en cualquier sitio web.
- Deny: No permitir que tu sitio web sea incrustado en iframes en ningún sitio web.
- Sameorigin: Permitir que tu sitio web sea incrustado en iframes solo si el sitio que lo está incrustando tiene el mismo origen (mismo dominio).
- Custom Headers (Encabezados personalizados):
- Esta sección te permite agregar encabezados HTTP personalizados a tu proyecto publicado.
Setings
Permite cambiar el TEMA principal y el fondo global de la APP
Typographies
Podemos determinar la tipografia que vamos a usar en TITULOS, Botones, Texto, etc. en la APP
