Hola y bienvenidos todos. Mi nombre es Imran y trabajo para rtCamp, rtCamp proporciona soluciones de WordPress a las empresas. Y hoy vamos a hablar de por qué las aplicaciones web progresivas para WordPress. Déjenme preguntarles esto. ¿Qué puede evolucionar más rápido que la tecnología? Pueden ser nuestras expectativas. Queremos todo mejor, más fácil. Y ahora.
Sin embargo, la descarga de aplicaciones a veces puede ser eterna. Y en muchas partes del mundo. Los datos son caros y muchas zonas también tienen mala conectividad. Así que realmente necesitamos una nueva generación de la web móvil que resuelva estos problemas. Hablemos de la tendencia de uso de la web móvil frente a la aplicación móvil. ¿Cuáles son las ventajas de utilizar aplicaciones nativas?
Son de fácil acceso desde la pantalla de inicio. Funcionan sin conexión, puedes enviar notificaciones push para que el usuario regrese y también puedes acceder a las funciones móviles y al censo. Ahora las aplicaciones móviles tienen mejores capacidades. Sin embargo, la web móvil tiene mejor alcance, aproximadamente cien visitas al mes para un usuario medio.
¿Ahora podemos conseguir ambas cosas? Pues si podemos combinar las capacidades de una aplicación móvil y el alcance de la web móvil, podemos conseguir algo de oro. PWA. Ahora bien, lo que son las PWA o PW, son aplicaciones web progresivas. Que son aplicaciones web que se ven y se comportan como apps nativas. Mejoran progresivamente las aplicaciones web, se ven y se comportan como apps nativas.
Vamos a echar un vistazo a este. Así que como se puede ver que si usted va a la Academia, y si se abre que en el navegador web móvil, que le da una opción para agregar a la pantalla de inicio. Al hacer clic en la opción de añadir a la pantalla de inicio, la aplicación se añadirá a tu pantalla de inicio y podrás acceder a ella como a cualquier otra aplicación móvil, como puedes ver, si haces clic en ella.
Se abre. No hay barra de direcciones. Se siente como una aplicación nativa, lo cual es brillante. Entonces, ¿cuál es la necesidad de la PWA? Bueno, se ha observado que los usuarios odian los retrasos y la falta de fiabilidad en el móvil. El nivel de estrés causado por los retrasos en el móvil es compatible con ver una película de terror, se puede obtener el nivel de estrés de algo así cuando su aplicación móvil es lenta.
También se ha observado que el 50% de los usuarios de teléfonos inteligentes son más propensos a utilizar el sitio móvil de la empresa cuando navegan o compran, porque no quieren descargar una aplicación y las aplicaciones ocupan demasiada memoria del teléfono. Y ese es el problema número uno que lleva a desinstalar esas aplicaciones móviles. Puedes ver que de nuevo, dice, um, lleno, lo siento.
No puedo tener más.
Ahora, donde una aplicación Android instalada requeriría al menos tres pasos. Por ejemplo, la redirección a la descarga de Play Store, el relanzamiento de la aplicación Android en la parte superior del embudo, la instalación de la PWA se realiza sin problemas en un solo clic, y no aleja al usuario del embudo de conversión actual, lo que es bueno para el negocio.
Así que PWAs es hacer más fácil volver al sitio. Ahora Google sigue una regla simple y es que se centra en los usuarios y todo lo demás le seguirá. Google dice, piensa primero en el usuario, ¿cuáles son las necesidades de mis clientes? ¿Cómo las satisface la PWA? Y en base a las observaciones, se encuentra que los usuarios prefieren las experiencias que son fuego.
No este fuego, ciertamente no este, pero el fuego realmente llevaría a rápido, instalable, fiable. Y atractivo. Tomemos una diferencia entre las aplicaciones nativas y las PWA. Así que para las aplicaciones nativas, es necesario desarrollar y mantener tres bases de código separadas. Sin embargo, para la PWA es una sola base de código, que es brillante.
Las apps nativas tienen una alta fricción de distribución, sin embargo las PWA son accesibles en Android iOS y una web, y la en variedad de navegadores. Las apps nativas son menos descubribles. Sin embargo, en las PWA el contenido es descubrible e indexado por los motores de búsqueda. En las aplicaciones nativas, sólo se puede compartir el enlace de descarga de la aplicación, mientras que en las PWA se puede compartir el enlace directo de cualquier página o pantalla.
Las aplicaciones nativas no se pueden marcar. Sin embargo, las PWS sí. Las aplicaciones nativas actualizan la aplicación a través de play store mientras que las PWA están siempre frescas. Las apps nativas tienen un alto uso de datos, sin embargo, las PWA tienen un gran ahorro de datos. Así que basado en lo que hemos discutido, estas son algunas de las características de PWA.
Son progresivos, son responsivos. Así que funcionan en múltiples dispositivos. Funcionan sin conexión, tanto en la web, como en el móvil, siempre están frescos. Los datos son siempre frescos y se guardan. Así que uno de los requisitos clave de PWA. Es que tiene que estar en S3PS son descubribles indexado por Google.
Están sonando dobles. Puedes enviar notificaciones push a los usuarios y traerlos de vuelta. Son duraderos y se pueden enlazar. Así que puedes compartir esos enlaces. Ahora, qué significa esto para los negocios. Las PWAs tienen un buen sentido comercial. Ahora las aplicaciones web progresivas están en la hoja de ruta de muchas empresas para modernizar su sitio web, adaptarse a los nuevos usuarios, a las nuevas expectativas.
Las preguntas que se hacen a menudo son ¿Responde a las necesidades reales del cliente? ¿Hace crecer nuestro negocio? ¿Es factible y robusto, etc.? Así que las aplicaciones web progresivas aprovechan las capacidades de la web moderna. Entonces, ¿cuál es el impacto empresarial de un sitio web rápido? Lo que puedes hacer es que, cuando trabajes en tus optimizaciones de velocidad, empieces a medir la velocidad de tu sitio con frecuencia con las herramientas y métricas adecuadas para controlar tu progreso.
Por ejemplo, mida sus métricas con Lighthouse, fije objetivos claros, como tener buenas puntuaciones de vitalidad en la web e incorpore el presupuesto de rendimiento en su proceso de construcción. Puedes aislar el impacto de los cambios de velocidad incrementales y calcular cuántos ingresos extra ha generado tu trabajo.
Será interesante que sepas que E-bay hizo de la velocidad un objetivo de la empresa para 2019. Utilizaron técnicas como el presupuesto de rendimiento, la optimización crítica de bardo y el prefetching predictivo, lo que es emocionante es que concluyeron que por cada cien milisegundos de mejora en la página de búsqueda, el tiempo de carga de la cuenta de añadir al carrito aumentó en un 0,5%, lo que es algo genial para un negocio.
También Paul Armstrong, el líder tecnológico de PWA en Twitter. Hicieron una documentación muy completa en su caso de estudio, que se llama Twitter light and high-performance react progressive web apps at scale. Así que voy a compartir el enlace con usted. Sin embargo, esto básicamente describe la importancia de la recopilación de datos, mientras que el ajuste de su PWA para maximizar las optimizaciones de rendimiento.
Es interesante saber que Google ha anunciado recientemente que en mayo de 2021 cualquier página que no sea de contenido AMP y que cumpla con las políticas de contenido de noticias de Google, como las señales de experiencia de pago, etc., será elegible para aparecer en la función de historias principales para móviles en la búsqueda. Y lo que también debe saber es que Google dará prioridad a las páginas con una gran experiencia de página al clasificar los resultados, lo que significa que el sitio web que tenga las mejores señales vitales de la web y la experiencia de la página es probable que aparezca más arriba en el resultado.
Así que hablamos de qué son las PWAs y cuáles son los beneficios que ofrece. Sí, claro. ¿Y por qué es importante ahora? ¿Y si tuviéramos que construir BWL? ¿Cómo lo hacemos? Así que podemos construir PWA en unos sencillos pasos. Primero podemos crear los manifiestos de la aplicación web. Entonces, ¿qué es el manifiesto de la aplicación web? Bueno, es sólo un archivo de diseño que contiene metadatos.
Básicamente le dice al navegador sobre su aplicación web, cómo debe comportarse si se instala en el dispositivo móvil o en el escritorio del usuario. Así que un manifiesto válido para Chrome sería manifest punto json. Lo mismo para Opera, Mozilla. Es manifest punto webmainfest, Microsoft su manifest punto webmanifest. Etcétera. Y así es como se ve.
Así que como este es un archivo json, aparecerá en un par clave-valor. Así que tienes un nombre corto, digamos "Codeytek". Esto se utilizará para la pantalla de inicio y el lanzamiento, etc para su aplicación. Luego tienes el nombre. Yo sólo lo llamo la Academia, que va a ser, ser, uh, utilizado en la solicitud de instalación de la aplicación. Uh, usted puede poner la información sobre los iconos, que se utilizará para la pantalla de inicio lanzador de aplicaciones, conmutador de tareas y la pantalla de inicio.
También, uh, usted puede pasar el inicio a la URL para su sitio, el color del equipo, el color de fondo para su aplicación, uh, la información de la pantalla, el alcance, como qué directorio, uh, se utiliza para PWA, etc. Y. Entonces todo lo que tienes que hacer es decirle a tu navegador sobre tu archivo de manifiesto para usar la etiqueta de LinkedIn y luego vincularlo. Ahora vamos a hablar sobre el soporte del navegador.
¿Crees que todos los navegadores soportarán las características de la PWA? No. Ahora mismo, ¿qué navegador crees que será el último en soportar las características de la PWA? Sí, tienes razón. Es Internet Explorer. Siempre es el último, ¿no? Así que como puedes ver ese internet explorer, no tiene soporte. Um, ed tiene soporte. Chrome tiene soporte completo.
iOS Safari tiene soporte parcial y así sucesivamente. Ahora hablemos de los service workers. ¿Qué son los service workers? Bueno, un service worker es un script que tu navegador ejecuta en segundo plano, separado de tu página web. ¿Y qué hace? Bueno, digamos que es un navegador web y tienes un servidor remoto de service workers, básicamente un middleware que intercepta la petición http.
Y entonces en ese punto se puede almacenar en caché la respuesta y luego servir la respuesta desde la propia caché. Así que puedes hacer diferentes cosas. Usted puede tener la estrategia de almacenamiento en caché, etcétera. Hablaremos de eso. Hablaremos más de eso en un momento. Muy bien. Así que vamos a ver el ciclo de vida de los trabajadores de servicio.
Así que hay diferentes eventos en los ciclos de vida. El primero fue registrar. Así que el momento del evento de registro, registramos el trabajador del servicio, y luego en el momento de la instalación, añadimos los archivos a la caché. Y cuando se activa, también borramos la caché anterior. Para que, que los datos nunca es rancio. Muy bien. Y luego registramos el service worker.
Así que esto es JavaScript nativo. Tenemos un service worker. Comprobamos si el service worker está disponible en el navegador, entonces seguimos adelante y lo registramos pasando la URL del archivo del service worker. Y entonces lo registramos y entonces. En el siguiente paso, seguimos adelante y añadimos los archivos a la caché. Seguimos adelante y creamos una versión de la caché y las rutas para el archivo que se va a almacenar en la caché.
Así que creamos una constante con la clave de caché, y también creamos otra constante, que contendrá la lista de las URLs que necesitan ser almacenadas en caché. Luego en el evento de instalación, escuchamos el evento de instalación, y luego seguimos adelante y. Caché de los archivos y, a continuación, garantizar que cualquier nueva versión del trabajador del servicio se hará cargo de la página y se convertirá en activo.
Luego, el siguiente paso en el momento de la activación es eliminar la caché anterior. Así que escuchamos el evento llamado activar, y luego seguimos adelante y comprobamos si hay alguna nueva versión de la caché, seguimos adelante y eliminamos la caché anterior en ese caso. Muy bien. Así que esto es lo que parece. Así que si vas a la consola y si cargas tu aplicación web, puedes ver el archivo de caché instalado por el service worker, registrado, activado, comprobado.
Si hay una nueva versión de caché y no se encuentra una nueva versión de caché. Muy bien. Si vas a la aplicación desde el elemento inspect, aquí encontrarás información. Si los trabajadores del servicio se registraron, tienes el estado de la fuente. Y luego puedes ir al manifiesto, y esta es la información de nuestro archivo manifest.json.
Tenemos el nombre corto, el tema, el color, el fondo, la información de los iconos de color y todo eso. Bien. Y aquí es donde se acopla. Aquí es donde te dice sobre el caché. Muy bien. Así que una vez que el trabajador de servicio está activo, tiene un control total sobre las páginas. Ahora puede manejar eventos como Fetch, push, y sync, etc.
Así que cómo funciona, digamos, tomemos este ejemplo. Digamos que este es su navegador web. Y cuando una solicitud de red viene, por lo que el navegador hace una solicitud HTTP, el trabajador del servicio va a interceptar esa solicitud. Va a decir, Hey, espera un minuto. Antes de que esa petición vaya al servidor, necesito hacer algo.
Necesito comprobar. Si la URL solicitada está en la caché. Si está en la caché, entonces voy a servir la respuesta desde la propia caché. Pero si no lo está, entonces voy a hacer una petición a la red, al servidor, y voy a devolver la respuesta de la petición de la red. Sin embargo, en este momento también voy a almacenar la respuesta en la caché para que la próxima vez que llegue la petición, pueda servirla desde la propia caché.
Muy bien. Así que en el siguiente paso buscamos los datos de la caché. Así que escuchamos el evento fetch y luego respondemos con, comprobando. Si la URL solicitada no es la caché o no, si es va a devolver la respuesta de la caché en el vicio, me va a una nueva solicitud al servidor. Impresionante.
Muy bien. Así que este es el evento Fetch. Así es como se ve el evento Fetch. Así que usted puede ver que es la obtención de la respuesta de estas direcciones URL. Y si usted va a la pestaña de la red y el elemento de inspección, esta es la forma en que los trabajadores del servicio parece. La última cosa, si desea tener una costumbre añadir a la pantalla de inicio, puede agregar que voy a compartir el enlace para el GitHub para que pueda comprobar el código.
No voy a entrar en los detalles de esto. Es bastante simple. Muy bien. Así que ahora vamos a la codeytek.com. Esta es nuestra aplicación web progresiva, la pantalla de añadir a casa. Como tenemos la ventana emergente, se puede ver que está añadiendo a la pantalla de inicio, y luego vamos a nuestra pantalla de inicio. Ahí está nuestra aplicación, haz clic en ella.
Perfecto. Esta es la PWA. Lo que vamos a hacer ahora es ir al modo offline y ver si funciona sin conexión. Ya está. Enhorabuena. Esto funciona sin conexión. Acabamos de construir una PWA perfecta. Y puedes esperar una puntuación de faro de algo así. ¿No es increíble? Aplaudamos por nosotros mismos. Acabamos de construir una PWA.
Este es el sueño de todo desarrollador. ¿No es así? Sí, ¿en serio? Bien, hasta ahora hemos aprendido qué son las PWA, qué características ofrecen, etc. Ahora, ¿qué pasa si no soy un experto técnico? Como que no soy un desarrollador y estoy seguro de que esta pregunta vendría a tu mente que no soy un desarrollador, correcto.
Para poder construir una PWA. ¿Cómo puedo convertir mi sitio web existente de WordPress en PWA? ¿Puedo hacerlo? ¿Cómo lo hago? Bien, hablemos de eso. Así que tenemos ciertos plugins disponibles en WordPress plugins gratuitos que puede utilizar, que convertirá su sitio web existente. Sitio web de WordPress en un PWA estos son PWA de Google.
Tienes Super PWA, WordPress Mobile Pack, PWA para WP y amp, WordPress progresivo, etc. Así que digamos que en este ejemplo, vamos a, así que digamos que instalamos un activar Super PWA plugin. Así es como sus pantallas de configuración se vería como. Recuerde que discutimos sobre el manifiesto Dot Json, donde usted tenía el nombre de la aplicación, la información del icono, color de fondo.
Así que básicamente esta es la información utilizada para ese archivo. La mayor parte de esta información será pre-rellenada, pero si quieres personalizarla, por ejemplo, quieres que el nombre de tu aplicación sea diferente. Um, y te gustaría elegir un color de fondo diferente para tu PWA. Puedes hacerlo desde aquí. Bien.
Muy bien. Así que digamos que has activado el super plugin PWA, pero ¿qué pasa si quiero enviar notificaciones push a mis usuarios para mi sitio web de WordPress? ¿Cómo lo hago? Bueno, antes de saltar a eso, hay algo interesante. Me gusta compartir con ustedes. Basado en la investigación, se observa que los usuarios de teléfonos inteligentes son más propensos a comprar en los sitios móviles que ofrecen recomendaciones pertinentes sobre los productos y el 85% de los usuarios de teléfonos inteligentes dicen que las notificaciones móviles son útiles para que puedan obtener las recomendaciones adecuadas de lo que estaban buscando.
Así que vamos a ver cómo podemos seguir adelante, enviar notificaciones push para nuestro sitio web de WordPress. Bueno, la buena noticia es que hay un plugin gratuito disponible, y que se llama una señal. Todo lo que tienes que hacer es instalar y activar este plugin. Sólo tienes que seguir el paso básico. Como has visto para crear la cuenta en una señal y luego sólo tienes que rellenar la información básica como el ID de la aplicación, la clave de la API de descanso, y entonces usted puede personalizar la configuración también.
Una vez que hayas hecho eso. Y una vez que usted tiene su super PWA instalado y luego una señal activada. La parte buena es que el super PWA compatible con una señal, una vez que se configura, entonces su sitio web de WordPress va a conseguir que se convierta en un PWA. Así que, por ejemplo, he activado eso. Así que si ahora voy a mi sitio web de WordPress, se puede ver que tengo una opción para añadir a la pantalla de inicio.
Y esta vez también obtener la opción para el envío de notificaciones push. Y cuando acepto estas, añadir a la pantalla de inicio y aceptar recibir notificaciones push dice gracias por suscribirse. Y es la adición de esta aplicación en mi pantalla de inicio.
Vamos a la pantalla de inicio. Ahí están nuestras aplicaciones. Vamos a abrirla. Puedes ver que no hay barra de direcciones. Así que se ve y se siente como una aplicación nativa. Esa es la página de nuestro blog.
Ahora vamos a ir fuera de línea. Así que voy a pulsar el modo offline. Modo avión.
Vamos a cerrar. Todo.
Vamos a reabrirlo.
Y ahí lo tienes. Sigue funcionando incluso cuando estás desconectado. Impresionante. Ahora vamos a tratar de ver cómo funciona la notificación push. Así que lo ideal sería que cuando publique un nuevo post, entonces una notificación push para ser enviado al usuario. Bien. Vamos a hacer eso. Así que voy a publicar este post. Este es mi post de WordPress.
Le doy a publicar. ¿Notas lo que ocurre? Aparece un mensaje en la parte superior. Ahí lo tienes. Dice que se ha enviado con éxito a 10 destinatarios en la parte derecha. Fíjate que en el móvil tienes una notificación. Haces clic en esa notificación y entras directamente en este blog. ¿No es increíble? Es absolutamente brillante. Es decir, puedo involucrar a mis usuarios enviándoles una notificación push y se activa automáticamente a todos mis suscriptores cuando sigo adelante y publico el post.
Increíble. Perfecto. Bien. Ahora hablemos un poco más de la compatibilidad con los navegadores. Así que es compatible con Google Chrome para Android Mozilla Firefox para Android Edge para Android, Brave para Android, Samsung internet. ¿Y qué hay de iOS? Así que iOS comenzó a apoyar PWA sólo desde la versión 11.3. Algunas características han apoyado un iOS, no todos.
Por ejemplo, la sincronización de fondo, y una web de notificaciones push. Así que actualmente no es compatible. Uh, y, y hay que pulsar manualmente el icono de compartir y luego añadir a la pantalla de inicio para iOS. Derecho algunos de los ejemplos que me gustaría compartir para PWA. Así que usted tiene qualitech.com, que es un PWA. Usted tiene que deleitar a Instagram, eh, Uber, M Uber Forbes.
FlipKart Lite, Smashing magazine, y Pinterest en allí y hay un aswell más. En rtCamp, construimos algo llamado wp-decoupled, y esto funciona fuera de línea también. Así que esto es una PWA. El front-end está en React usando next-es. Y el backend está en WordPress. Y esta es una aplicación de WooCommerce. Como se puede ver que está trabajando fuera de línea, así.
También he construido un tema de código abierto Gatsby WooCommerce, que tiene el extremo delantero en React con Gatsby y backend en WordPress. Y como se puede ver que estas son todas las categorías de los productos, usted tiene, estos productos que están disponibles, usted tiene la paginación y también puede ir fuera de línea si había hecho fuera de la wifi.
Y si actualizo la página, puedes ver que sigue funcionando. También puedo buscar los productos. Todavía funciona. También puedo buscar los productos, así que puedo hacer el banderín y puedes ver que también está buscando fuera de línea. Sí. Y luego tienes la opción de añadir al carrito. Así que estos son, usted es añadir a la cesta. Tienes opciones de pago, tienes la pasarela de pago disponible, tienes el carrito disponible, y luego también tienes el.
Uh, soporte de Gutenberg, puedes escribir bloques. Y entonces esto va a mostrar por aquí. Y estos, se puede ver que todos estos están trabajando fuera de línea para que pueda. Añadir los productos a su lista de deseos. Y cuando el internet vuelva a estar en línea, puedes pedirlos, lo cual es brillante. Bien. Y usted no necesita construir una base de código adicional para la aplicación móvil porque esto es un PWA y en realidad se puede añadir a la pantalla de inicio en su móvil y utilizar esto como una aplicación móvil, que incluso funciona sin conexión.
Así que vamos a ver cómo funciona.
[MÚSICA]
Muy bien. Así que espero que hayas disfrutado de la demo. Y esto le dará un sitio web, un mejor rendimiento y una mejor experiencia de usuario. Así que para las referencias, eh, usted quiere, usted puede ir a, por lo que para PWA, usted puede ir a developers.google.com/web/fundamentals. Usted puede comprobar el código para el PWA que construimos en imranhsayed/pwa-conceptos en GitHub para WP desacoplado, usted puede ir a rtCamp slash WP desacoplado en GitHub.
Y para el equipo de Gatsby WooCommerce en imranhsayed en GitHub también. Si quieres aprender WordPress, puedes ir a learn dot rtCamp.com y es una fuente bastante extensa para aprender WordPress. Puedes comprobarlo. Si quieres aprender a programar para diferentes pilas tecnológicas, puedes ir a Codeytek.com.
Y luego cursos y puedes aprender sobre babble Chrome, CSS, Gatsby, eh, aplicaciones web progresivas, WordPress, y hay muchos más cursos gratuitos disponibles. Muy bien. Así que eso es todo, felicidades a todos. Hemos aprendido acerca de lo que son las aplicaciones web progresivas, cómo usarlas, cómo desarrollar una PWA y cómo convertir su sitio web de WordPress existente en un plugin de WordPress PWA.
Así que espero que lo hayan disfrutado. Muchas gracias. Puedes seguirme en Twitter. Mi cuenta de Twitter es @imranhsayed. Muchas gracias.
