El diseño web es un campo en constante cambio que evoluciona en función de las últimas tecnologías y tendencias. PWA o aplicación web progresiva es la última tecnología que lo ayuda a combinar la funcionalidad de un sitio web de escritorio con una aplicación móvil. Elimina la necesidad de una aplicación móvil separada y transfiere toda la funcionalidad disponible con una aplicación móvil a un sitio web de escritorio. Es por eso que es una buena opción para los propietarios de sitios de WordPress ofrecer esta función a sus lectores. Si está interesado, aquí le mostramos cómo agregar la funcionalidad PWA a su sitio de WordPress.
Tendencias en la construcción de sitios web
Así es como ha evolucionado la tecnología de creación de sitios web en la última década.
- En el pasado, las personas tenían sitios web de escritorio estáticos que solo funcionaban en navegadores de escritorio.
- Más tarde, cuando los teléfonos inteligentes estaban en su infancia, muchos propietarios de sitios web proporcionaron versiones móviles separadas de sus sitios web.
- Luego, los sitios web adaptables se hicieron populares, eliminando la necesidad de una versión móvil separada y ayudando a ahorrar enormes costos.
- Las aplicaciones móviles para iOS y Android vuelven a ser populares porque llegan a una gran audiencia a través de las tiendas de aplicaciones móviles. Sin embargo, desarrollar aplicaciones es más costoso que tener una versión móvil separada, por lo que no muchos propietarios de sitios web preferirían instalar una aplicación para su sitio web.
- Finalmente, gracias a Google, ahora tenemos aplicaciones web progresivas que ayudan a los sitios de escritorio a tener la funcionalidad de la aplicación móvil.
¿Qué es PWA?
En nuestro artículo anterior, explicamos cómo instalar la aplicación de YouTube en Windows y Mac desde el sitio web, ya que Google no ofrece una aplicación de escritorio. Puede usar la misma función para aplicaciones web progresivas en WordPress y permitir que sus usuarios instalen su sitio como una aplicación.
- En el escritorio: el sitio web mostrará un aviso en la barra de direcciones del navegador, en el que el usuario puede hacer clic para instalar la aplicación.
- En los dispositivos móviles, los usuarios pueden agregar un sitio web a su pantalla de inicio y acceder a él como cualquier otra aplicación instalada.
Las PWA tienen muchas ventajas sobre el acceso a sitios web desde un navegador:
- Funciona como una aplicación y puedes enviar notificaciones directamente al dispositivo del usuario.
- Se puede acceder al sitio sin abrir un navegador (aunque requiere un navegador).
- Los usuarios pueden anclar aplicaciones a la barra de tareas de Windows o al menú de inicio, agregarlas a la base de Mac y guardar íconos de aplicaciones en la pantalla de inicio de dispositivos iOS/Android.
- Se puede acceder a todas las páginas web visitadas localmente en el dispositivo, incluso sin Internet.
- La aplicación se abre muy rápido en comparación con su sitio web normal, lo que es especialmente útil para los teléfonos inteligentes.
Si no me cree, siga leyendo para ver PWA en acción.
Agregue la funcionalidad PWA a WordPress
Debe instalar el complemento PWA de Google y configurar una configuración simple para convertir su sitio de WordPress en una aplicación PWA. Este es un complemento gratuito que se puede usar con cualquier sitio de WordPress. Recuerda que debes tener una conexión HTTPS para agregar PWA a tu sitio de WordPress. Dado que SSL gratuito está disponible para todos los usuarios de WordPress a través de Let's Encrypt, no creemos que esto deba ser un problema para la mayoría de los usuarios.
Además, su servidor debe admitir la generación de manifiestos web y trabajadores de servicio para su sitio. Puede ver los detalles completos de PWA en Documentación oficial de Google.
Instalar y configurar el complemento PWA
Inicie sesión en su panel de WordPress para instalar y activar el complemento PWA en su sitio.
Después de activar el complemento, vaya a la sección "Configuración> Leer", active la opción "Ver sin conexión" y guarde sus cambios. Esto ayudará a almacenar en caché las páginas visitadas en el navegador para su uso sin conexión y los usuarios pueden abrir la aplicación para acceder a las páginas sin conexión a Internet.
Eso es todo, el complemento no tiene otras configuraciones disponibles.
Instala tu sitio en el escritorio
Una vez que haya agregado la funcionalidad PWA a su sitio web, simplemente abra una nueva pestaña en su navegador y abra su sitio web. En este ejemplo, usamos Google Chrome, asegúrese de usar un navegador que admita la funcionalidad PWA. Verá una pequeña notificación que dice "Instalar" seguida de un icono en el extremo derecho de la barra de direcciones de su navegador. Tenga en cuenta que las formas de los iconos pueden variar según el navegador que esté utilizando.
Hacer clic en la aplicación para ver la pequeña ventana emergente que se muestra a continuación, luego haga clic en el botón Instalar.
Esto agregará la aplicación a la carpeta de su navegador (en "Chrome Apps" en Google Chrome en Mac) e iniciará su sitio web en el modo de aplicación. El complemento utilizará el favicon de su sitio web como icono de la aplicación.
Verá una aplicación PWA como la siguiente, que se parece a cualquier otra aplicación instalada en su computadora.
Puede agregar accesos directos a aplicaciones en el escritorio, la barra de tareas o el panel de accesos directos. En Chrome, puede acceder a la aplicación yendo a la sección "chrome: // apps". Puede desinstalar la aplicación en cualquier momento haciendo clic en el icono de tres puntos en la esquina superior derecha de la aplicación y seleccionando la opción "Desinstalar...".
Instalar aplicaciones PWA en Android e iOS
Puede instalar aplicaciones PWA en Chrome Android utilizando el mismo método que el anterior. Esto agregará un ícono de aplicación a la pantalla de inicio que puede tocar y acceder como cualquier otra aplicación. Si no desea mantener la aplicación instalada, simplemente elimínela para eliminarla de su teléfono.
Desafortunadamente, la mayoría de los navegadores de iOS, incluidos Chrome y Safari, no admiten la instalación directa de PWA. Esto tiene un problema similar con Apple, ya que no admite notificaciones automáticas en Safari en iOS. Lo que puede hacer es usar la función Agregar a la pantalla de inicio (A2HS) para agregar marcadores a su pantalla de inicio como aplicaciones. Funciona como una aplicación PWA porque A2HS se considera parte de la tecnología PWA.
otros complementos
Si realmente desea utilizar la funcionalidad PWA, los complementos gratuitos de PWA pueden no ser suficientes. Puede probar la versión premium Complemento para aplicaciones web súper progresivas Tiene las siguientes características.
- Solo necesita configurar la página predeterminada que se abre cuando el usuario inicia la aplicación.
- Muestra una ventana emergente con un mensaje que le pide al usuario que instale el sitio web como una aplicación.
- Personaliza el aspecto, la página de inicio y las páginas sin conexión.
- También puede convertir su sitio web en una aplicación de Android real y publicarla en Google Play Store.
Si está utilizando la versión AMP, puede probar PWA para complementos WP y AMPLa versión premium de este complemento proporciona una funcionalidad similar al complemento Super PWA.
ultimas palabras
Agregar PWA a su sitio de WordPress es una opción para atraer usuarios móviles cuando no tiene el tiempo o el dinero para mantener una aplicación móvil separada. Tiene muchas ventajas, como la ausencia de costos adicionales y la fácil retención de usuarios mediante el envío de notificaciones automáticas utilizando complementos populares como OneSignal. Aunque no está disponible para dispositivos iOS, esperamos brindar soporte pronto.
Deja una respuesta