{"id":6423,"date":"2024-04-30T01:40:46","date_gmt":"2024-04-30T01:40:46","guid":{"rendered":"https:\/\/neoattack.com\/blog\/?p=6423"},"modified":"2026-10-09T11:28:32","modified_gmt":"2026-10-09T09:28:32","slug":"progressive-web-app","status":"publish","type":"post","link":"https:\/\/neoattack.com\/blog\/progressive-web-app\/","title":{"rendered":"C\u00f3mo crear una Progressive Web App"},"content":{"rendered":"<p style=\"text-align: justify;\">Las <strong>Progressive Web Apps<\/strong> (PWA) son aplicaciones web que ofrecen una experiencia similar a las aplicaciones nativas a los usuarios, combinando la funcionalidad de las apps nativas con la accesibilidad de las aplicaciones web. En NeoAttack, como <a href=\"https:\/\/neoattack.com\/\">agencia de marketing digital<\/a>, queremos profundizar en este tipo de aplicaciones para que conozcas todo lo que pueden ofrecer a tu empresa. \u00bfEst\u00e1s preparado? \u00a1Empezamos!<\/p>\n<h2>\u00bfQu\u00e9 es una Progressive Web App?<\/h2>\n<p style=\"text-align: justify;\">Las <strong>Progressive Web Apps (PWA)<\/strong> son aplicaciones web que brindan una experiencia similar a las aplicaciones m\u00f3viles nativas. Est\u00e1n construidas utilizando tecnolog\u00edas web comunes como HTML, CSS y JavaScript. Una de las caracter\u00edsticas distintivas de las PWA es su capacidad para funcionar sin conexi\u00f3n o con conexiones de red deficientes, gracias al uso de trabajadores de servicio. Adem\u00e1s, estas aplicaciones pueden enviar notificaciones push y acceder al hardware del dispositivo, como la c\u00e1mara.<\/p>\n<h2>\u00bfQu\u00e9 ofrecen las Progressive Web Apps?<\/h2>\n<p style=\"text-align: justify;\">Proporcionan caracter\u00edsticas como acceso sin conexi\u00f3n, notificaciones push y acceso a la c\u00e1mara del dispositivo, lo que las convierte en una <strong>soluci\u00f3n escalable y efectiva tanto para desarrolladores como para usuarios<\/strong>. Esta amalgama de tecnolog\u00edas web y caracter\u00edsticas de aplicaciones nativas permite que las PWAs sean instaladas y utilizadas como apps nativas, ofreciendo capacidades mejoradas, confiabilidad e instalabilidad, lo que las convierte en una opci\u00f3n atractiva en el paisaje digital actual.<\/p>\n<p style=\"text-align: justify;\">Adem\u00e1s, las PWAs aprovechan las ventajas sobre las aplicaciones nativas en t\u00e9rminos de accesibilidad, distribuci\u00f3n, reducci\u00f3n de costos y confiabilidad. Utilizan t\u00e9cnicas de desarrollo web modernas con patrones y APIs est\u00e1ndar, permitiendo una <strong>experiencia de usuario fluida y alta <em>performance<\/em><\/strong> tanto en dispositivos m\u00f3viles como de escritorio.<\/p>\n<p style=\"text-align: justify;\">Estas aplicaciones est\u00e1n dise\u00f1adas para ser <strong>f\u00e1cilmente encontradas a trav\u00e9s de motores de b\u00fasqueda<\/strong>, instalables directamente en la pantalla de inicio o lanzador de aplicaciones del dispositivo, funcionales sin conexi\u00f3n a internet o con conectividad de red deficiente, y capaces de enviar notificaciones sobre contenido nuevo, lo que mejora significativamente la experiencia del usuario y el compromiso con la aplicaci\u00f3n.<\/p>\n<p style=\"text-align: center;\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-71430\" src=\"https:\/\/neoattack.com\/wp-content\/uploads\/2024\/05\/pwa-caracteristicas-scaled.jpg\" alt=\"pwa-caracteristicas\" width=\"2560\" height=\"1707\" \/><\/p>\n<h2>Caracter\u00edsticas clave de las PWA<\/h2>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>Instalabilidad<\/strong>: Las PWA se pueden instalar en la pantalla de inicio del usuario sin necesidad de una tienda de aplicaciones, permitiendo un acceso r\u00e1pido y directo.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Progresividad<\/strong>: Funcionan en cualquier dispositivo y su funcionalidad se mejora progresivamente seg\u00fan las capacidades del dispositivo del usuario.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Conectividad independiente<\/strong>: Capaces de operar offline o en redes de baja calidad gracias a los trabajadores de servicio, que habilitan la cach\u00e9 y tareas en segundo plano.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Seguridad<\/strong>: Utilizan HTTPS para asegurar la transmisi\u00f3n de datos.<\/li>\n<\/ul>\n<h2>Criterios de una Progressive Web App<\/h2>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\">Debe ser responsiva y adaptarse a cualquier tama\u00f1o de pantalla.<\/li>\n<li style=\"margin-bottom: 10px;\">Capacidad de trabajar offline o en redes de baja calidad.<\/li>\n<li style=\"margin-bottom: 10px;\">Contar con un manifiesto de aplicaci\u00f3n web que incluya metadatos como nombre, icono y color del tema.<\/li>\n<li style=\"margin-bottom: 10px;\">Utilizar un trabajador de servicio para habilitar la cach\u00e9 y tareas en segundo plano.<\/li>\n<li style=\"margin-bottom: 10px;\">Soportar notificaciones <em>push <\/em>y otras caracter\u00edsticas del dispositivo.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Estas aplicaciones no solo son eficientes y seguras, sino que tambi\u00e9n son f\u00e1ciles de encontrar por motores de b\u00fasqueda y pueden ser compartidas f\u00e1cilmente mediante URL, sin instalaciones complejas.<\/p>\n<h2>Requisitos previos para crear una PWA<\/h2>\n<p style=\"text-align: justify;\">Para <strong>desarrollar una Progressive Web App exitosa<\/strong>, es fundamental contar con ciertos conocimientos y herramientas. A continuaci\u00f3n, se detallan los requisitos previos necesarios:<\/p>\n<h3>Conocimientos B\u00e1sicos en Tecnolog\u00edas Web<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><strong>HTML<\/strong>: Necesario para estructurar el contenido de la web app.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>CSS<\/strong>: Esencial para dise\u00f1ar y estilizar la interfaz de usuario.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>JavaScript<\/strong>: Imprescindible para agregar interactividad y manejar la l\u00f3gica de la aplicaci\u00f3n.<\/li>\n<\/ol>\n<h3>Herramientas y configuraciones esenciales<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>Manifiesto de la aplicaci\u00f3n web<\/strong>: Crea un archivo <em>json<\/em> en el directorio del proyecto que especifique el nombre, icono, autor, y URL de inicio de la PWA.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Service Worker<\/strong>: Implementa un archivo <em>service-worker.js<\/em> para gestionar la cach\u00e9 y permitir la funcionalidad offline.<\/li>\n<\/ul>\n<h3>Tecnolog\u00edas de almacenamiento y cach\u00e9<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>Cache API<\/strong>: Utilizada para almacenar recursos que se requieren para que la PWA funcione offline.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>IndexedDB\/WebSQL<\/strong>: Para almacenamiento de datos en el cliente.<\/li>\n<\/ul>\n<h3>Dise\u00f1o <em>responsive<\/em><\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>OneUI CSS Library<\/strong>: Recomendada para asegurar que la PWA se vea bien en cualquier dispositivo.<\/li>\n<\/ul>\n<h3>Instalabilidad<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>Archivos espec\u00edficos<\/strong>: Incluye icon512.png y registra el service worker en el archivo index.html para hacer la PWA instalable.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Estos componentes no solo son cruciales para el <strong>funcionamiento t\u00e9cnico de una PWA<\/strong>, sino que tambi\u00e9n aseguran una experiencia de usuario coherente y eficiente en diferentes dispositivos y condiciones de red.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-71432\" src=\"https:\/\/neoattack.com\/wp-content\/uploads\/2024\/05\/wpa-creacion-scaled.jpg\" alt=\"wpa-creacion\" width=\"2560\" height=\"1709\" \/><\/p>\n<h2>Crear paso a paso una PWA<\/h2>\n<p>Te indicamos el procedimiento para crear una PWA:<\/p>\n<h3>Configuraci\u00f3n del entorno de desarrollo<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><strong>Prepara el entorno de desarrollo<\/strong> utilizando una herramienta de codificaci\u00f3n en l\u00ednea como Glitch.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Establece un servidor web<\/strong> local utilizando la biblioteca http-server de Node.js.<\/li>\n<\/ol>\n<h3>Creaci\u00f3n de la estructura b\u00e1sica<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><strong>Crea la p\u00e1gina de inicio<\/strong> de la aplicaci\u00f3n (index.html) utilizando HTML b\u00e1sico, incluyendo una barra de navegaci\u00f3n y un contenedor para futuras adiciones.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>A\u00f1ade estilos<\/strong> utilizando CSS para fuentes personalizadas, estilos de reinicio y ajustes de dise\u00f1o. Aseg\u00farate de que la barra de navegaci\u00f3n est\u00e9 alineada a la izquierda y a la derecha, y que el contenedor use un dise\u00f1o de cuadr\u00edcula.<\/li>\n<\/ol>\n<h3>Implementaci\u00f3n de funcionalidades con JavaScript<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\">Utiliza JavaScript para <strong>agregar datos a la aplicaci\u00f3n web<\/strong>, como nombres e im\u00e1genes.<\/li>\n<li style=\"margin-bottom: 10px;\">Implementa la funci\u00f3n showCoffees para <strong>mostrar los datos<\/strong> del caf\u00e9 en el contenedor.<\/li>\n<\/ul>\n<h3>Configuraci\u00f3n de la manifestaci\u00f3n y el service worker<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>A\u00f1ade un archivo de manifiesto<\/strong> de aplicaci\u00f3n web (manifest.json) con detalles de la aplicaci\u00f3n e iconos.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Registra un service worker<\/strong> para habilitar la funcionalidad sin conexi\u00f3n.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Configura el service worker<\/strong> para que almacene activos est\u00e1ticos durante el evento de instalaci\u00f3n utilizando m\u00e9todos como caches.open() y cache.addAll().<\/li>\n<li style=\"margin-bottom: 10px;\">Aseg\u00farate de <strong>que el service worker escuche eventos de b\u00fasqueda<\/strong> y responda con datos almacenados en cach\u00e9 si est\u00e1n disponibles.<\/li>\n<\/ul>\n<h3>Pruebas y validaci\u00f3n<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>Prueba la PWA en Microsoft Edge<\/strong> con <a href=\"https:\/\/developer.chrome.com\/docs\/devtools?hl=es-419\">DevTools<\/a> para asegurar un comportamiento correcto de almacenamiento en cach\u00e9 y funcionamiento sin conexi\u00f3n.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Instala localmente la PWA<\/strong> en Microsoft Edge actualizando la aplicaci\u00f3n y haciendo clic en &#8216;Instalar&#8217;.<\/li>\n<\/ul>\n<h3>Requisitos espec\u00edficos del navegador<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\">Verifica que Google Chrome requiere que un sitio sea visitado dos veces con un intervalo de cinco minutos, una conexi\u00f3n segura HTTPS, un manifiesto JSON v\u00e1lido y un Service Worker para <strong>considerar una aplicaci\u00f3n como PWA<\/strong>.<\/li>\n<li style=\"margin-bottom: 10px;\">Aseg\u00farate de que la <strong>conexi\u00f3n HTTPS<\/strong> est\u00e9 establecida para garantizar seguridad y confianza del usuario, adem\u00e1s de proporcionar un ligero beneficio de SEO.<\/li>\n<\/ul>\n<h3>Dise\u00f1o responsivo y accesibilidad<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\"><strong>Implementa One UI web<\/strong> para asegurar que la PWA se vea bien en cualquier dispositivo.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Dise\u00f1a una p\u00e1gina offline personalizada<\/strong> y asegura que la PWA sea instalable para una experiencia de usuario consistente cuando la aplicaci\u00f3n est\u00e9 offline o no conectada a internet.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-71433\" src=\"https:\/\/neoattack.com\/wp-content\/uploads\/2024\/05\/wpa-herramientas-scaled.jpg\" alt=\"progressive web app\" width=\"2560\" height=\"1709\" \/><\/p>\n<h2>Herramientas y tecnolog\u00edas para el desarrollo de PWA<\/h2>\n<p style=\"text-align: justify;\">Para el <strong>desarrollo eficiente de una Progressive Web App<\/strong>, es crucial seleccionar las herramientas y tecnolog\u00edas adecuadas. A continuaci\u00f3n, te presentamos una lista de recursos recomendados para facilitar este proceso:<\/p>\n<h3>PWA Builder y Super PWA<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><a href=\"https:\/\/www.pwabuilder.com\/\"><strong>PWA Builder<\/strong><\/a>: Desarrollado por Microsoft, esta herramienta en l\u00ednea facilita la creaci\u00f3n de PWAs al proporcionar los archivos necesarios como el manifiesto y el service worker para el acceso offline a partir de una URL proporcionada por el usuario.<\/li>\n<li style=\"margin-bottom: 10px;\"><a href=\"https:\/\/www.pwabuilder.com\/\"><strong>Super PWA<\/strong><\/a>: Ideal para sitios de WordPress, permite convertir un sitio en una PWA habilitando caracter\u00edsticas como acceso offline y atajos tipo app.<\/li>\n<\/ol>\n<h3>Frameworks y bibliotecas:<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><strong>Angular y React PWA<\/strong>: <a href=\"https:\/\/angular.dev\/\">Angular<\/a> es un framework que requiere conocimiento de TypeScript y es \u00fatil para desarrollar proyectos web, incluyendo PWAs. <strong>React PWA<\/strong>, por otro lado, es una biblioteca de JavaScript compatible con React Native, facilitando la conversi\u00f3n a aplicaciones nativas y es utilizada por empresas como Facebook e Instagram.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Vue<\/strong>: <a href=\"https:\/\/vuejs.org\/\">Vuejs.org<\/a> es un framework de c\u00f3digo abierto que simplifica la conversi\u00f3n de sitios web en PWAs, permitiendo a los usuarios codificar en su lenguaje preferido.<\/li>\n<\/ol>\n<h3>Herramientas de optimizaci\u00f3n y pruebas<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><a href=\"https:\/\/webpack.js.org\/\"><strong>Webpack<\/strong><\/a>: Herramienta \u00fatil para agrupar recursos de aplicaciones JavaScript, tratando activos no codificados como objetos de JavaScript, lo que permite una carga m\u00e1s r\u00e1pida.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Lighthouse y Workbox<\/strong>: <a href=\"https:\/\/chromewebstore.google.com\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=es&amp;pli=1\">Lighthouse<\/a> es una herramienta de c\u00f3digo abierto que audita p\u00e1ginas web en t\u00e9rminos de rendimiento y SEO, con un enfoque especial en PWAs. <a href=\"https:\/\/developer.chrome.com\/docs\/workbox?hl=es-419\">Workbox<\/a> facilita la creaci\u00f3n y gesti\u00f3n del service worker, mejorando la funcionalidad offline y las notificaciones push.<\/li>\n<li style=\"margin-bottom: 10px;\"><a href=\"https:\/\/pptr.dev\/\"><strong>Puppeteer<\/strong><\/a>: Biblioteca de Node que ofrece una API de alto nivel para controlar Chrome o Chromium, \u00fatil para automatizar pruebas de PWAs simulando diferentes condiciones de red y dispositivos.<\/li>\n<\/ol>\n<h3>Recursos adicionales<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\"><strong>AngularJS y GitHub<\/strong>: <a href=\"https:\/\/angularjs.org\/\">AngularJS<\/a> ofrece extensos tutoriales y recursos para aprender su uso, soportando el desarrollo tanto m\u00f3vil como de escritorio. <a href=\"https:\/\/github.com\/\">GitHub<\/a> sirve como una plataforma comunitaria para alojar repositorios de proyectos, incluyendo aquellos relacionados con service workers de JavaScript para PWAs.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Knockout<\/strong>: Herramienta de c\u00f3digo abierto que facilita la codificaci\u00f3n de interfaces utilizando el patr\u00f3n Model-View-ViewModel (MVVM), permitiendo vinculaciones declarativas entre el modelo y la vista.<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-71431\" src=\"https:\/\/neoattack.com\/wp-content\/uploads\/2024\/05\/pwa-pruebas-scaled.jpg\" alt=\"pwa-pruebas\" width=\"529\" height=\"700\" \/><\/p>\n<h2>Pruebas y despliegue de tu PWA<\/h2>\n<p style=\"text-align: justify;\">Para asegurar que los <strong>manejadores de protocolo en tu Progressive Web App<\/strong> funcionen correctamente, es esencial realizar pruebas utilizando las herramientas adecuadas. Microsoft Edge DevTools proporciona una plataforma robusta para esta tarea. A continuaci\u00f3n, se detallan los pasos para probar los manejadores de protocolo en una PWA:<\/p>\n<h3>Instalaci\u00f3n de la PWA y acceso a DevTools:<\/h3>\n<ul style=\"text-align: justify;\">\n<li style=\"margin-bottom: 10px;\">Aseg\u00farate de que la PWA est\u00e9 instalada en tu navegador.<\/li>\n<li style=\"margin-bottom: 10px;\">Abre Microsoft Edge y presiona F12 para lanzar DevTools.<\/li>\n<\/ul>\n<h3>Navegaci\u00f3n en DevTools<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\">En la interfaz de DevTools, selecciona la herramienta <em>Application<\/em>.<\/li>\n<li style=\"margin-bottom: 10px;\">Expande la secci\u00f3n Manifest para acceder a los detalles espec\u00edficos de la PWA.<\/li>\n<\/ol>\n<h3>Revisi\u00f3n de manejadores de protocolo<\/h3>\n<ol style=\"text-align: justify; list-style-position: outside; margin-left: 20px;\">\n<li style=\"margin-bottom: 10px;\">Localiza la secci\u00f3n \u201cProtocol handlers\u201d dentro del panel Manifest.<\/li>\n<li style=\"margin-bottom: 10px;\">Observa el estado de los manejadores de protocolo. Si est\u00e1n definidos incorrectamente o no est\u00e1n definidos, DevTools mostrar\u00e1 un mensaje indicativo.<\/li>\n<li style=\"margin-bottom: 10px;\">Si los manejadores de protocolo est\u00e1n correctamente definidos, recibir\u00e1s una confirmaci\u00f3n a trav\u00e9s de un mensaje en DevTools, indicando que se han encontrado registros v\u00e1lidos de manejadores de protocolo.<\/li>\n<\/ol>\n<h3>Pruebas de funcionalidad<\/h3>\n<p style=\"text-align: justify;\">Utiliza la secci\u00f3n <em>Protocol handlers<\/em> para probar los manejadores definidos. Este paso es crucial para verificar que la PWA responda como se espera ante las solicitudes de protocolo espec\u00edficas.<\/p>\n<p style=\"text-align: justify;\">Este proceso no solo ayuda a asegurar que los manejadores de protocolo funcionen adecuadamente, sino que tambi\u00e9n <strong>verifica que la PWA cumpla con los est\u00e1ndares necesarios<\/strong> para una experiencia de usuario \u00f3ptima.<\/p>\n<h2>Recomendaciones finales sobre las WPA<\/h2>\n<p style=\"text-align: justify;\">La <strong>creaci\u00f3n de Progressive Web Apps<\/strong> emerge como una soluci\u00f3n innovadora y poderosa en el desarrollo web, ofreciendo una experiencia de usuario comparable a las aplicaciones nativas con la flexibilidad y accesibilidad de una p\u00e1gina web.<\/p>\n<p style=\"text-align: justify;\">En NeoAttack queremos ayudarte en tus procesos digitales. Por ello, contamos con equipos expertos en <a href=\"https:\/\/neoattack.com\/agencia-diseno-web\/desarrollo\/\">desarrollo y mantenimiento web<\/a> que podr\u00e1n ayudarte y hacer crecer tu negocio. \u00a1<a href=\"https:\/\/neoattack.com\/contacto\/\">Contacta con nosotros<\/a> y cu\u00e9ntanos tu caso!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las Progressive Web Apps (PWA) son aplicaciones web que ofrecen una experiencia similar a las aplicaciones nativas a los usuarios, combinando la funcionalidad de las apps nativas con la accesibilidad de las aplicaciones web. En NeoAttack, como agencia de marketing digital, queremos profundizar en este tipo de aplicaciones para que conozcas todo lo que pueden [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":454,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-6423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear una Progressive Web App | NeoAttack<\/title>\n<meta name=\"description\" content=\"\u00bfSabes que es una Progressive Web App y c\u00f3mo crearla? \u00a1En NeoAttack hemos preparado la gu\u00eda definitiva para que puedas desarrollarla paso a paso!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/neoattack.com\/blog\/progressive-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear una Progressive Web App | NeoAttack\" \/>\n<meta property=\"og:description\" content=\"\u00bfSabes que es una Progressive Web App y c\u00f3mo crearla? \u00a1En NeoAttack hemos preparado la gu\u00eda definitiva para que puedas desarrollarla paso a paso!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/neoattack.com\/blog\/progressive-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"NeoAttack\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-30T01:40:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-09T09:28:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2024\/05\/progressive-web-app-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1247\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/\"},\"author\":{\"name\":\"Felipe Hernandez\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#\\\/schema\\\/person\\\/b346ae04629682f7e13204b6442336c4\"},\"headline\":\"C\u00f3mo crear una Progressive Web App\",\"datePublished\":\"2024-04-30T01:40:46+00:00\",\"dateModified\":\"2026-10-09T09:28:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/\"},\"wordCount\":1898,\"publisher\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/progressive-web-app-scaled.jpg\",\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/\",\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/\",\"name\":\"C\u00f3mo crear una Progressive Web App | NeoAttack\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/progressive-web-app-scaled.jpg\",\"datePublished\":\"2024-04-30T01:40:46+00:00\",\"dateModified\":\"2026-10-09T09:28:32+00:00\",\"description\":\"\u00bfSabes que es una Progressive Web App y c\u00f3mo crearla? \u00a1En NeoAttack hemos preparado la gu\u00eda definitiva para que puedas desarrollarla paso a paso!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/progressive-web-app-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/progressive-web-app-scaled.jpg\",\"width\":2560,\"height\":1247,\"caption\":\"progressive-web-app\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/progressive-web-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear una Progressive Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/\",\"name\":\"NeoAttack Blog\",\"description\":\"Blog de NeoAttack\",\"publisher\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#organization\",\"name\":\"NeoAttack Blog\",\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/cropped-logo_neoattack_fondo_oscuro.jpg\",\"contentUrl\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/cropped-logo_neoattack_fondo_oscuro.jpg\",\"width\":1200,\"height\":675,\"caption\":\"NeoAttack Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/#\\\/schema\\\/person\\\/b346ae04629682f7e13204b6442336c4\",\"name\":\"Felipe Hernandez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/team-felipe-150x150.jpg\",\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/team-felipe-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/team-felipe-150x150.jpg\",\"caption\":\"Felipe Hernandez\"},\"description\":\"Desarrollador Web en NeoAttack Soy un desarrollador dedicado, analista y perfeccionista. Con una pasi\u00f3n por resolver problemas complejos y optimizar procesos, siempre busco asegurar que todo funcione a la perfecci\u00f3n.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/felipe-de-mello-hernandez\\\/\"],\"url\":\"https:\\\/\\\/neoattack.com\\\/blog\\\/author\\\/felipe-hernandez\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear una Progressive Web App | NeoAttack","description":"\u00bfSabes que es una Progressive Web App y c\u00f3mo crearla? \u00a1En NeoAttack hemos preparado la gu\u00eda definitiva para que puedas desarrollarla paso a paso!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/neoattack.com\/blog\/progressive-web-app\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear una Progressive Web App | NeoAttack","og_description":"\u00bfSabes que es una Progressive Web App y c\u00f3mo crearla? \u00a1En NeoAttack hemos preparado la gu\u00eda definitiva para que puedas desarrollarla paso a paso!","og_url":"https:\/\/neoattack.com\/blog\/progressive-web-app\/","og_site_name":"NeoAttack","article_published_time":"2024-04-30T01:40:46+00:00","article_modified_time":"2026-10-09T09:28:32+00:00","og_image":[{"width":2560,"height":1247,"url":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2024\/05\/progressive-web-app-scaled.jpg","type":"image\/jpeg"}],"author":"Felipe Hernandez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Felipe Hernandez","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#article","isPartOf":{"@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/"},"author":{"name":"Felipe Hernandez","@id":"https:\/\/neoattack.com\/blog\/#\/schema\/person\/b346ae04629682f7e13204b6442336c4"},"headline":"C\u00f3mo crear una Progressive Web App","datePublished":"2024-04-30T01:40:46+00:00","dateModified":"2026-10-09T09:28:32+00:00","mainEntityOfPage":{"@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/"},"wordCount":1898,"publisher":{"@id":"https:\/\/neoattack.com\/blog\/#organization"},"image":{"@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2024\/05\/progressive-web-app-scaled.jpg","articleSection":["Dise\u00f1o web"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/","url":"https:\/\/neoattack.com\/blog\/progressive-web-app\/","name":"C\u00f3mo crear una Progressive Web App | NeoAttack","isPartOf":{"@id":"https:\/\/neoattack.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#primaryimage"},"image":{"@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2024\/05\/progressive-web-app-scaled.jpg","datePublished":"2024-04-30T01:40:46+00:00","dateModified":"2026-10-09T09:28:32+00:00","description":"\u00bfSabes que es una Progressive Web App y c\u00f3mo crearla? \u00a1En NeoAttack hemos preparado la gu\u00eda definitiva para que puedas desarrollarla paso a paso!","breadcrumb":{"@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/neoattack.com\/blog\/progressive-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#primaryimage","url":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2024\/05\/progressive-web-app-scaled.jpg","contentUrl":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2024\/05\/progressive-web-app-scaled.jpg","width":2560,"height":1247,"caption":"progressive-web-app"},{"@type":"BreadcrumbList","@id":"https:\/\/neoattack.com\/blog\/progressive-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/neoattack.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear una Progressive Web App"}]},{"@type":"WebSite","@id":"https:\/\/neoattack.com\/blog\/#website","url":"https:\/\/neoattack.com\/blog\/","name":"NeoAttack Blog","description":"Blog de NeoAttack","publisher":{"@id":"https:\/\/neoattack.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/neoattack.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/neoattack.com\/blog\/#organization","name":"NeoAttack Blog","url":"https:\/\/neoattack.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/neoattack.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2026\/09\/cropped-logo_neoattack_fondo_oscuro.jpg","contentUrl":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2026\/09\/cropped-logo_neoattack_fondo_oscuro.jpg","width":1200,"height":675,"caption":"NeoAttack Blog"},"image":{"@id":"https:\/\/neoattack.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/neoattack.com\/blog\/#\/schema\/person\/b346ae04629682f7e13204b6442336c4","name":"Felipe Hernandez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2026\/09\/team-felipe-150x150.jpg","url":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2026\/09\/team-felipe-150x150.jpg","contentUrl":"https:\/\/neoattack.com\/blog\/wp-content\/uploads\/2026\/09\/team-felipe-150x150.jpg","caption":"Felipe Hernandez"},"description":"Desarrollador Web en NeoAttack Soy un desarrollador dedicado, analista y perfeccionista. Con una pasi\u00f3n por resolver problemas complejos y optimizar procesos, siempre busco asegurar que todo funcione a la perfecci\u00f3n.","sameAs":["https:\/\/www.linkedin.com\/in\/felipe-de-mello-hernandez\/"],"url":"https:\/\/neoattack.com\/blog\/author\/felipe-hernandez\/"}]}},"_links":{"self":[{"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/posts\/6423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/comments?post=6423"}],"version-history":[{"count":1,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/posts\/6423\/revisions"}],"predecessor-version":[{"id":8926,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/posts\/6423\/revisions\/8926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/media\/454"}],"wp:attachment":[{"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/media?parent=6423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/categories?post=6423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neoattack.com\/blog\/wp-json\/wp\/v2\/tags?post=6423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}