Una guía para principiantes de 2020

Una guía para principiantes de 2020

Aplicaciones web progresivas (PWA): una guía para principiantes

El desarrollo web progresivo se ha recuperado en los últimos años después de la propuesta inicial de Google en 2015. Las aplicaciones web progresivas (PWA) utilizan lo mejor de las tecnologías web y móviles para ofrecer una gran experiencia de usuario.

¿Por qué valen la pena las PWA? Es posible que una empresa prefiera crear aplicaciones independientes para las plataformas Android e iOS, junto con un sitio web receptivo. Sin embargo, el uso de una aplicación web progresiva puede ayudar a unir todos estos enfoques. En esto guía para principiantes de aplicaciones web progresivas, discutimos por qué muchas empresas están explorando esta avenida en 2021, y luego también le mostramos cómo subirse al tren.

Primero discutimos las características de una aplicación web progresiva y luego las principales razones para adoptarlas. A continuación, exploramos los elementos de una aplicación web progresiva típica antes de entrar en un ejemplo simple de PWA utilizando HTML, CSS y JavaScript vanilla.

¿Qué es una aplicación web progresiva (PWA)?

Una aplicación web progresiva es una aplicación web que utiliza las últimas funciones web para proporcionar a los usuarios una experiencia comparable a una aplicación móvil nativa. Si bien las tecnologías web se utilizan para crear una aplicación web progresiva, su funcionalidad imita la de una aplicación nativa.

El objetivo de una aplicación web progresiva es proporcionar una experiencia similar a la de una aplicación. Si elige una aplicación web progresiva, es posible que esté renunciando a algunas funciones nativas, pero elegir esta aumenta enormemente su alcance. Con un número cada vez mayor de funciones para aprovechar con las tecnologías web, la brecha entre una aplicación nativa y una aplicación web progresiva se ha reducido en los últimos años, lo que ha llevado a una mayor adopción.

Características de una aplicación web escalable

Al igual que el concepto de diseño web receptivo, una aplicación web progresiva consta de un conjunto de características que un desarrollador puede seguir. Consiste en una lista de tecnologías y características que acortan la brecha entre una aplicación nativa y una aplicación web progresiva. Además de ser adaptable a varios dispositivos, navegadores y pantallas, una aplicación web escalable tiene las siguientes características:

  • Instalable: Una PWA se puede instalar y anclar a la pantalla de inicio de un dispositivo, haciéndola accesible para su uso posterior.
  • Capacidad para trabajar sin conexión: Cuando no hay conectividad, una PWA debería funcionar (con al menos una pantalla que indique que necesita conectividad).
  • Asegurado: Dado que la información en una PWA se intercambia a través de la web, debe asegurarse de que su conexión utilice HTTPS y SSL.
  • Admite funciones de aplicaciones nativas como el modo de pantalla completa y notificaciones push.

Estas características deberían servir como pautas al construir una aplicación web progresiva. La respuesta a si su aplicación es progresiva, por lo tanto, es más una escala que una opción binaria.

En última instancia, una aplicación web progresiva es una aplicación solo web; por lo tanto, no aparece en ninguna tienda de aplicaciones. ¿Esto daña su aplicación? Siempre es un compromiso. Las tiendas de aplicaciones populares le brindan visibilidad y una audiencia de nuevos usuarios que esperan recibir nuevas aplicaciones interesantes. Por otro lado, acceder a una tienda de aplicaciones requiere mucho esfuerzo y su creación debe estar 100% en sintonía con los requisitos de la tienda. Proporcionar una PWA usted mismo es en general mucho más simple, pero debe tener una audiencia preexistente a la que va a comercializar la aplicación.

Implementación de una aplicación web progresiva: consideraciones clave

Hemos hablado de las características de una aplicación web progresiva hasta ahora. Echemos un vistazo a algunos elementos de una aplicación web progresiva. Antes de continuar en esta sección, asumiremos que su sitio web responde y funciona en todos los dispositivos y navegadores.

Para que su aplicación funcione sin conexión, debe utilizar un trabajador del servicio. En pocas palabras, un servicio registra una versión sin conexión de su aplicación web. A continuación, necesita un manifiesto para su PWA. Básicamente es un archivo JSON que contiene metadatos para su aplicación.

Puede encontrar cómo trabajar en estos pasos en nuestra guía para crear aplicaciones web progresivas en WooCommerce.

¿Por qué debería desarrollar una aplicación web progresiva?

Las aplicaciones móviles nativas normalmente requieren algunos pasos para su instalación y configuración. Con un número cada vez mayor de pasos para instalar su aplicación, cada vez menos usuarios la seguirán. Por otro lado, un usuario puede utilizar una aplicación web progresiva casi de inmediato. Las aplicaciones web progresivas contribuyen en gran medida a que las empresas lleguen a sus audiencias de forma eficaz. Las ventajas más importantes de las PWA son:

  • Eficiencia incrementada: Debido a que las aplicaciones están cargadas con tecnologías web, generalmente toman menos tiempo para cargar que sus contrapartes nativas.
  • Uso eficiente del ancho de banda: Dado que los PWA son solo código basado en texto, son idealmente más pequeños que el archivo de instalación de una aplicación nativa. Por lo tanto, un usuario potencialmente tiene que gastar menos datos para que su aplicación se ejecute en su dispositivo.

Evalúe una aplicación web progresiva con Lighthouse

Como establecimos anteriormente, una aplicación web progresiva se define a través de un espectro de propiedades. ¿Cómo evalúa si su aplicación web es escalable? Lighthouse de Google es una herramienta para evaluar el progreso de un sitio web. Lighthouse es automatizado y de código abierto, lo que califica su sitio web según métricas como rendimiento, SEO y accesibilidad. Puede instalar el Complemento de Chrome para Lighthouse para usarlo como parte de las herramientas de desarrollo.

Para ejecutar una auditoría de Lighthouse, abra su sitio web en Chrome y navegue hasta la pestaña Lighthouse en las Herramientas para desarrolladores de Chrome. La sección de aplicaciones web progresivas de la herramienta prospera en varias configuraciones de su sitio web y cómo se conecta con las mejores prácticas en esas áreas.

Demostración de Lighthouse
Demostración de Lighthouse

Demostración de PWA: cómo crear una lista de tareas pendientes

Creamos una aplicación web progresiva WooCommerce basada en ReactJS anteriormente en el blog. En esta sección, creemos una aplicación web progresiva vanillaJS. Esta aplicación será una lista sencilla de tareas pendientes. La interfaz de usuario final solo tiene una lista de tareas y un botón para agregar nuevas tareas a la lista.

Demostración progresiva de la aplicación web
Nuestra demostración progresiva de la aplicación web

Estructura HTML / CSS de nuestra PWA

Comencemos por crear un marco para la aplicación web progresiva.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <link rel="manifest" href="manifest.json"> <title>To Do List</title> </head> ... </html>

Tenga en cuenta que definimos una ventana como lo hacemos en el diseño web receptivo. Además, establecemos la escala inicial en “1”. Luego enlazamos a nuestra hoja de estilo y manifiesto. Veremos en breve cómo crear un archivo JSON de manifiesto.

A continuación, definimos el cuerpo de la página. Creamos un título y un botón para agregar un elemento a la lista. Pronto trabajaremos con JavaScript para asociar una acción con un clic en un botón.

<body> <div class="app"> <header> <h1>To Do List</h1> </header> <div class="btn-wrapper"> <button class='btn' type="button">Add item!</button> </div> <div class="todolist"> <div class="list-items"> <div class="odd"> item 1 </div> <div class="even"> item 2 </div> </div> </div> </div> <script src="./script.js"></script> </body>

La lista de elementos se muestra en un div con la clase de todolist. Los elementos alternativos tienen odd y even nombres de clases: tendrán diferentes colores, como definiremos en los estilos.

Utilizamos una caja flexible para que nuestro diseño responda en esta sección. Además, asignamos la altura del app contenedor usando unidades de altura de ventana.

.app { min-height: 100vh; display: flex; flex-direction: column; }

A continuación, configuramos las propiedades del encabezado y el botón.

header h1 { margin: 50px 0px 20px 0px; text-align: center; padding: 2rem; background: #4A44F2; font-size: 40px; color: #FFFF52; } .btn-wrapper: { text-align: center; } .btn-wrapper button { width: 150px; height: 75px; font-size: 20px; color: black; }

Finalmente, definimos las dimensiones de los elementos de la lista.

.todolist { background: #101010; width: 60%; margin-bottom: 100px; } .list-items{ display: flex; } .list-items > div { height: 100px; line-height: 100px; text-align: center; flex: 1; color: black; width: 100px; } .odd { background: #F2E635; } .even { background: #F20505; }

Agregue funcionalidad de tarea usando VanillaJS

Para agregar la funcionalidad de JavaScript al elemento, primero vinculamos una función de JavaScript haciendo clic en el botón, que luego agrega un div elemento a la lista de elementos. La clase está configurada para odd o even según el número de elementos presentes en la lista cuando el usuario hace clic en el botón.

const buttons = document.querySelectorAll(".btn"); buttons.forEach((btn,index) => { btn.addEventListener("click", ()=> { var listItems = document.querySelectorAll(".list-items")[0]; var item = document.createElement("div"); item.className = (listItems.children.length % 2 === 0) ? 'odd' : 'even'; item.innerHTML = 'item ' + String(listItems.children.length + 1); listItems.appendChild(item); }); });

Manifiesto de la aplicación

Si bien hemos creado una aplicación web receptiva con solo algunas características progresivas, necesitamos agregarle una pieza fundamental, el manifiesto. Puedes usar este generador de manifiesto en línea donde ingresa los metadatos de su aplicación y carga el ícono para generar el archivo JSON de manifiesto. Aquí está el archivo JSON que estamos usando.

{ "name": "To Do List", "short_name": "todolist", "theme_color": "#cecece", "background_color": "#2196f3", "display": "minimal-ui", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }

El código está disponible en GitHub para que lo edite y lo ejecute.

Reflexiones finales sobre las aplicaciones web progresivas

En esta guía para principiantes sobre aplicaciones web progresivas, primero analizamos la aparición de aplicaciones web progresivas. A continuación, exploramos el motivo de su creciente popularidad y los dividimos en elementos esenciales. Además, hemos analizado cómo crear su primera PWA de la forma más sencilla posible. Es probable que su aplicación sea más compleja que nuestra lista básica de tareas pendientes, pero los principios siguen siendo los mismos.

Si tiene alguna pregunta sobre cómo funcionan las PWA, no dude en hacerla en los comentarios.

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga en un 50-80%:

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. Únase a él ahora es gratis)!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba