Transforma tu sitio WordPress en una PWA

Hay muchos proyectos que requieren del desarrollo de una página web y de una app. Pero, en la práctica, muchas veces esta app se trata de una réplica de la web tanto en contenido como en estructura de la información.
Si además no hay presupuesto suficiente para desarrollar una app nativa, tenemos el escenario perfecto para crear una PWA (Progressive Web App). Y mejor aún, si tu web está desarrollada utilizando WordPress, la adaptación es realmente sencilla, como verás en este taller.

Transcript

1. Transforma tu sitio WordPress en una PWA
2. HELLO, AQUÍ IMANOL Desarrollador Web, Consultor y Formador IT @itermar / imanol@itermar.io ♂
3. SI DUDAS, HÁZLO Podcast sobre emprendimiento, desarrollo web, productividad y marketing online https://itermar.io/podcast Apple Podcasts · Spotify · iVoox
4. ACADEMIA DE PRODUCTIVIDAD Gestión de tareas · Gestión de tiempo · Productividad https://academiadeproductividad.com ⚡
5. características de las PWA ÍNDICE introducción cómo pasar de WordPress a PWA 01 02 03 04 Práctica
6. Definición, ventajas, características... INTRODUCCIÓN 01
7. INTRODUCCIÓN A la de hora de plantear el desarrollo de una app, tenemos dos opciones • App nativa • Webapp
8. INTRODUCCIÓN Apps nativas • iOS y Android • Desarrolladas con APIs de Google y Apple • IDE de desarrollo: XCode, Android Studio • Lenguajes de desarrollo: Swift, Java, JavaScript…
9. INTRODUCCIÓN Apps nativas • Sujetas a actualizaciones de sistema • Usuarios descargan desde Google Play o App Store • Nuestras actualizaciones tienen que ser aprobadas por equipos de revisión • Hay que desarrollar una para cada SO, de forma independiente
10. INTRODUCCIÓN Apps nativas • Aprovechan al 100% las capacidades del dispositivo • Rendimiento muy optimizado • Look & Feel igual al del sistema, totalmente integrado con las apps propias del mismo
11. INTRODUCCIÓN Apps nativas • Hay que seguir guías de estilo de cada plataforma a la hora de diseñar la app ◦ iOS Human Interface Guidelines ◦ Android Design Guidelines • Necesitamos muchos perfiles con capacitaciones específicas en diseño y desarrollo • Altos costes en presupuesto • Tiempos de ejecución de proyecto altos
12. INTRODUCCIÓN WEBAPPS • Hay otra vía, que es la de aprovechar nuestros conocimientos en desarrollo web • Podemos construir apps de la misma forma que nuestras páginas web • Lenguajes: HTML, CSS, JavaScript
13. INTRODUCCIÓN WEBAPPS • Estas apps se ejecutan en el navegador • No dependemos de ningún sistema operativo • No hay que instalar nada • Actualizaciones instantáneas • Ejemplo: Twitter
14. INTRODUCCIÓN WEBAPPS • Cualquier web que ejecute alguna funcionalidad al usuario, puede considerarse una aplicación web • Existe debate de en qué punto una web deja de ser una simple web y pasa a ser una aplicación web.
15. INTRODUCCIÓN PWA • Solución intermedia entre app nativa y webapp • Básicamente es una página web multivitaminada
16. “Las Progressive Web Applications o PWA (Abreviación de su significado), son la evolución de las páginas webs hacia un ecosistema tecnológico más cercano al de una aplicación móvil o de escritorio instalable en el sistema operativo.” —WIKIPEDIA
17. “Las Progressive Web Apps proporcionan un instalable, experiencia de aplicación como en ordenadores de escritorio y móviles que se crean y entregan directamente a través de la web. Son aplicaciones web que son rápidas y confiables. Y lo más importante, son aplicaciones web que funcionan en cualquier navegador. Si estás creando una aplicación web hoy, ya estás en el camino hacia la creación de una Progressive Web App.” —google
18. INTRODUCCIÓN PWA • Es una metodología que consiste en la mejora progresiva de una web, para conseguir aproximarla lo máximo posible a una app nativa. • Se trata de un conjunto de herramientas. • No es necesario aplicarlas todas juntas
19. INTRODUCCIÓN PWA • Es relativamente cómodo llegar a este punto, ya que podemos acometer esa “transformación” de web a app, mediante pequeños pasos, de forma progresiva • De hecho, estas metodologías y buenas prácticas, también van a derivar en la mejora general y optimización de nuestra página web
20. INTRODUCCIÓN PWA • Las PWA están fomentadas por Google • Por norma, todo lo que Google fomenta o recomienda, es premiado a la hora de posicionar • Por eso, seguir las recomendaciones de las PWA mejorarán nuestra web en su conjunto
21. INTRODUCCIÓN • Debemos proporcionar a nuestra web de un fichero “Manifest Web App” ➡ Más información
22. INTRODUCCIÓN • Debemos proporcionar a nuestra web de un fichero “Manifest Web App” ➡ Más información (Google) ➡ Más información (Mozilla) • Implementar Service Workers ➡ Más información
23. INTRODUCCIÓN Manifest • Fichero json que enlazamos desde todas las páginas de nuestra web <link rel=”manifest” href=”/manifest.json”> • Le añade la información de metadatos a navegador y SO para poder agregar la web como una app más a la homescreen del móvil
24. INTRODUCCIÓN Manifest { "name": "Google I/O 2015", "short_name": "I/O 2015", "start_url": "./?utm_source=web_app_manifest", "display": "standalone", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, "related_applications": [{ "platform": "web" }, { "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched" }] }
25. INTRODUCCIÓN Manifest Mediante este documento indicamos: • Nombre de la aplicación • Iconos en varios tamaños • Color de splash screen ◦ Fondo, icono y nombre largo
26. INTRODUCCIÓN Service Workers • Es un fichero JavaScript • Nos permite “interactuar” con el usuario aunque la web no está abierta o no tiene conexión • Actualizaciones en segundo plano, notificaciones...etc
27. INTRODUCCIÓN Service Workers • Como no todos los navegadores soportan las mismas funcionalidades, es recomendable estar al día de las posibilidades que tenemos con cada uno de ellos ◦ https://jakearchibald.github.io/isserviceworkerready/ • Chrome va en cabeza, Edge a la cola y Safari y Firefox brindan un buen soporte
28. INTRODUCCIÓN Ejemplos https://pwa.rocks
29. De las PWAs CARACTERÍSTICAS 02
30. CARACTERÍSTICAS • Instalable • Actualizaciones automáticas • Accesible sin conexión • Notificaciones Push • Ejecución en segundo plano • Acceso a geolocalización del usuario • Acceso a elementos de dispositivo (cámara, micrófono...)
31. CARACTERÍSTICAS • Distintos modos de visualización • Posibilidad de bloquear la orientación de la pantalla
32. CARACTERÍSTICAS Modos de visualización • Aplicación independiente
33. CARACTERÍSTICAS Modos de visualización • Pantalla completa
34. CARACTERÍSTICAS Modos de visualización • Interfaz de usuario mínima
35. CARACTERÍSTICAS Modos de visualización • Vista navegador
36. CARACTERÍSTICAS iOS • Con la última versión del SO, iOS 13, ha mejorado mucho el soporte para PWAs. • Aún así, todavía hay carencias con respecto a Chrome en Android
37. CARACTERÍSTICAS iOS Capacidades de PWA en iOS • Geolocalización • Sensores (Acelerómetro, giroscopio....) • Cámara • Salida de audio • Apple Pay
38. CARACTERÍSTICAS iOS Carencias de PWA en iOS • Puede almacenar hasta 50Mb de datos offline • Si la app no se usa en unas semanas, los datos almacenados se borran, teniendo que volver al descargarse al cargar la web de nuevo (icono app permanece) • No hay acceso a Bluetooth, Face ID, Touch ID, ARKit, Beacons...
39. CARACTERÍSTICAS iOS Carencias de PWA en iOS • No puede ejecutar código en segundo plano • En iPad, no puede hacer uso de pantalla partida con otra app • Sin notificaciones push • No se pueden aprovechar todos los modos de visualización
40. CARACTERÍSTICAS iOS Carencias de PWA en iOS • No acepta fondos transparentes para los iconos, por lo que hay que tenerlo en cuenta. • No coge el icono desde el Web App Manifest, sino desde el enlace apple-touch-icon-link ◦ Si no se lo proporcionamos, cogerá una captura de pantalla de la app
41. CARACTERÍSTICAS A tener en cuenta • Las PWA no guardan estados entre sesiones • Si el usuario sale de la PWA, al volver, será como si entrara por primera vez ◦ Tener en cuenta si necesitamos que usuario valide con email antes de entrar.
42. CARACTERÍSTICAS iOS vs Android En qué gana Android VS iOS • En Android puedes almacenar más de 50 Mb • Android no elimina archivos si no usas la app • Acceso Bluetooth para dispositivos BLE • Acceso a menú nativo de compartir • Reconocimiento de voz
43. CARACTERÍSTICAS iOS vs Android En qué gana Android VS iOS • Sincronización en 2º plano • Web Push Notifications • Banner para invitar a instalar la app • Personalización de la splash screen
44. CARACTERÍSTICAS iOS vs Android En qué gana iOS VS Android • Usuario puede cambiar nombre de la app antes de instalar • Se pueden configurar en un perfil de configuración, de modo que los usuarios corporativos pueden recibir atajos de las empresas
45. INSTALACIÓN
46. CARACTERÍSTICAS INSTALACIÓN • Al abrir una PWA en Chrome de Android, el propio sistema te solicita que añadas la app al Home screen.
47. CARACTERÍSTICAS INSTALACIÓN • Una de las mayores pegas en iOS es que el sistema no nos “anima” a instalar la PWA como una app. • Safari no tiene esa capacidad • En Android se conocen como “Web App Banners” • Usuario tiene que hacerlo de forma consciente y manual • Nada le indica que esa web es una PWA
48. CARACTERÍSTICAS INSTALACIÓN • Por tanto, en iOS, tenemos que darle al menú “Compartir / Añadir a Pantalla de Inicio”
49. CARACTERÍSTICAS INSTALACIÓN • Peor está el tema con Chrome, Firefox, Brave, Edge...o cualquier otro navegador para iOS. • Por restricción de Apple, todos están basados en el mismo motor, WebKit. • Y no se puede instalar una PWA o utilizar Service Workers desde ninguno de esos navegadores. • Por tanto, estamos limitados a Safari
50. CARACTERÍSTICAS INSTALACIÓN • Veremos alguna solución para poder facilitar la instalación en iOS por parte del usuario. • Una vez instalada, tanto en iOS como en Android, la PWA aparecerá como una app más en nuestra pantalla, con su icono y nombre. • Al abrirla, cargará con pantalla de inicio y sin las barras de navegador.
51. CARACTERÍSTICAS INSTALACIÓN • Si utilizamos Chrome como navegador, también podemos disfrutar de las PWA en Windows y macOS, aunque están más enfocadas a dispositivos móviles.
52. CARACTERÍSTICAS INSTALACIÓN
53. CARACTERÍSTICAS RENDIMIENTO • Google nos proporciona un checklist para que podamos crear la mejor experiencia posible con nuestras PWA ◦ https://developers.google.com/web/progressive-web -apps/checklist ◦ Es una buena base sobre la que empezar a trabajar en esa adaptación progresiva de nuestra web a app • También una app de prueba ◦ https://airhorner.com/
54. CARACTERÍSTICAS RENDIMIENTO • Web confiable ➡ Certificado SSL • Web confiable ➡ Responsive Web Design • Web rápida ➡ Carga de elementos offline (caché) • Web rápida ➡ Actualización en 2º plano (solo algunos browsers) • Web con poder de captación ➡ Posibilidad de instalar
55. CARACTERÍSTICAS RENDIMIENTO • Hay propiedades que son más difíciles de trabajar que otras • Hay que centrarse en las que más beneficien el rendimiento y objetivo de nuestra web/app, al menor coste
56. CARACTERÍSTICAS RENDIMIENTO • Los navegadores nos proporcionan herramientas para comprobar el rendimiento y analizar todas las características de las PWA • En este caso, Chrome es el navegador más completo
57. CARACTERÍSTICAS RENDIMIENTO • Lleva integrado Lighthouse, que además de servir para medir y optimizar nuestra web, lleva una parte concreta de auditoría PWA • Para versiones anteriores de Chrome, hay que instalar una extensión
58. CARACTERÍSTICAS RENDIMIENTO • Lleva integrado Lighthouse, que además de servir para medir y optimizar nuestra web, lleva una parte concreta de auditoría PWA • Para versiones anteriores de Chrome, hay que instalar una extensión
59. De WordPress a PWA CÓMO PASAR 03
60. HOW-TO PLUGIN • En muchos proyectos, el cliente solicita el desarrollo de una app • No siempre existe el presupuesto ni la necesidad de desarrollar una app nativa • Habrá muchas ocasiones en las que el contenido se repite
61. HOW-TO PLUGIN • Aquí, tiene mucho sentido aprovechar la estructura e información de nuestra web, y transformarla en app para aquellos casos que sea necesario • Las PWA son una gran opción para ello
62. HOW-TO PLUGIN • Seguramente, en muchos proyectos partiremos de una web creada en WordPress
63. 34,7% De las páginas web actuales están hechas en WordPress https://w3techs.com/technologies/history_overview/content_management/all
64. HOW-TO PLUGIN • Como para casi todo en WordPress, existen plugins que nos facilitan mucho la tarea de crear una PWA • Nos olvidamos de los Service Workers, manifest...etc • El plugin se encarga de todo con una pequeña configuración por nuestra parte
65. HOW-TO PLUGIN Lo más cómodo es hacerlo mediante un plugin: • https://superpwa.com
66. HOW-TO PLUGIN • Convierte tu web en una PWA de forma automática ◦ Manifest ◦ Service Worker * Web tiene que estar bajo HTTPS
67. HOW-TO PLUGIN • Para que en iOS el sistema alerte al usuario de que puede añadir la web como una app, hay que instalar un plugin, ya que a diferencia de Android, no lo hace por sí mismo: ◦ https://wordpress.org/plugins/add-to-home-screen- wp/
68. NOTIFICACIONES
69. HOW-TO PLUGIN • Envío de Web Push Notifications al usuario ◦ Al realizar una acción ◦ Al suscribirse para recibir notificaciones en cualquier momento ▪ Complejo de implementar
70. HOW-TO NOTIFICACIONES Lo mejor es hacerlo mediante un servicio externo • OneSignal ◦ https://app.onesignal.com • En WordPress se puede implementar mediante un plugin ◦ https://es.wordpress.org/plugins/onesignal-free-we b-push-notifications/ ◦ https://es.wordpress.org/plugins/onesignal-sender/
71. HOW-TO NOTIFICACIONES ◦ Recordar que Safari en iOS, no lo soporta ◦ Compatible con ▪ Safari macOS ▪ Chrome Android ▪ Escritorio • Chrome • Opera • Firefox • Edge https://documentation.onesignal.com/docs/web-push-overview#section-pla tform-support
72. Convertir una web hecha en WordPress a PWA PRÁCTICA 04
73. PRÁCTICA • Acceder o crear web en WordPress • Instalar plugin SuperPWA ◦ Crear icono de la aplicación • Configurar plugin • Pruebas de rendimiento en Chrome ◦ Con Auditoría Lighthouse • Mejoras y pruebas en distintos navegadores y SO
74. Más información • https://developer.mozilla.org/es/docs/Web/Progressive _web_apps • https://developers.google.com/web/fundamentals/cod elabs/your-first-pwapp/?hl=es
75. ESKERRIK ASKO! ¿Any Questions? @itermar / imanol@itermar.io / https://itermar.io