Aplicaciones web súper progresivas
Aplicaciones web súper progresivas
SuperPWA ayuda a convertir fácilmente su sitio web de WordPress en aplicaciones web progresivas.
Visite el sitio web »
Informe de error · Complemento de WordPress · revisiones · Preguntas frecuentes · Contribuciones
Bienvenido al repositorio de Super Pwa Github
⚡️ Demo: superpwa.com Verifique los videos para saber cómo funciona
¿Qué son las aplicaciones web progresivas?
Progressive Web Apps (PWA) es una nueva tecnología que crea un punto medio entre un sitio web y una aplicación móvil. Se instalan en el teléfono como una aplicación normal (aplicación web) y se puede acceder desde la pantalla de inicio.
Los usuarios pueden volver a su sitio web iniciando la aplicación desde su pantalla de inicio e interactuar con su sitio web a través de una interfaz similar a una aplicación. ¡Sus visitantes de regreso experimentarán tiempos de carga casi instantes y disfrutarán de los excelentes beneficios de rendimiento de su PWA!
¡Las aplicaciones web súper progresivas le facilitan convertir su sitio web de WordPress en una aplicación web progresiva fácilmente!
Apoyar el proyecto
Si se siente súper emocionado y quiere apoyarnos de una manera pequeña, ¡considere protagonizar y/o compartir el repositorio! Esto nos ayuda a conocer y hacer crecer la comunidad.
También puede apoyarnos a través de los seguidores en las redes sociales y compartir sobre nosotros.
? Instalación
Una vez que se instala SuperPWA ⚡️, los usuarios que navegan por su sitio web desde un dispositivo móvil compatible verán un aviso de "Agregar a la pantalla de inicio" (desde la parte inferior de la pantalla) y podrán 'instalar su sitio web' en la pantalla de inicio de su dispositivo. ¡Cada página visitada se almacena localmente en su dispositivo y estará disponible para leer incluso cuando estén fuera de línea!
SuperPWA es fácil de configurar, ¡lleva menos de un minuto configurar su aplicación web progresiva! SuperPWA hace una desinstalación limpia, eliminando cada entrada de base de datos y archivo que crea. De hecho, ninguna de las configuraciones predeterminadas se guarda en la base de datos hasta que la guarde manualmente la primera vez. Adelante y pruébalo.
Requisitos mínimos de la aplicación web progresiva
Videos sobre cómo agregar a la pantalla de inicio y aplicaciones web progresivas funcionan en diferentes navegadores
Google Chrome para Android |
Mozilla Firefox para Android |
Microsoft Edge para Android |
Samung Internet para Android |
PWA en iOS - navegador Safari |
|---|
Documentaciones detalladas para probar PWA en navegadores
- PWA en Chrome para Android
- PWA en el escritorio - Chrome
- PWA en el dispositivo iOS - navegador Safari
- PWA en Microsoft Edge Browser para Android
- PWA en el navegador de Internet Samsung para Android
? ¿Qué hay en la caja?
Aquí están las características actuales de las aplicaciones web súper progresivas:
- Genere un manifiesto para su sitio web y agréguelo al jefe de su sitio web.
- Establezca el icono de la aplicación para su aplicación web progresiva.
- Establezca el color de fondo para la pantalla Splash de su aplicación web progresiva.
- Su sitio web mostrará el aviso de "Agregar a la pantalla de inicio" cuando se accede en un navegador compatible.
- El almacenamiento en caché agresivo de las páginas utilizando la API de Cachestorage.
- Las páginas una vez en caché se sirven incluso si el usuario está fuera de línea.
- Configure la página fuera de línea personalizada: seleccione la página que desea que el usuario vea cuando se accede a una página que no está en el caché y el usuario está fuera de línea.
- Nuevo en la versión 1.2: Soporte para el color del tema.
- Nuevo en la versión 1.2: Ahora puede editar el nombre de la aplicación y el nombre corto de la aplicación.
- Nuevo en la versión 1.2: Establezca la página de inicio de su PWA.
- Nuevo en la versión 1.2: Establecer páginas móviles aceleradas (AMP) Versión de la página de inicio. Complementos compatibles: AMP para WordPress, AMP para WP, Better AMP, AMP Supremacy, WP AMP.
- Nuevo en la versión 1.3: soporte agregado para la pantalla de salpicaduras de alta calidad. Ahora puede configurar el icono 512x512 para la pantalla de salpicaduras de su aplicación web progresiva.
- Nuevo en la versión 1.3: Las aplicaciones web súper progresivas ahora cuentan para las actualizaciones de contenido y actualizarán el caché a medida que actualice el sitio web.
- Nuevo en la versión 1.3: Manejo mejorado de la actualización del trabajador del servicio en el navegador.
- Nuevo en la versión 1.4: Ahora puede establecer la orientación predeterminada de su PWA. Elija entre "cualquier" (siga la orientación del dispositivo), "Retrato" y "Paisaje".
- Nuevo en la versión 1.4: ahora puede establecer la propiedad thema_color en el manifiesto.
- Nuevo en la versión 1.5: Integración OneSignal para notificaciones push.
- Nuevo en la versión 1.6: compatibilidad de red multisitio de WordPress.
- NUEVO en la versión 1.7: ¡Atrimentos para SuperPWA está aquí! Visitas con el complemento de seguimiento de UTM a las visitas de seguimiento que provienen de su PWA.
- Nuevo en la versión 1.8: ¡Los problemas de compatibilidad con OneSignal ahora se resuelven!
- Nuevo en la versión 1.8: Nuevo complemento: Apple Touch icons que establece los iconos de su aplicación como iconos de Apple Touch.
- Nuevo en la versión 2.0: SuperPWA ahora es compatible con WordPress instalado en un subcarpelo.
- Nuevo en la versión 2.0: ahora puede configurar la propiedad de visualización de la configuración de SuperPWA.
- Nuevo en la versión 2.1.1: Soporte para los iconos de Maskabale.
? Próximas características:
- Aviso de indicador fuera de línea.
Soporte de dispositivos y navegadores para PWA
| Cromo | Firefox | Borde | Ópera | Safari | Samsung | Navegador UC | Corajudo |
|---|
| Agregar a la pantalla de inicio | | | | | | | | |
| Trabajadores de servicio | | | | | | | | |
| Push y notificaciones web | | | | | | | | |
| API de solicitud de pago | | | | | | | - | - |
| Color de meta tema | | - | - | - | - | | - | |
Beta compatible o apoyo parcial en desarrollo
Las aplicaciones web progresivas necesitan navegadores que admitan manifiestas y trabajadores de servicios. Actualmente, Google Chrome (versión 57+), Chrome para Android (62), Mozilla Firefox (57), Firefox para Android (58) son los principales navegadores que admiten PWA.
La lista está creciendo rápidamente y es probable que sea compatible en la mayoría de los principales navegadores para fines de este año.
¿Por qué crear aplicaciones web progresivas?
Cómo convertir su sitio web de WordPress en una aplicación web progresiva
Instalación de WordPress
- Visite WordPress Admin> Plugins > Agregar nuevo
- Buscar aplicaciones web súper progresivas
- Haga clic en " Instalar ahora " y luego " activar " aplicaciones web súper progresivas
Para instalar manualmente:
- Cargue la carpeta súper progresiva-Web-Apps en el directorio/WP-Content/Plugins/en su servidor
- Vaya a WordPress Admin> complementos
- Active el complemento de aplicaciones web súper progresivas desde la lista.
Personalizando su aplicación web progresiva
Su aplicación web progresiva debe estar lista para probar con la configuración predeterminada en la activación. Puede personalizarlo más y hacerlo realmente suyo.
- Vaya a WordPress Admin> " Superpwa "> Configuración
- Establezca un color de fondo para la pantalla de compensación que se mostrará cuando su PWA se abre en un dispositivo móvil.
- Establezca el icono de la aplicación. Este será el ícono de su PWA cuando se agregue a la pantalla de inicio en un dispositivo móvil. El icono debe ser una imagen PNG y exactamente 192 x 192 píxeles de tamaño.
- Establezca la página fuera de línea. Esta página se mostrará si el usuario está fuera de línea y la página que solicitó ya no se almacena en caché. Idealmente, debe crear una página dedicada de WordPress y configurarla aquí. Dentro de la página que crea, puede agregar una nota que lea: "Parece que está fuera de línea y la página que solicitó no está disponible en este momento. Vuelva a consultar una vez que esté en línea".
- Haga clic en "Guardar configuración".
Probar su aplicación web progresiva
- Abra un navegador compatible en un dispositivo compatible (para EG: Chrome para Android (62 o superior) en un dispositivo Android)
- Ingrese su sitio web y espere hasta que se cargue completamente
- Debería ver una ventana emergente que tenga su icono de aplicación y un botón que lea "Agregar a la pantalla de inicio".
- Haga clic en él y su PWA se agregará a su pantalla de inicio. Espere a que se complete la instalación.
- Vaya a su pantalla de inicio y abra su PWA. Explore en algunas páginas si lo desea. Cierre la aplicación.
- Desconecte de Internet y ahora abra su PWA nuevamente. Debería poder ver todas las páginas que previamente navegó.
- Intente visitar una página que no visitó antes. Debería ver la página que establece como su "página fuera de línea" en la configuración de SuperPWA.
? Sobre nosotros
Somos un dúo que se entusiasmó con la idea. Nuestra misión es simple: ayudarlo a construir un PWA increíble que sus usuarios deseen tener en su pantalla de inicio. Cuando escuchamos por primera vez sobre PWA, queríamos aprender todo al respecto. Hemos pasado innumerables horas aprendiendo y queremos compartirlo con el mundo. Por favor, danos tus comentarios y apoyo constructivos.
Soporte
Este es un portal de desarrollador para aplicaciones web súper progresivas y no debe usarse para obtener soporte. Visite los foros de soporte.
? Informes de informes
Si alguna vez te quedas atascado, ¡estamos aquí para ver tu espalda! Abra un nuevo ticket de temas de soporte si tiene una pregunta o necesita una función. ¡Estamos muy emocionados de escuchar sus comentarios y queremos ayudarlo genuinamente a construir la mejor aplicación web progresiva para su sitio web de WordPress!
? Contribuciones
Cualquiera es bienvenido a contribuir a Super PWA para que sea Super.
Hay varias formas de contribuir:
- Plantear un problema en Github.
- Siga e interactúe con nosotros en las redes sociales
Compartir en Twitter
Compartir en Facebook
Compartir en LinkedIn
? Colegio de cambios
superpwa.com/changelog/.
Créditos de emoji: Emojipedia Credits de ícono de las redes sociales: Flaticon
⬆ De vuelta a la cima
