Compartir a través de

Procedimientos recomendados para PPA

  • Artículo

En este artículo se enumeran los procedimientos recomendados para que la PWA sea una excelente aplicación para los usuarios. Cuando los usuarios instalan aplicaciones, tienen ciertas expectativas de lo que pueden hacer estas aplicaciones, como trabajar sin conexión, integrarse profundamente en el sistema operativo o realizar tareas informáticas no triviales.

Lea los procedimientos recomendados de esta página para aprender a hacer que su PWA parezca lo que esperan los usuarios.

En esta página se supone que ya tiene un PWA. Para obtener más información sobre la creación de una PWA simple, consulte Introducción a las PWA.

Proporcionar una instalación personalizada

La aplicación ya se puede instalar con el botón App available (Aplicación disponible ) en la barra de direcciones del explorador si sigue los pasos descritos en Introducción a las PPA.

Una experiencia de instalación personalizada, en la interfaz de usuario de la aplicación, puede ser más obvia para los usuarios y dar lugar a más instalaciones.

Para crear una experiencia de instalación personalizada, use el evento beforeinstallprompt y proporcione su propio botón de instalación en la aplicación.

Para ver un ejemplo de código del beforeinstallprompt evento, compruebe el código fuente de demostración de PWAmp. Para probar la instalación personalizada, abra la demostración de PWAmp y, a continuación, haga clic en Más herramientas (...) >Acerca de>instalar la aplicación en la aplicación.

Enviar a tiendas de aplicaciones

Muchos usuarios buscarán la aplicación en la tienda de aplicaciones de su dispositivo. La descarga desde una tienda de aplicaciones oficial proporciona una experiencia confiable y familiar para los usuarios.

Puedes publicar tu PWA en la Microsoft Store para Windows, la Tienda de aplicaciones para iOS o play store para Android mediante PWA Builder.

Para obtener información sobre cómo usar PWA Builder y publicar en Microsoft Store, consulte Publicación de una PWA en Microsoft Store.

Crear un icono de aplicación excelente

Muchos usuarios encuentran aplicaciones en sus dispositivos mediante sus iconos. Para ayudar a los usuarios a encontrar la aplicación más fácilmente, elige un icono reconocible, asegúrate de que se destaca y asegúrate de que se adapte a los dispositivos en los que está instalada la aplicación.

En Windows, el icono de la aplicación aparece en muchos lugares, como la barra de tareas, el menú Inicio o el modificador de tareas Alt+Tabulación . Proporcione varios tamaños de imagen para asegurarse de que el icono de la aplicación sea fácilmente reconocible en estos lugares.

Para obtener información sobre qué tamaño de imagen se necesita en Windows, consulte Tamaños de imagen de icono en Definir iconos y un color de tema.

Uso de una ventana de aplicación independiente

Las aplicaciones nativas tienen sus propias ventanas dedicadas. Las PPA pueden definir cómo aparecen en el sistema operativo host.

Para mostrar el PWA en una ventana independiente sin interfaz de usuario de navegación del explorador, use el miembro para mostrar en el archivo de manifiesto de la aplicación web y establézcalo standaloneen .

Si la aplicación tiene varias páginas HTML, asegúrate de que los usuarios puedan ir entre las páginas mediante botones o vínculos dentro de la aplicación. Usa el minimal-ui valor del miembro del display manifiesto para permitir que los usuarios pasen entre páginas mediante botones anteriores y siguientes representados por el explorador en la barra de título de la aplicación.

Para crear una experiencia más envolvente y nativa, los PWA de escritorio también pueden optar por ocultar la barra de título del sistema operativo predeterminado y mostrar su propio contenido en su lugar. Mostrar contenido en el que normalmente se encuentra la barra de título puede ayudar a que las PPA se parezcan más a las aplicaciones nativas. Muchas aplicaciones de escritorio, como Visual Studio Code, Microsoft Teams y Microsoft Edge ya lo hacen.

Para reemplazar la barra de título, vea Mostrar contenido en el área de la barra de título mediante superposición de controles de ventana.

Integración en el sistema operativo

Los usuarios esperan que las aplicaciones instaladas se integren con el sistema operativo host de alguna manera.

La aplicación puede proporcionar una experiencia más familiar, atractiva y sin problemas mediante el uso de características de integración del sistema operativo, como accesos directos, uso compartido entre aplicaciones, errores, control de archivos o control de vínculos.

Accesos directos

Los accesos directos permiten definir vínculos directos a la funcionalidad de la aplicación haciendo clic con el botón derecho en el icono de la aplicación.

Consulte Definición de accesos directos de la aplicación (menús de pulsación larga o clic con el botón derecho).

Uso compartido de aplicaciones

Las PPA pueden compartir contenido con otras aplicaciones y recibir contenido de otras aplicaciones a través del cuadro de diálogo de recursos compartidos del sistema operativo.

Consulte Uso compartido de contenido con otras aplicaciones.

Distintivos de icono

Las PPA pueden mostrar distintivos de estado en los iconos de la aplicación para alertar a los usuarios de la presencia de contenido nuevo en la aplicación.

Consulta Mostrar un distintivo en el icono de la aplicación en Volver a interactuar con los usuarios con distintivos, notificaciones y mensajes push.

Control de archivos

Puede registrar su PWA para que sea un controlador de archivos para determinados tipos de archivo.

Use la característica controlador de archivos PWA para iniciar automáticamente la aplicación cuando el usuario abra determinado archivo en el sistema operativo.

Consulte Control de archivos en un PWA.

Registrar la aplicación es un controlador de vínculo o protocolo para iniciar automáticamente la aplicación cuando se usan determinados vínculos en otras aplicaciones.

Consulte Control de vínculos a un PWA y Control de protocolos en un PWA.

Widgets

Característica experimental

Cree sus propios widgets de aplicación para mostrarlos en el panel del widget del sistema operativo, como el panel de widgets de Windows 11.

Consulta Mostrar un widget PWA en el Panel de widgets de Windows.

Compatibilidad con escenarios sin conexión

Cuando se conecta a una red lenta o poco confiable, o incluso sin acceso a Internet, las aplicaciones instaladas normalmente se pueden abrir y usar. Los usuarios de las aplicaciones instaladas esperan que sigan trabajando en estas condiciones. También esperan que las partes dependientes de la red de una aplicación controlen correctamente la falta de conexión con un mensaje personalizado y funcionalidades de almacenamiento en caché local.

Para mejorar la retención, agregue un trabajador de servicio a su PWA. Puede usar las API y Cache del trabajador del Fetch servicio, así como el acceso de almacenamiento de datos local, para proporcionar una buena experiencia sin conexión a los usuarios.

Puede proporcionar una buena experiencia sin conexión en varios pasos:

  1. Almacene en caché todos los recursos estáticos que la aplicación necesita para iniciarse, mostrar contenido y permitir que los usuarios realicen las tareas más comunes.
  2. Redirigir a una página sin conexión personalizada para las páginas que no se pueden almacenar en caché.
  3. Controlar correctamente las tareas de la aplicación que no se pueden usar sin acceso a Internet.
  4. Implemente escenarios avanzados, como permitir que los usuarios descarguen datos para la visualización sin conexión.

Vea también:

Almacenar datos localmente

Para proporcionar una experiencia enriquecida y rápida a los usuarios, use las distintas opciones de almacenamiento de datos persistentes que están disponibles para las PWA, como:

  • Almacenamiento en caché para almacenar recursos estáticos para la aplicación.
  • Almacenamiento local y de sesión, para almacenar pequeñas cantidades de datos de usuario.
  • IndexedDB, para almacenar datos de usuario más grandes, estructurados.
  • API de acceso del sistema de archivos para almacenar archivos en el disco.

Para obtener más información, consulte Almacenamiento de datos en el dispositivo.

Uso de funcionalidades avanzadas

Las aplicaciones instaladas suelen realizar escenarios informáticos avanzados que los sitios web normalmente no admiten.

Para proporcionar una experiencia similar a la de una aplicación, use funcionalidades web avanzadas como:

Asegúrese de que las tareas más importantes de la aplicación se pueden realizar en todos los exploradores y dispositivos. Consulte Prueba en varios exploradores y dispositivos.

Haz que tu aplicación se vea y se sienta como una aplicación real

Los usuarios instalan aplicaciones en sus dispositivos para lograr tareas específicas y tienen ciertas expectativas sobre cómo se presentan estas tareas en la interfaz de usuario y cómo se integran en el sistema operativo host.

Para permitir que los usuarios alcancen las tareas más importantes de la aplicación de forma fácil y familiar, tome decisiones de diseño como:

  • No use un área de encabezado grande como hacen los sitios web para navegar a otras páginas. En su lugar, use una metáfora del menú.
  • No use un área de pie de página grande como hacen los sitios web para obtener más vínculos e información.
  • Use la system-ui fuente para que el contenido se sienta más nativo y se cargue más rápido.
  • Use menos vínculos y prefiera objetivos de mayor alcance.
  • Admita los temas claros y oscuros del sistema operativo mediante la característica de medios CSS prefers-color-scheme .
  • Proporcione y background-colortheme-color en el manifiesto de la aplicación web para personalizar la ventana de la aplicación. Consulte Manifiestos de aplicación web.
  • Céntrese en las tareas más importantes, elimine el desorden de contenido y optimice la interfaz de usuario.
  • Vuelva a organizar la interfaz de usuario en función del factor de forma del dispositivo mediante el diseño de cuadrícula CSS, el diseño de cuadro flexible de CSS (flexbox), las consultas multimedia CSS y lasimágenes con capacidad de respuesta.
  • Mejore el rendimiento percibido registrando las interacciones del usuario inmediatamente.
  • Considere la posibilidad de usar pantallas de esqueleto si la representación de la siguiente pantalla tarda tiempo. Consulte Creación de pantallas de esqueleto con propiedades personalizadas CSS.

Prueba en varios exploradores y dispositivos

Con la Web Apps progresiva, se entrega una aplicación para todos los dispositivos, desde un código base. Para asegurarse de que la aplicación funciona en todas partes, pruébela en varios exploradores, sistemas operativos y dispositivos.

Asegúrate de que los escenarios más importantes de la aplicación funcionen en todas partes y mejore progresivamente la experiencia en dispositivos compatibles.

Para probar la aplicación en varios entornos, tenga en cuenta las técnicas siguientes:

Compatibilidad con la vinculación profunda

Para mejorar la detección y el uso compartido de la aplicación a través de la web y los medios sociales, enrute cada página de la aplicación a una dirección URL única y admita la vinculación profunda.

Recursos adicionales

Local: PWA:

Local: DevTools:

MDN:

Wikipedia:

GitHub:

Otro: