Super Progressive Web Apps

Descripción

Progressive Web Apps (PWA) es una nueva tecnología que combina lo mejor de la web móvil y lo mejor de las aplicaciones móviles para crear una experiencia web móvil superior. Se instalan en el teléfono como una aplicación normal (aplicación web) y se puede acceder a ellos desde la pantalla de inicio.

Página de inicio | Documentación | Ayuda | Características de la versión Premium

Los usuarios pueden volver a tu web iniciando la aplicación desde su pantalla de inicio e interactuar con tu sitio web a través de una interfaz similar a una aplicación. ¡Tus visitantes que regresen experimentarán tiempos de carga casi instantáneos y disfrutarán de las grandes ventajas de rendimiento de tu PWA!

¡Las aplicaciones Super Progressive Web te facilitan la conversión de tu web de WordPress en una aplicación web progresiva al instante!

Una vez que SuperPWA esté instalado, los usuarios que naveguen por tu web desde un dispositivo móvil compatible verán un aviso de «Añadir a la pantalla de inicio» (en la parte inferior de la pantalla) y podrán «instalar tu 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 desconectados!

SuperPWA es fácil de configurar, ¡toma menos de un minuto configurar tu aplicación web progresiva! SuperPWA realiza una desinstalación limpia, eliminando todas las entradas y archivos de la base de datos que crea. De hecho, ninguna de los ajustes por defecto se guarda en la base de datos hasta que las guardes manualmente la primera vez. Adelante y pruébalo.

¿Y la mejor parte? Si alguna vez te quedas atascado, ¡estamos aquí para proteger tu espalda! Abre un tique de soporte si tienes una pregunta o necesitas una característica. ¡Estamos muy emocionados de escuchar tus comentarios y queremos ayudarte genuinamente a construir la mejor aplicación web progresiva para tu web de WordPress!

¿Demostración rápida?

  • Abre SuperPWA.com en un dispositivo compatible.
  • Añade la web a tu pantalla de inicio, ya sea desde el mensaje Añadir a la pantalla de inicio (Chrome para Android) o desde el menú del navegador.
  • Abre la app desde tu pantalla de inicio y verás la pantalla de inicio.
  • Apaga tus datos y wifi para desconectarse y abrir la app. Aún podrás ver la aplicación y navegar por las páginas que ya has visitado.
  • Busca una página que no hayas visitado antes. Se mostrará la página sin conexión.

¡Gracias, entusiastas de la PWA!

Nos sentimos honrados por los comentarios de la comunidad. Gracias a todos los que creyeron en nosotros y probaron nuestro plugin. Sus comentarios han sido invaluables y hemos aprendido mucho de su experiencia. ¡Gracias por su cariño y apoyo y esperamos devolver el cariño esforzándonos por ofrecerte el mejor plugin de aplicaciones web progresivas para WordPress!

Qué hay en la caja

Estas son las características actuales de Super Progressive Web Apps:

  • Genera un manifiesto para tu web y añádelo al encabezado de tu web.
  • Establece el icono de la aplicación para tu aplicación web progresiva.
  • Establece el color de fondo de la pantalla de inicio de tu app web progresiva.
  • Tu web mostrará el aviso «Añadir a la pantalla de inicio» cuando se acceda a él en un navegador compatible.
  • Almacenamiento en caché agresivo de páginas utilizando CacheStorage API.
  • Una vez almacenadas en caché, las páginas se sirven incluso si el usuario está desconectado.
  • Establecer la página personalizada sin conexión: selecciona la página que deseas que el usuario vea cuando se accede a una página que no está en la memoria caché y el usuario está desconectado.
  • Nuevo en la versión 1.2: soporte para la meta propiedad de color de tema. Cambia el color de la barra de direcciones del navegador de Chrome, Firefox OS y Opera para que coincida con los colores de tu web.
  • Nuevo en la versión 1.2: ahora puedes editar el nombre de la aplicación y el nombre corto de la aplicación.
  • Nuevo en la versión 1.2: establece la página de inicio de tu PWA.
  • Nuevo en la versión 1.2: establecer la versión de Accelerated Mobile Pages (AMP) de la página de inicio. Plugins compatibles: AMP para WordPress, AMP para WP, Better AMP, AMP Supremacy, WP AMP.
  • Nuevo en la versión 1.3: soporte añadido para pantalla de bienvenida de alta calidad. Ahora puedes establecer el icono de 512×512 para la pantalla de inicio de tu aplicación web progresiva.
  • Nuevo en la versión 1.3: Super Progressive Web Apps ahora tienen en cuenta las actualizaciones de contenido y actualizarán la caché a medida que actualizas la web.
  • New in version 1.3: Improved in-browser service worker update handling.
  • New in version 1.4: You can now set the default orientation of your PWA. Choose from «any» (Follow Device Orientation), «Portrait» and «Landscape».
  • New in version 1.4: You can now set the theme_color property in the manifest.
  • Nuevo en la versión 1.5: integración OneSignal para notificaciones Push.
  • Nuevo en la versión 1.6: compatibilidad con red multi sitio de WordPress.
  • New in version 1.7: Add-Ons for SuperPWA is here! Ships with UTM Tracking Add-On to track visits coming from your PWA.
  • New in version 1.8: Compatibility issues with OneSignal are now resolved!
  • New in version 1.8: New Add-On: Apple Touch Icons that sets your app icons as Apple Touch Icons.
  • Nuevo en la versión 2.0: SuperPWA ahora es compatible con WordPress instalado en una subcarpeta.
  • Nuevo en la versión 2.0: ahora puedes establecerla propiedad de visualización desde los ajustes de SuperPWA.
  • Novedad en la versión 2.1.1: SuperPWA ahora es compatible con los Maskable Icons.
  • New in version 2.1.15: SuperPWA now supports Monochrome Icon.
  • Registro de cambios completo

Próximas características:

  • Aviso de indicador de desconectado.

PRO Version support additional advance feature
* Call To Action (CTA) More Info
* Android APK APP Generator More Info
* Data Analytics More Info
* Pre-Loader More Info
* App Shortcuts More Info
* QR Code Generator More Info

Requisitos mínimos de la app web progresiva

Las aplicaciones web progresivas requieren que tu web de WordPress se proporcione desde un origen seguro, es decir, tu web debe ser HTTPS y no HTTP. Si tu sitio web no es HTTPS, comunícate con el soporte del servidor. También puedes preguntanossi necesitas ayuda.

Compatibilidad con dispositivos y navegadores para PWA

Las aplicaciones web progresivas necesitan navegadores que admitan manifiestos y de servicios workers. 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 con la mayoría de los principales navegadores a finales de este año.

Cómo convertir tu web de WordPress en una aplicación web progresiva

WordPress Installation

  • Visit WordPress Admin > Plugins > Add New
  • Search for ‘Super Progressive Web Apps’
  • Click «Install Now» and then «Activate» Super Progressive Web Apps

To install manually:

  • Upload super-progressive-web-apps folder to the /wp-content/plugins/ directory on your server
  • Go to WordPress Admin > Plugins
  • Activate Super Progressive Web Apps plugin from the list.

Customizing Your Progressive Web App

Your Progressive Web App should be ready to test with the default settings on activation. You can customize it further and make it truly your own.

  • Go to WordPress Admin > SuperPWA
  • Set a Background Color for the splash screen to be shown when your PWA is opened on a mobile device.
  • Set the Application Icon. This will be the icon of your PWA when it is added to the homescreen in a mobile device. The icon must be a PNG image and exactly 192 x 192 pixels in size.
  • Set the Offline Page. This page will be displayed if the user is offline and the page he requested is not cached already. Ideally you should create a dedicated WordPress page and set it here. Within the page you create, you could add a note that reads, «It looks like you are offline and the page you requested is not available right now. Please check back again once you are online.».
  • Click «Save Settings».

Testing Your Progressive Web App

  • Open a supported browser in a supported device (for eg: Chrome for Android (62 or higher) in an Android Phone)
  • Enter your website and wait till it fully loads
  • You should see a pop-up that has your Application Icon and a button that reads «ADD TO HOME SCREEN».
  • Click on it and your PWA will be added to your home screen. Wait for the install to complete.
  • Go to your home screen and open your PWA. Browse into a few pages if you like. Close the App.
  • Disconnect from the internet and now open your PWA again. You should be able to see all the pages that you previously browsed.
  • Try visiting a page that you did not visit before. You should see the page you set as your «Offline Page» in the settings of SuperPWA.

Troubleshooting Your Progressive Web App

Uh, oh. Your PWA did not work as expected? You do not see the «Add to Home Screen» notice?

  • Make sure your website has a SSL certificate installed. i.e. your website should be https instead of http (as in https://your-domain.com).
  • Make sure you are using a supported device and a supported browser. Refer to the «Device and Browser Support For PWA» list above.
  • Make sure your Application Icon and Splash Screen Icon’s are of PNG format and 192px X 192px and 512px X 512px in size respectively.
  • Clear the browser cache and try again. In Chrome for Android, go to Settings > Privacy > «Clear browsing data».
  • If the application icon does not update after first install, delete the PWA from your phone, clear browser cache and install again. (We are working on making it better.)
  • Create a new support ticket and share a link to your website. We will take a look and figure it out for you.

Feature Requests, Issues, Pull Requests

Here is our repository on GitHub. Send us your pull requests, feature requests or issues, if any.

About us

We are a duo who got excited about the idea. Our mission is simple: Help you build an awesome PWA that your users would want to have on their home screen.

When we first heard about PWA we wanted to learn everything about it. We have spent countless hours learning and wants to share it with the world.

Please give us your constructive feedback and support.

Capturas

  • Settings page in WordPress Admin > SuperPWA > Settings

Instalación

To install this plugin:

  1. Install the plugin through the WordPress admin interface, or upload the plugin folder to /wp-content/plugins/ using FTP.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.
  3. Go to WordPress Admin > SuperPWA

FAQ

If you have any questions, please ask it on the support forum.

Will Progressive Web Apps work on iOS devices?

Starting with Safari for iOS 11.3, Apple devices offer partial support for PWA’s. However, there is no native Add To Home Screen prompt just yet. You can add your app by tapping «Add to Home Screen» button in the share menu of the browser ( look for the square icon with an up arrow in the foreground ).

Just like you, we are eagerly awaiting the upcoming releases and we hope to see better compatibility in the coming months.

How To Customize Splash Screen

You can easily change the icon and the background color in SuperPWA > Settings.

Further customizations are not available right now, not because of any limitation of SuperPWA, but because they are not available in the PWA technology. When more options come up in the future, we will add them to SuperPWA then.

How To Track Visits Originating From Your Progressive Web App

You can track visits from your PWA in your analytics software (for e.g. Google Analytics) using the UTM Tracking add-on of SuperPWA. Go to SuperPWA > Add-Ons and activate UTM Tracking. Then in SuperPWA > UTM Tracking, you can set the UTM parameters as needed. Please refer the documentation for further information.

GDPR Compliance

SuperPWA does not collect or store user data, nor does it set cookies or store tracking data. Content visited by users from your PWA is stored in the user’s own device, in the cache of the browser. This is very similar to how modern browsers caches content offline for faster browsing.

With the UTM Tracking Add-On, you will be able to differentiate the visits originating from your PWA in your analytics software. You may have to include this in your privacy policy. Please note that SuperPWA does not track the visits, we just help you add the UTM parameters to the URL of the Start Page of your app so that third party analytics tools can differentiate the visits.

Feel free to get in touch if you have any questions.

Reseñas

31 de mayo de 2024
I’d looked at PWA options for WordPress in the past and thought it was an interesting concept. I’d never had cause to use them until recently. I opted for SuperPWA due to good reviews. The set-up process is pretty straightforward and it pretty much worked ‘out of the box’. I did have one issue that related to maintaining the user logged in status. For this PWA, all users need to be logged in but we were finding that after a very short time, users were being logged out. The support was brilliant at helping to resolve this and within a few days, all was working as expected. Would highly recommend! I’m looking forward to using this for another website later in the year.
7 de mayo de 2024
instantify is much more better with lower price! this plugin not compatible with iphone devices and not shows add to home screen banner guide like instantify and very options that plugin has…
27 de marzo de 2024
I didn’t see that all of the reviews from the past year have been negative regarding the plug-in not working and the support being terrible. Exactly what I’ve been experiencing for weeks now. We’ve had over 35 emails back and forth to resolve what I’d think would be a simple issue. I’ve sent multiple screenshots of 1) the app icon CANNOT be changed 2) your CTA tool top says %ICON% which looks defunct 3) the tool tip doesn’t even show up. 4) you’re charging $99 a year for a defunct tooltip that can be made better and actually work for free. support is a nightmare. They keep saying it’s fine it works despite sending screenshots. Then they say well it works on chrome browser for android. But not for safari? Not for any other browser you advertise? Not for any other device? Someone please give me a better recommendation. I’ll be filing a chargeback since they refuse a refund.
12 de marzo de 2024
Der Service ist absolut TOP, hatte auf einer Webseite Probleme um Pushnachrichten zu empfangen, auf der anderen Webseite funktionierte es ohne Probleme. Hier kommt der perfekte Service, Sie haben sehr viel geleistet und getestet damit es am Schluss auch auf allen Webseiten funktioniert. Das war harte Arbeit und die Kommunikation war einfach freundlich und professionell. Ich danke dem Team von ganzen Herzen für diese Dienstleistung und ich kann es allen empfehlen diese Plugins zu installieren. Danke Danke Danke
5 de marzo de 2024
Purchases the pro version 10 months ago and extremely impressed with plugin capabilities and development. Hats off to the developers 🙏
Leer todas las 219 reseñas

Colaboradores y desarrolladores

«Super Progressive Web Apps» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Super Progressive Web Apps» está traducido en 12 idiomas. Gracias a los traductores por sus contribuciones.

Traduce «Super Progressive Web Apps» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

2.2.27

  • Date: 09.May.2024
  • Feature: Added compatibility with wp-multilang #514
  • Feature: Added compatibility with Polylang #437
  • Improvement: Apple touch Icons are not getting updated #521
  • BugFixed: The CTA cancel button is not working on both Desktop and Android devices. #523

2.2.26

  • Date: 25.April.2024
  • Feature: Added an option where users can exclude a particular page from the PWA. #429
  • Feature: Added all missing translation in SuperPwa pro extension #518
  • BugFixed: Pre-caching offline URLs is not working when we add the URLs one by one in next line. #505
  • Improvement: Change upgrade plan details page #513
  • BugFixed: CTA is not working on the iOS devices. #517

2.2.25

  • Date: 29.March.2024
  • Feature: Option to change this Text «You’re currently offline.» #493
  • Compatibility: Tested with WordPress 6.5 #510
  • Feature: Option to hide the navigation bar on certain pages (PRO) #511
  • Feature: Dynamic Start URL (PRO) #502
  • Feature: Option to generate PWA install QR code for any website link (PRO) #502
  • Improvement: Load CTA in body if footer is not present (PRO) #506
  • Enhancement: Improve the error message while creating an APK.(PRO) #494
  • BugFixed: APK logo and the splash screen icon logo are not showing properly.(PRO) #508

2.2.24.1

  • Date: 05.March.2024
  • BugFixed: Activating Pro version throwing Fatal error #501

2.2.24

  • Date: 17.February.2024
  • BugFixed: CTA on the frontpage is not showing. #499
  • Feature: Make the offline message “You are offline” as an option #482
  • Feature: Make the feature Prefetch manifest URL link as an option #496
  • Enhancement: Improvements to the app screenshot option. #495

2.2.23.1

  • Date: 24.December.2023
  • BugFixed: Parse error: syntax error, unexpected «)» in PHP 7.2 and below

2.2.23

  • Date: 22.December.2023
  • Feature: Proper sorting of features #314
  • Enhancement: Compatibility with loco translate #426
  • Enhancement: Updated manifest as per the pwabuilder recommendation. #440
  • Enhancement: Code Improvement checklist #486
  • Enhancement: Update readme.txt and add all pro feature list #488
  • BugFixed: Warning appearing in manifest #487
  • BugFixed: On Uninstall few data still remain inside db. #485

2.2.22

  • Date: 28.November.2023
  • BugFixed: Role Based Access is not working #472
  • BugFixed: Fixed Broken Access Control vulnerability Learn More

2.2.21

  • Date: 18.October.2023
  • BugFixed: Push notification is not working on IOS. #468
  • Feature: Added Notification badge on the PWA icon #212
  • BugFixed: Role Based Access is not working #472
  • BugFixed: If add-on is not activated than do not show the settings button #470
  • BugFixed: The button network deactivate is not working #475

2.2.20

  • Date: 26.September.2023
  • Feature: Added feature for Role managers #450
  • Feature: Added navigation Bar feature #443
  • BugFixed: DevTools Console Warning for Source Map 404 Error in Plugin #466
  • BugFixed: The push notification add-on keeps on installing. #465

2.2.19

2.2.18

  • Date: 15.July.2023
  • Feature: Added compatibility with WPML #438
  • Enhancement :fix php 8 error #332

2.2.17

  • Date: 30.May.2023
  • Enhancement :Need to create an option where the user can disable/enable the Add to Home Screens banner on desktop or tablet. #417
  • Enhancement :Need to make Start page dropdown with ajax search #412
  • BugFixed :Warning appears in all pages when we install pro version #421

Full changelog available at changelog.txt