template superpwa pwa app wordpress progressive-web-apps

superpwa - wordpress super pwa



Convertir el sitio web de WordPress a la aplicaciĆ³n web progresiva (3)

Estoy creando una aplicación web progresiva, pero hasta ahora hay muy poca documentación y soporte en línea. Estoy enumerando todas mis preguntas en este correo electrónico.

  1. ¿Cuál es la compatibilidad actual de Service Worker API (Modo sin conexión) para equipos de escritorio? Escribí una pequeña aplicación que funcionaba en modo fuera de línea para dispositivos móviles (Android-Chrome) pero no para mi escritorio (Chrome 42). Necesitamos configurar el entorno de desarrollo para esto, así que necesitamos saber qué necesitaremos para probar nuestras aplicaciones. No funciona incluso en IOS-Safari / Chrome.

  2. El trabajo de servicio usa cachés extensivamente y hay una manera muy buena de depurar o no las tareas internas del trabajador de servicio en Dekstop Chrome; pero si ejecuto mi aplicación en Mobile, ¿cómo eliminaría la caché de service worker?

  3. Si tengo una aplicación receptiva (un sitio de WordPress) y necesito convertirla en PWA; ¿Tendré que volver a escribir la aplicación con RestAPI para la versión móvil de nuevo? (Leer la aplicación Shell de PWA). En PWA, el shell de la aplicación está separado de los datos; sin embargo, en CMS, como WordPress, los datos no están separados de la interfaz de usuario.

He estado buscando estas respuestas por mucho tiempo y no he podido encontrar el soporte adecuado.


¿Cuál es la compatibilidad actual de Service Worker API (Modo sin conexión) para equipos de escritorio? Escribí una pequeña aplicación que funcionaba en modo fuera de línea para dispositivos móviles (Android-Chrome) pero no para mi escritorio (Chrome 42). Necesitamos configurar el entorno de desarrollo para esto, así que necesitamos saber qué necesitaremos para probar nuestras aplicaciones. No funciona incluso en IOS-Safari / Chrome.

Safari no admite trabajadores de servicio en este momento, pero debería funcionar en Chrome 42, aunque debes considerar actualizar tu navegador. De todos modos, puede consultar el estado del arte en una variedad de lugares:

Más sobre SW:

El trabajo de servicio usa cachés extensivamente y hay una manera muy buena de depurar o no las tareas internas del trabajador de servicio en Dekstop Chrome; pero si ejecuto mi aplicación en Mobile, ¿cómo eliminaría la caché de service worker?

Necesitas depurar Chrome para Android desde Desktop Chrome .

De todos modos, la URL chrome: // serviceworkers-internals está disponible en Chrome para Android, aunque no hay una manera fácil de borrar las cachés sin conexión.

Si tengo una aplicación receptiva (un sitio de WordPress) y necesito convertirla en PWA; ¿Tendré que volver a escribir la aplicación con RestAPI para la versión móvil de nuevo? (Leer la aplicación Shell de PWA). En PWA, el shell de la aplicación está separado de los datos; sin embargo, en CMS, como WordPress, los datos no están separados de la interfaz de usuario.

No. En realidad, WP tiene una arquitectura muy buena para desacoplar el contenido del tema. El problema es que se ejecuta en el servidor pero no necesita que su sitio se ejecute en el cliente para convertirse en un PWA. Mozilla es compatible con un conjunto de complementos de WP para ayudar a progresivizar sus instalaciones de WordPress:

  • Offline Shell [ github ] identifica sus recursos de shell (es decir, archivos de temas) y los almacena en caché en un caché sin conexión.
  • El contenido sin conexión [ github ] identifica su contenido dinámico y lo almacena en caché a medida que el usuario lo visita.
  • Web Push [ github ] le permite enviar notificaciones en tiempo real a sus lectores tan pronto como publique contenido nuevo.
  • Agregar a la pantalla de inicio [ github ] involucra a sus lectores al poner su WordPress en la pantalla de inicio.

Todos son complementos muy jóvenes, pero puedes seguirlos en GitHub y contribuir si lo deseas.


@Salva ya ha agregado una respuesta muy agradable y útil, pero pensé en permitirme agregar algunas cosas que podrían ser útiles.

Para la tercera parte, he trabajado en una plataforma de conversión de aplicación web progresiva automática, https://www.escalatingweb.com . Creo que puedes usar esta plataforma para convertir tu aplicación web en WordPress en una aplicación web progresiva. Puedes usarlo para convertir tu aplicación web en pwa en minutos. También he escrito un tutorial muy bueno para usar la plataforma de conversión automática de pwa http://www.techromance.com/2017/07/22/automatic-pwa-converter-platform/ .

Para la segunda parte, solo para agregar a la respuesta anterior, y para fines de prueba, puede eliminar toda la memoria caché para un sitio web en particular de la configuración del sitio, lo que también borrará la memoria caché del trabajador de servicios.

Para la primera parte, nada que añadir como tal.

PD: Por favor, nadie se ofenda en caso de que lo encuentren como una forma barata de promocionar mi plataforma. La intención es simplemente ayudar a la comunidad, ya sea construyendo la plataforma o haciéndola saber a la audiencia necesaria. Gracias @McNab por la sugerencia. :)


También estoy usando un sitio de Wordpress y hay un complemento que puede resolver su problema. En lugar de instalar muchos plugins de Mozilla, puedes instalar el plugin Super Progressive Web Apps (buscarlo en plugin install), funciona perfectamente. Probé tanto en el teléfono Android como en IOS https://wordpress.org/plugins/super-progressive-web-apps/