Transforma tu sitio WordPress en una PWA

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.

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

October 08, 2019
Tweet

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