Discuta sobre PWA: ¿por qué las empresas necesitan aplicaciones web progresivas y cómo usar esta tecnología en este momento?

PWA o aplicación web progresiva. aplicación web progresiva) - un híbrido del sitio y aplicaciones para dispositivos móviles. En este artículo, aprenderá qué es PWA y por qué es una gran cosa para los negocios. También puede agregar una funcionalidad de aplicación web progresiva a su sitio existente en 5 minutos o crear un sitio híbrido y una aplicación desde cero.

¿Qué es PWA?

Esta es una tecnología que agrega funcionalidad al sitio. En el navegador de escritorio, la aplicación web progresiva sigue siendo un sitio normal. Y cuando un visitante lo abre en un navegador móvil, PWA se convierte en un híbrido de un sitio y una aplicación.

Vamos a ver cómo funciona. El usuario ingresa al sitio y recibe una oferta para agregarlo a la pantalla principal.

Si el usuario acepta la oferta, el icono del sitio aparece instantáneamente en la pantalla del dispositivo móvil.

Punto importante: PWA ocultó el dispositivo del usuario en dos clics. Esto sucedió para eludir la Play Store, y también en contra de la prohibición de instalar aplicaciones de fuentes desconocidas. El software antivirus no juró.

Después de la instalación, PWA crea un caché de sitio. Esto resuelve dos problemas: aumenta la velocidad de descarga y hace que el sitio esté disponible sin conexión. Es decir, gracias a la tecnología PWA, el sitio puede utilizarse incluso sin conexión a Internet.

Un punto muy importante: a partir de principios de abril de 2019, Chrome, incluido Chrome para dispositivos móviles, es totalmente compatible con PWA. Otros navegadores soportan algunos o todos.

Esto significa que al implementar la funcionalidad de PWA, funcionará para los visitantes del sitio que usan Chrome. En otros navegadores, su sitio funcionará como siempre, pero la funcionalidad de una aplicación web progresiva permanecerá inaccesible o parcialmente accesible.

Resultados rápidos de la prueba:

  • En Firefox, PWA es completamente funcional.
  • En el navegador de Internet PWA de Samsung no funciona, el blog está disponible como un sitio normal.
  • En Opera, el sitio está disponible sin la funcionalidad PWA.
  • Microsoft Edge para Android PWA funciona completamente.

Por lo tanto, la tecnología PWA es compatible en al menos el 80% de los navegadores (esta es la parte de Chrome, Firefox y Edge).

Subtotal: PWA hace cuatro cosas geniales:

  • Instalado en el dispositivo en un clic sin tiendas de aplicaciones.
  • Cargado rápidamente gracias a un caché de página creado previamente.
  • Funciona offline gracias a la misma caché.
  • Envía notificaciones push a los usuarios.

¿Por qué deberían las empresas utilizar aplicaciones web progresivas?

Todas las respuestas a la pregunta del subtítulo se pueden encontrar en la sección anterior. Repetimos los puntos principales para la consolidación. PWA ayuda a las empresas a:

  • Entra en tu dispositivo móvil usuario sin pasar por Google Play y otras tiendas de aplicaciones.
  • Hacer el sitio disponible sin conexión. Esto funciona incluso para las tiendas en línea, pero la información sobre las transacciones ejecutadas "vuela" a la tienda cuando el usuario tiene una conexión a Internet.
  • Aumentar la velocidad de carga del sitio web en dispositivos móviles.
  • Enviar notificaciones a los usuarios..

La implementación de PWA da resultados medibles. Aquí hay algunos ejemplos:

  • Gracias a la tecnología, Tinder ha reducido los tiempos de carga de la página de 11.9 segundos a 4.69 segundos. PWA Tinder es un 90% más fácil que su aplicación nativa.
  • PWA Uber no pesa casi nada y se carga en 3 segundos, incluso en redes 2G.
  • OLX gracias a PWA aumentó el CTR de anuncios en un 146% y redujo el número de fallas en un 80%.

Importante: la funcionalidad de una aplicación web progresiva no interfiere con el uso del sitio de la forma habitual. Igualmente importante: convierta el sitio en PWA más rápido y más barato que hacer una aplicación nativa.

Con las siguientes instrucciones, en 5 minutos implementará la funcionalidad de la aplicación web progresiva en su sitio web. Gratis de forma gratuita. Es cierto que no todos tendrán suerte, sino solo aquellos que eligen motores normales para el sitio. El resto tendrá que pagar por la elección incorrecta en el sentido literal: contratar desarrolladores y pagar la introducción de PWA.

Cómo implementar la funcionalidad PWA en el sitio.

Para implementar PWA, un sitio existente debe cumplir los siguientes requisitos:

  • Acceso a través de https.
  • Adaptabilidad o capacidad de respuesta.
  • URL separada para cada página (punto importante, si su sitio es SPA).

Recomendación para principiantes: antes de implementar PWA, haga una copia de seguridad del sitio. Copia de seguridad debe hacerse antes de cualquier cambio.

Considere dos formas de implementar PWA en orden de simple a complejo.

Cómo convertir un sitio en PWA en un par de clics utilizando complementos listos para usar

Los propietarios de los populares CMS tienen suerte: pueden convertir el sitio en una aplicación progresiva con la ayuda de complementos.

A finales de 2018, WordPress tiene un tercio del número total de sitios o casi dos tercios de los sitios en el CMS. Por lo tanto, la instrucción está escrita en el ejemplo de este motor. Después será una información útil para aquellos que trabajan con otros CMS.

Instale el complemento PWA para WP gratuito en el sitio. Probé varios módulos del directorio oficial de WordPress y me decidí por esta solución. Los resultados de su trabajo se pueden ver al principio del artículo. Si quieres, prueba con otros complementos.

Especifique los ajustes generales. Seleccione el ícono del escritorio (ícono de la aplicación) y el precargador de íconos (ícono de la pantalla de presentación de la aplicación). En la configuración, puede elegir la orientación de la aplicación (vertical u horizontal), pero esta función no funciona. La aplicación se muestra en el modo "retrato", independientemente de la configuración.

Para enviar notificaciones push a los usuarios, registre el proyecto en Firebase, obtenga la clave de la API e ingréselo en la pestaña de notificaciones Push.

En la configuración avanzada, habilite el seguimiento sin conexión con Google Analytics. Opcionalmente, habilite el soporte de notificación PWA en pantallas de escritorio.

En la configuración de caché, seleccione la creación automática de caché. Especifique el número de publicaciones que se almacenarán en caché. El valor máximo es 50.

Guarde los cambios y abra el sitio en su dispositivo móvil en el navegador Chrome. PWA ya está funcionando, usted vio los resultados de la implementación al principio del artículo.

¿Qué pasa si el sitio no funciona en WordPress? Atrapa la solución:

  • Joomla!: PWA de WebKul ($ 59).
  • Drupal: Progressive Web App (funciona con Drupal 7, la versión de Drupal 8 está en desarrollo).
  • OpenCart: OpenCart PWA ($ 99).
  • Magento: PWA Studio (necesita ayuda del desarrollador).
  • CS-Cart: CS-Cart PWA ($ 99).
  • Prestashop: PWA y notificaciones push y Advance PWA (90 y 150 euros respectivamente).
  • WooCommerce: PWACommerce.

No encontré soluciones listas para otros motores, pero puede buscar por sí mismo.

Subtotal: WordPress tiene módulos gratuitos para implementar PWA, incluidos WooCommerce y Drupal. Para los módulos para Joomla!, OpenCart, CS-Cart y Prestashop, debe pagar. Para implementar una aplicación web progresiva en otros motores, los desarrolladores deberán pagar.

Si aún no tiene un sitio web o si desea probar una aplicación web progresiva antes de implementarlo en el sitio web principal, continúe con el siguiente paso.

Una forma rápida y gratuita de crear un sitio de funcionalidad PWA con Gatsby.

Gatsby es un generador de sitio estático escrito por React (esta es una biblioteca de JavaScript). Gatsby emplea excelentes recursos, incluidos proyectos de comercio electrónico, páginas de destino y sitios corporativos. Para el uso profesional de Gatsby en proyectos serios, necesita comprender el código.

Pero puede crear una tarjeta de negocios, un portafolio o un blog en Gatsby sin conocimiento técnico. Para hacer esto, use la biblioteca de ensamblajes preparados para principiantes. Considere la creación de PWA en el ejemplo de un montaje mínimo para el blog del creador de Gatsby Kyle Matthews.

Instala Node.js en tu computadora. Esto es necesario para ejecutar un servidor local en su computadora, que es necesario para trabajar con Gatsby. Tanto LTS como Current Node.js funcionarán. Después de la instalación, abra un indicador de comandos e ingrese dos comandos: node --version y npm --version. Para ejecutar un indicador de comando en Windows, escriba "cmd" en la búsqueda de la barra de tareas.

Si todo se hace correctamente, verá algo como esto (las versiones pueden diferir):

Instalar git. Este sistema de control de versiones, es necesario trabajar con Gatsby. Después de la instalación, crea una cuenta. Para hacer esto, ingrese sus datos en la línea de comando:

  • git config --global user.name "Vasya Pupkin".
  • git config --global user.email "[email protected]".

Instale Gatsby CLI usando el comando npm install -g gatsby-cli.

Ahora ya puedes instalar el ensamblaje Gatsby. En el símbolo del sistema, seleccione la unidad D u otra unidad que no sea del sistema en la PC. Para ello, ingrese el comando D:.

Gatsby no funciona si hay caracteres cirílicos en el nombre de la carpeta o en la ruta del archivo.

Instale el ensamblaje de Gatsby con el comando gatsby new my-blog-starter //github.com/gatsbyjs/gatsby-starter-blog. En este caso, my-blog-starter es el nombre del sitio. Puedes reemplazarlo con cualquier otro.

Una vez completada la instalación, navegue a la carpeta del proyecto usando el comando cd my-blog-starter. Inicie PWA en un servidor local usando el comando gatsby develop. Si todo se hace correctamente, la versión local del sitio estará disponible en // localhost: 8000.

La ejecución de Gatsby en un servidor local se muestra en la siguiente ilustración, el proceso tarda menos de un minuto.

Editar PWA y crear publicaciones estarán en la carpeta del proyecto.

Para cambiar la configuración de su blog, abra gatsby-config.js en el Bloc de notas u otro editor de texto. Especifique los metadatos apropiados: nombre del blog, nombre del autor, descripción. Como una URL, especifique algo como //basil-pupkin.surhe.sh, solo en lugar de "basil-pupkin" escriba la opción deseada. Tenga en cuenta que necesita especificar el protocolo de conexión https. Un poco más tarde, publicaremos un sitio web de forma gratuita sobre el alojamiento de Surge.

Guarde los cambios en el archivo. Después de eso, el servidor local actualizará el futuro de PWA.

Reemplace el avatar en la carpeta Contenido - Activos. Nombra el archivo con tu foto de la misma manera que se llama al avatar predeterminado. Para editar la información sobre el autor, abra el archivo bio.js en la carpeta Src - Componentes. Especifique los datos y guarde los cambios.

Crearemos publicaciones en la carpeta Contenido - Blog. Entra en este directorio y examina los contenidos. Cada publicación del ensamblaje de prueba se encuentra en una carpeta separada. El nombre de la carpeta forma la URL de la publicación. Dentro de la carpeta hay un archivo de texto index.md y opcionalmente fotos.

Para publicar una nueva publicación, proceda de la siguiente manera:

  • Crear una carpeta con un nombre adecuado.
  • Dentro de la carpeta, crea el archivo index.md.
  • Abra el archivo en un editor de texto.

Las publicaciones deben crearse utilizando Markdown. Este es un lenguaje de marcado muy simple que es fácil de entender por su cuenta. La ilustración muestra cómo se ve la publicación.

Guarda los cambios. Gatsby actualizará el blog y lo publicará.

Elimine todas las carpetas excepto la suya del directorio Blog. El sitio solo será de su publicación. No hago esto para demostrar aún más el trabajo de PWA.

Ahora mueva el blog desde el servidor local a Internet. Implementemos PWA en el alojamiento condicionalmente libre de sitios estáticos de Surge, pero si lo desea, puede usar otras plataformas, por ejemplo, GitHub Pages, Netlify, etc.

Instale la oleada. Para hacer esto, ingrese el comando npm install - global surge en el terminal. Genere un sitio estático: ingrese el comando gatsby build en la carpeta del proyecto. Gatsby preparará archivos de HTML y JavaScript estáticos por un minuto, que luego se publicará en línea.

Ingrese la oleada public / command.

El sistema sugerirá un nombre de dominio aleatorio.

Reemplaza manualmente este nombre con el deseado.

Presione Entrar y espere el mensaje de publicación del sitio.

Compruebe la disponibilidad del sitio en el navegador. Tenga en cuenta que el recurso está disponible a través de los protocolos http y https. La redirección se puede personalizar si compra una cuenta Surge pagada. Para ver el trabajo de PWA, use una conexión segura, ya que las aplicaciones web progresivas solo funcionan completamente a través de https.

Echa un vistazo a trabajo PWA. Abra un blog en su dispositivo móvil en el navegador Chrome. Después de unos segundos, se le pedirá que instale la aplicación.

Agregue una aplicación, espere unos minutos y apague Internet. Ejecutar la aplicación.

Compruebe si las páginas internas están disponibles cuando no están conectadas.

Tenga en cuenta que en algunos dispositivos la primera vez que inicie PWA requiere una conexión a Internet.

Para publicar una nueva publicación, repita los pasos descritos: ejecute el blog en un servidor local, cree una publicación en la carpeta del proyecto, asegúrese de que está satisfecho con el contenido y la apariencia, genere archivos estáticos y vuelva a publicar el blog en Surge.

Un punto importante: a diferencia de Google, Yandex aún no puede indexar el contenido que se genera mediante JavaScript. Para ayudar al motor de búsqueda, debe configurar la representación del lado del servidor en Gatsby. Hablaremos de esto en las siguientes publicaciones.

Subtotal: consideramos dos formas de implementar PWA. Esta es la introducción de la funcionalidad PWA a un sitio existente utilizando complementos listos para usar o creando PWA desde cero utilizando el generador de sitios estáticos de Gatsby. Por supuesto, hay una tercera forma: siempre puede ponerse en contacto con desarrolladores profesionales y pedirles que implementen una aplicación web progresiva.

"Muchos consideran que PWA es la tecnología del futuro, y estoy de acuerdo con ellos": Nikolai Ilichev, programador del departamento de desarrollo de sitios web de Texterra

El programador "Texterra" Nikolai Ilichev compartió con los lectores su opinión sobre las aplicaciones web progresivas.

Dmitry Dementiy: Buenas tardes, Nikolai. ¿Qué tan importante es usar PWA? ¿Los propietarios de negocios necesitan agregar funcionalidades progresivas de aplicaciones a sitios web corporativos o sitios de compras en línea?

Nikolay Ilyichev: ¡Saludos a los lectores! Más que relevante. La usabilidad, el aumento de la velocidad de obtención de información del sitio, y este es uno de los indicadores más importantes de la calidad de los recursos, la capacidad de trabajar con la aplicación fuera de línea, las notificaciones push y mucho más: todo esto tiene un efecto positivo en la asistencia y la conversión, al tiempo que reduce el porcentaje de fallos. Lo que, por cierto, está creciendo en proporción al aumento en el tiempo de carga de la página.

La tecnología está evolucionando, lo que significa que las oportunidades solo crecerán. Sobre si necesita implementarlo o no, todo depende de los objetivos que se establezca la empresa. Si los objetivos convergen con las ventajas que ofrece PWA, el juego vale la pena.

DD: Uno de los chips PWA es la capacidad de usar el sitio sin conexión. Es decir, incluso si el usuario no tiene una conexión a Internet, puede usar páginas en caché. Esto es cierto para los proyectos de contenido, blogs, medios de comunicación. ¿Los usuarios tendrán problemas debido al almacenamiento en caché? PWA en segundo plano carga algo al acceder a Internet, ¿qué tan crítico es?

N.I .: Si hay problemas o no, depende del desarrollador que establezca las reglas para cargar y almacenar datos en caché. Si hay una gran cantidad de videos en el sitio, y todo este video se descarga, al final, el espacio asignado para el caché simplemente terminará. Por lo general, se cuenta como un porcentaje de la memoria libre del dispositivo. Lo ideal es que el usuario reciba algunos beneficios: la misma velocidad de descarga y la capacidad de trabajar sin Internet. Tan pronto como aparece Internet en el dispositivo cliente, PWA comienza a actualizar el caché. Esto es para garantizar que el dispositivo siempre tenga la versión actual del sitio. Por eso no es crítico para los propietarios de dispositivos móviles.

DD: puede implementar la funcionalidad de PWA en el sitio en un par de clics sin conocimiento técnico. ¿Por qué crees que PWA no se usa mucho todavía?

N.I .: La tecnología es bastante nueva, esa es toda la razón. Google lo anunció en 2015, y la compatibilidad con el navegador más o menos normal apareció incluso más tarde. Muchos ni siquiera han oído hablar de esta tecnología, y quienes han escuchado, no entienden qué ventajas tiene. Aunque vale la pena señalar que la situación está mejorando constantemente. Muchas grandes empresas ya están utilizando esta tecnología. Y hay más y más desarrolladores capaces de implementar esta funcionalidad. Mucha gente cree que esta tecnología tiene futuro, y estoy de acuerdo con ellos.

DD: para implementar PWA, un sitio debe tener inicialmente una serie de características: adaptabilidad, alta velocidad de descarga y disponibilidad a través de un protocolo de conexión segura. ¿Esto significa que la implementación de PWA hará que el propietario del sitio "tire de la cola" y mejore el sitio?

N.I .: Así es. Pero, por supuesto, es deseable que estas colas estén ajustadas por defecto, o no surjan en absoluto. La adaptabilidad no está en ninguna parte sin ella, la mayoría de las veces buscamos algo en Internet a través de un teléfono inteligente, y un sitio web sin diseño adaptativo simplemente no sobrevivirá: el usuario simplemente no puede usarlo. Velocidad de descarga: uno de los indicadores más importantes del sitio, que afecta la posición en los resultados de búsqueda. Me parece que vale la pena usar PWA no para cerrar las colas, sino para aumentar el rendimiento general del sitio y su facilidad de uso.

JJ: ¿Cree que el hecho de que este formato promueva activamente a Google influirá en la popularidad de PWA?

N.I .: Eso creo Google es ampliamente conocido, y las tecnologías que promueve generalmente se vuelven muy populares. Esta empresa cuenta con recursos impresionantes que le permiten mejorar continuamente las tecnologías que considera prometedoras.

Que sigue

PWA es una tecnología prometedora que amplía las posibilidades de interacción con los usuarios móviles. Del artículo, aprendió cómo convertir un sitio existente en PWA, si funciona en un motor popular. La introducción de funciones de aplicación progresiva al menos no perjudica al sitio. Попробуйте сделать PWA с помощью Gatsby. Благодаря инструкции из статьи вы быстро сделаете современный блог, портфолио или сайт-визитку с функциональностью PWA. Если захотите реализовать прогрессивное приложение в интернет-магазине или на корпоративном сайте, обратитесь к профессиональным разработчикам.

Если во время работы с PWA на WordPRess или Gatsby будут вопросы, пишите в комментариях, будем разбираться.

Loading...

Deja Tu Comentario