Aplicaciones web progresivas (PWA) es una excelente manera de transformar una aplicación web en una experiencia independiente local. Piden la brecha entre el sitio web y las aplicaciones nativas, pero esta conversión puede introducir fácilmente los desafíos de diseño a considerar.
Definimos nuestro PWA Con archivo manifiesto. En nuestro manifiesto PWA podemos seleccionar entre una colección de modos de visualización, cada uno que proporciona diferentes niveles de visibilidad de la interfaz del navegador:
fullscreen: Use toda la pantalla para ocultar toda la interfaz de usuario del navegador.standalone: Parece una aplicación nativa, ocultando controles del navegador, pero manteniendo la interfaz de usuario del sistema.minimal-ui: Muestra el elemento de interfaz de usuario del navegador más pequeño.browser: Experiencia estándar del navegador web con una interfaz completa del navegador.
Por lo general, queremos que nuestro PWA se sienta como una aplicación, no un sitio web en el navegador, por lo que establecemos el miembro manifiesto de la pantalla en una de las opciones para ocultar la interfaz del navegador, p. fullscreen o standalone. Esto es ideal para ayudar a nuestras aplicaciones a obtener más en casa, pero puede introducir algunos problemas que no suelemos considerar al construir en la web.
Es fácil olvidar con qué nos proporciona el navegador. Las características tales como botones remotos/traseros, páginas refrescantes, búsqueda de páginas e incluso manipulaciones, compartir o copiar URL de página están todas las características proporcionadas por el navegador, y los usuarios pueden perder acceso cuando la interfaz de usuario del navegador está oculta. También mostramos contenido en el sitio web que no necesariamente se traduce en una experiencia de aplicación.
¡Imagine que los usuarios cavan en una mesa sin los botones detrás, tratando de compartir páginas de productos sin copiar la URL o presionar el error de no actualizar los botones para liberarlos!
Afortunadamente, ofrecemos muchas formas de personalizar la red.
Hemos estado utilizando consultas de medios al escribir CSS. Ya sea que cambie los estilos de impresión o la configuración de los puntos de interrupción para los diseños receptivos, son comunes en los kits de herramientas de los desarrolladores web. Cada modo de visualización discutido anteriormente se puede utilizar como una consulta de medios para cambiar la apariencia de un documento basado en su apariencia.
Consultas de medios, p. @media (min-width: 1000px) Establezca popularmente los puntos de interrupción basados en el tamaño de la ventana gráfica, pero tienen la mayor funcionalidad. Pueden manejarlo Estilo de impresiónOrientación del equipo, preferencia de contraste y tonelada entera. En nuestro caso, nosotros display-mode Características de los medios.
La consulta de medios de modo de visualización corresponde al modo de visualización actual.
notas: Aunque podemos establecer el modo de visualización en el manifiesto, el modo de visualización real puede variar según el soporte del navegador.
Estas consultas de medios se refieren directamente al patrón actual:
@media (display-mode: standalone)Aplicable solo a las páginas que están configuradas en modo independiente.@media (display-mode: fullscreen)Adecuado para el modo de pantalla completa. Vale la pena señalar que también se aplica cuando se usa una API de pantalla completa.@media (display-mode: minimal-ui)Adecuado para el modo de interfaz de usuario mínimo.@media (display-mode: browser)Aplicable al modo de navegador estándar.
También vale la pena prestar atención window-controls-overlay y tabbed Modo de visualización. Al momento de escribir, estos dos modos de visualización son experimentales y se pueden combinar con display_override. display-override Ser miembro de nuestra actuación de PWA, displaypero ofrece algunas opciones y energía adicionales.
display Hay una cadena de respaldo reservada (fullscreen -> standalone -> minimal-ui -> browser) No podemos cambiar, pero display-override Permite establecer el orden de retroceso que elegimos, como el siguiente:
"display_override": ("fullscreen", "minimal-ui")
window-controls-overlay Solo disponible para PWA que se ejecutan en sistemas operativos de escritorio. Hace que el PWA ocupe toda la ventana y los botones de control de la ventana se muestran como superposición. al mismo tiempo, tabbed Es importante cuando hay múltiples aplicaciones en una sola ventana.
Además, hay picture-in-picture Modo de pantalla (lo adivinó) Modo de imagen.
Utilizamos estas consultas de medios por completo, al igual que cualquier otra consulta de medios. Mostrar los elementos de la clase .pwa-only Cuando el modo de visualización es independiente, podemos hacer esto:
.pwa-only {
display: none;
}
@media (display-mode: standalone) {
.pwa-only {
display: block;
}
}
Si queremos mostrar elementos cuando el modo de visualización es independiente o minimal-uipodemos hacer esto:
@media (display-mode: standalone), (display-mode: minimal-ui) {
.pwa-only {
display: block;
}
}
Aún así, a veces CSS no es suficiente. En este caso, también podemos referirnos al modo de visualización y hacer los ajustes necesarios con JavaScript:
const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
// Listen for display mode changes
window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
if (e.matches) {
// App is now in standalone mode
console.log("Running as PWA");
}
});
Aplicación práctica
Ahora que sabemos cómo usar estas habilidades recién aprendidas en función de si el usuario usa nuestra aplicación web como PWA o modificaciones de visualización en el navegador o podemos ver cómo usar estas habilidades recién aprendidas.
Adaptar contenido para usuarios de PWA
Los usuarios que han instalado la aplicación como PWA se han convertido a PWA, por lo que puede ajustar la aplicación para reducir la presentación de marketing y centrarse en la experiencia del usuario. Dado que estos usuarios han mostrado compromiso al instalar su aplicación, es posible que no necesiten contenido promocional o indicaciones de instalación.
Mostrar más opciones y características
Es posible que deba exponer más directamente en el modo PWA, porque cuando la interfaz de usuario del navegador esté oculta, las personas no podrán acceder fácilmente a la configuración del navegador. Las características como cambiar el tamaño de la fuente, el cambio entre modos de luz, marcadores, compartir, etiquetas, etc., pueden requerir una alternativa en la aplicación.
Características adecuadas para la plataforma
Es posible que no desee usar ciertas funciones en aplicaciones web porque no se sienten apropiadas, pero es posible que desee funciones en PWA. Un buen ejemplo es la barra de navegación inferior, que es común en aplicaciones móviles nativas, gracias a la accesibilidad más fácil que proporciona, pero no es común en los sitios web.
Las personas a veces imprimen sitios web, pero rara vez imprimen aplicaciones. Considere si las características como los botones de impresión deben ocultarse en modo PWA.
Consejos de instalación
Una molestia común es el indicador de instalar el sitio como un PWA, que aparece cuando el usuario ha instalado el sitio. Idealmente, si nuestro PWA está configurado correctamente, pero no todos los navegadores pueden proporcionar su propio PWA, el navegador proporcionará sus propios consejos de instalación y puede ser exigente. MDN tiene una gran guía Cree un botón personalizado para activar la instalación del PWApero esto puede no satisfacer nuestras necesidades.
Podemos mejorar las cosas ocultando el mensaje de instalación a través de la consulta de medios o detectando el modo de visualización actual a través de JavaScript y primero detectando el modo de visualización actual.
Incluso podemos configurarlo como una clase de utilidad reutilizable para que cualquier cosa que no desee mostrar al instalar la aplicación como PWA se puede ocultar fácilmente.
/* Utility class to hide elements in PWA mode */
.hide-in-pwa {
display: block;
}
@media (display-mode: standalone), (display-mode: minimal-ui) {
.hide-in-pwa {
display: none !important;
}
}
Luego en tu html:
<div class="install-prompt hide-in-pwa">
<button>Install Our App</button>
</div>
<div class="browser-notice hide-in-pwa">
<p>For the best experience, install this as an app!</p>
</div>
También podemos hacer lo contrario y crear una clase de utilidad para que los elementos aparezcan solo en el PWA, como discutimos anteriormente.
Alcance estratégico de uso y URL de lanzamiento
Otra forma de ocultar el contenido de su sitio web es configurar scope y start_url característica. Estos no utilizan consultas de medios como discutimos, pero deben considerarse como una forma de proporcionar contenido diferente, dependiendo de si el sitio está instalado como PWA.
Aquí hay un ejemplo de una lista de estas propiedades:
{ "name": "Example PWA","scope": "/dashboard/","start_url": "/dashboard/index.html","display": "standalone", "icons": ( { "src": "icon.png", "sizes": "192x192", "type": "image/png" } ) }
scope Aquí está el nivel más alto de PWA. Cuando los usuarios dejan el alcance del PWA, todavía tienen una interfaz similar a la aplicación, pero tienen acceso a elementos de interfaz de usuario del navegador. Esto puede ser útil si aún desea ser parte de un PWA pero no tiene que optimizar o encontrar las consideraciones necesarias.
start_url Defina la URL que se introducirá el usuario al abrir la aplicación. Por ejemplo, si su aplicación está en example.com y un tablero example.com/dashboard/index.html. Es posible que las personas que han instalado la aplicación como PWA no necesitan contenido de marketing, por lo que puede configurarlo start_url llegar /dashboard/index.html Entonces, cuando la aplicación abre un PWA, la aplicación comienza desde esa página.
Transiciones mejoradas
Ver la transición Puede sentirse desconocido, fuera de lugar, un poco lujoso en la web, pero las características comunes de las aplicaciones nativas. Podemos configurar una transición de vista solo para PWA envolviendo correctamente el CSS relevante:
@media (display-mode: standalone) {
@view-transition {
navigation: auto;
}
}
Si eres real Ambicioso, también puede ajustar completamente la verificación con el sistema de diseño nativo emparejando el modo de visualización con el dispositivo correcto y/o el dispositivo y/o el navegador que usa según sea necesario para ajustarlo más de cerca con el sistema de diseño nativo.
Soporte y pruebas del navegador
El navegador admite la consulta de medios de modo de visualización Bueno y ancho. Sin embargo, vale la pena señalar que Firefox no tiene soporte PWAFirefox para Android solo muestra PWA browser Patrón, por lo que debe considerar las consideraciones necesarias. afortunadamente, Mejora progresiva De nuestro lado. Si estamos tratando con navegadores que carecen de PWA o estas consultas de medios, seremos considerados Degeneración elegante.
Probar PWA puede ser un desafío porque cada dispositivo y navegador los manejan de manera diferente. En cada combinación de navegador y sistema operativo, cada modo de visualización se comporta de manera ligeramente diferente.
Desafortunadamente, no tengo balas de plata para ofrecerte. Los navegadores no tienen una forma conveniente de simular el modo de pantalla para las pruebas, por lo que debe probar el PWA en diferentes dispositivos, navegadores y sistemas operativos para asegurarse de que todo debería funcionar en cualquier lugar.
revisar
El uso de un PWA es fundamentalmente diferente de usar una aplicación web en un navegador, por lo que debe considerarse. display-mode Las consultas de los medios proporcionan una forma poderosa de crear aplicaciones web progresivas verdaderamente adaptativas que respondan sabiamente a su contexto de instalación y visualización. Al aprovechar estas consultas, podemos hacer lo siguiente:
- Ocultar consejos de instalación redundantes Para usuarios que han instalado la aplicación
- Proporcionar herramientas de asistencia de navegación apropiadas Cuando el control del navegador no está disponible,
- Contenido y características personalizadas Para que coincidan con las expectativas de los usuarios en diferentes situaciones,
- Crear más experiencias locales Respetar el acuerdo de la plataforma y
- Mejora gradualmente la experiencia Adecuado para usuarios leales.
A medida que PWAS continúa madurando, la implementación y la adaptación reflexiva se volverán cada vez más importantes para crear experiencias de aplicaciones verdaderamente atractivas en la Web. Si está ansioso por más información, así como consejos y consejos de PWA, consulte Ankita Masand’s «Una guía extensa para aplicaciones web progresivas«.
Lea más sobre Smashingmag
(GG, YK)
