• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Equipo
    • Coworking
    • Asociación
    • Visor de proyectos Geoinnova
    • Alianzas Estratégicas
  • Consultoría y Desarrollo SIG
    • Productos
      • Planero Web
      • QElectricGIS
      • Plugins
  • Consultoría Territorial
    • Turismo sostenible
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Consultoría Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
  • Formación
    • Todos los cursos
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Contenidos
    • Blog
    • Tertulia Territorio Geoinnova
    • Noticias
    • Webinars
    • Geolibrería
    • Plugins
  • Contacto
    • Soporte de Clientes – Tickets
Otros temas Programación y Desarrollo SIG

Cómo convertir una web en PWA, para su instalación y uso offline

17/04/2023 2 comentarios

Antes de explicar cómo convertir una web en Progressive Web App (PWA), es importante definir qué es una PWA y por qué puede ser útil.

PWA - Progressive Web App
Aplicación Web Progresiva

Una PWA (Progressive Web App) es una aplicación web que se comporta como una aplicación nativa y que se puede instalar en dispositivos móviles y ordenadores. Las PWA utilizan tecnologías web modernas para ofrecer una experiencia de usuario mejorada, como la capacidad de trabajar offline, el acceso a notificaciones push y el acceso a la cámara y el micrófono.

Convertir una web en PWA tiene una serie de ventajas:

  • En primer lugar, las PWA se pueden instalar en el dispositivo del usuario, lo que significa que la aplicación estará siempre disponible, incluso si el usuario no tiene conexión a internet.
  • En segundo lugar, las PWA ofrecen una experiencia de usuario más fluida y rápida, ya que se cargan más rápido que una página web tradicional. Además, las PWA tienen la capacidad de enviar notificaciones push, lo que permite a los usuarios estar al tanto de las actualizaciones y cambios en la web.
Contenidos ocultar
¿Como convertir una web a Progressive Web App (PWA)?
Conversión de web a PWA: Ejemplo práctico paso a paso
Añadir archivo manifest.json
Fichero regist_serviceWorker.js para el registro del servicio
Agregar fichero Service_Worker.js para funcionalidad de caché
Comprobar que la web cumple con los estándares y funcionalidades de una PWA
Instalación de la PWA en dispositivos móviles o de escritorio
Código en Github de este ejemplo de PWA

¿Como convertir una web a Progressive Web App (PWA)?

Para convertir una web en PWA, necesitamos seguir los siguientes pasos:

  1. Agregar un archivo de manifiesto de aplicación web (manifest.json) para definir las propiedades de la aplicación, como el nombre, el icono, la orientación, etc.

Para crear el archivo de manifiesto, podemos utilizar herramientas en línea como https://manifest-gen.netlify.app, que nos permiten generar un archivo de manifiesto JSON con imágenes de las dimensiones correspondientes.

Generador online de archivo manifest.json https://manifest-gen.netlify.app
https://manifest-gen.netlify.app

Una vez generado el archivo, lo descargamos y lo colocamos en la raíz del sitio web.

  1. Crear un archivo que en nuestro caso llamaremos «regist_serviceWorker.js» el cual contendrá las instrucciones necesarias para registrar el Service Worker. Este archivo debe ser invocado desde la página de inicio.
  1. Agregar un Service Worker (Service_Worker.js) para habilitar la funcionalidad offline y cacheado de recursos.

Un Service Worker es el archivo que se encargará de almacenar en caché los archivos de la aplicación y servirlos al usuario incluso cuando no tenga conexión a internet. Para crear el archivo Service Worker, creamos un archivo llamado «Service_Worker.js» en la raíz del sitio web y lo configuramos de acuerdo a nuestras necesidades.

En el archivo Service Worker, definiremos un nombre y una versión de la caché, así como las URL que queremos que se almacenen en caché.

Una vez configurado todo, podemos probar nuestra aplicación como una PWA. Para hacerlo, abrimos las DevTools de nuestro navegador y accedemos a la pestaña «Auditoría». Allí, seleccionamos la opción «Progressive Web App» y hacemos clic en «Run Audit». Si todo está configurado correctamente, la auditoría debería pasar sin problemas.

Conversión de web a PWA: Ejemplo práctico paso a paso

A continuación, partiremos de la siguiente web y detallaremos los pasos que seguiremos para convertirla en una PWA funcional:

Añadir archivo manifest.json

Existen numerosas webs que nos permiten generar el archivo manifest.json, en el repositorio asociado a esta entrada, encontrarás algunas URL útiles. En nuestro ejemplo, usaremos https://manifest-gen.netlify.app.

En este archivo se deben especificar ciertos datos para definir la configuración de la aplicación PWA. Algunos de los datos que se pueden incluir son:

  • «name»: El nombre completo de la aplicación.
  • «short_name»: Un nombre corto o abreviado de la aplicación.
  • «theme_color»: El color principal de la aplicación que se refleja en la barra de estado del dispositivo.
  • «background_color»: El color de fondo de la aplicación cuando se carga.
  • «display»: Define cómo se muestra la aplicación, puede ser «standalone», «fullscreen», «minimal-ui» o «browser».
  • «orientation»: Define la orientación predeterminada de la aplicación, puede ser «portrait», «landscape», «portrait-primary», «portrait-secondary», «landscape-primary» o «landscape-secondary».
  • «scope»: Define el alcance de la aplicación, es decir, qué URLs se consideran parte de la aplicación.
  • «start_url»: La URL inicial de la aplicación.
  • «icons»: Un conjunto de iconos en diferentes tamaños y formatos que se utilizan para representar la aplicación en diferentes lugares.

Después de completar los campos y cargar la imagen que se utilizará como icono de la aplicación (debe tener la misma altura que ancho), se descargará un archivo comprimido que incluye tanto el archivo manifest.json como los iconos en diferentes tamaños.

Iconos en diferentes tamaños

Copiaremos el contenido en el directorio raíz de nuestro proyecto.

Archivos descargados, incluir en el raiz del proyecto

El archivo manifest.json resultante quedaría de la siguiente manera:

{
  "name": "Ejemplo de web PWA",
  "short_name": "xample-PWA",
  "theme_color": "#000",
  "background_color": "#fff",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Este debe linkarse desde el <head> de la página index.html y aprovecharemos para incluir tanto establecer un color de tema para la barra de direcciones

<!-- Añadido para PWA -->
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="./images/icons/icon-192x192.png">
<link rel="manifest" href="./manifest.json" />

Fichero regist_serviceWorker.js para el registro del servicio

Incluiremos el código para registrar el Service Worker.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('./Service_Worker.js').then(function (registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function (err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Primero se verifica si el objeto «serviceWorker» está disponible en el objeto «navigator» del navegador web del usuario. Si está disponible, registra el Service Worker especificado en el archivo «Service_Worker.js» ubicado en el mismo directorio que el archivo HTML que lo llama.

Una vez que se registra el Service Worker, se devuelve una promesa que puede ser manejada por los métodos «then» y «catch». Si se registra correctamente, el método «then» se ejecuta y muestra un mensaje en la consola del navegador web con el alcance del Service Worker registrado. Si falla, el método «catch» se ejecuta y muestra un mensaje de error en la consola con la información del error.

Este código se incluirá antes del cierre del body del archivo index.html.

    <script src="./regist_serviceWorker.js"></script>
</body>

Agregar fichero Service_Worker.js para funcionalidad de caché

//asignar un nombre y versión al cache
const CACHE_NAME = 'xamplepwa',
    urlsToCache = [
        '.',
        './index.html',
    ]
//durante la fase de instalación, generalmente se almacena en caché los activos estáticos
self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                return cache.addAll(urlsToCache)
                    .then(() => self.skipWaiting())
            })
            .catch(err => console.log('Falló registro de cache', err))
    )
})
//una vez que se instala el SW, se activa y busca los recursos para hacer que funcione sin conexión
self.addEventListener('activate', e => {
    const cacheWhitelist = [CACHE_NAME]
    e.waitUntil(
        caches.keys()
            .then(cacheNames => {
                return Promise.all(
                    cacheNames.map(cacheName => {
                        //Eliminamos lo que ya no se necesita en cache
                        if (cacheWhitelist.indexOf(cacheName) === -1) {
                            return caches.delete(cacheName)
                        }
                    })
                )
            })
            // Le indica al SW activar el cache actual
            .then(() => self.clients.claim())
    )
})
//cuando el navegador recupera una url
self.addEventListener('fetch', e => {
    //Responder ya sea con el objeto en caché o continuar y buscar la url real
    e.respondWith(
        caches.match(e.request)
            .then(res => {
                if (res) {
                    //recuperar del cache
                    return res
                }
                //recuperar de la petición a la url
                return fetch(e.request)
            })
    )
})

El código en el archivo comienza asignando un nombre y una versión al caché (CACHE_NAME) y especificando las URLs que se deben almacenar en el caché (urlsToCache), que en este caso son la raíz del sitio (.) y la página principal (./index.html).

Luego, en el evento de instalación del Service Worker (install), se crea el caché y se agregan las URLs especificadas. Si todo va bien, el Service Worker pasa a la fase de activación, en la cual se eliminan del caché los recursos que ya no son necesarios y se le indica al Service Worker que controle la página actual.

Por último, el Service Worker maneja el evento fetch, el cual se dispara cuando el navegador intenta recuperar una URL. Si la URL solicitada se encuentra en el caché, se recupera del caché y se devuelve al navegador. Si no se encuentra en el caché, el Service Worker solicita la URL al servidor y la devuelve al navegador. De esta manera, el Service Worker ayuda a que las páginas se carguen más rápido y a reducir el consumo de datos al recuperar los recursos de la caché en lugar de hacer una petición al servidor cada vez que se accede a una página.

Comprobar que la web cumple con los estándares y funcionalidades de una PWA

Una PWA debe ser rápida, confiable y segura, y ofrecer una experiencia de usuario óptima en cualquier dispositivo y conexión. Para comprobar que cumple con los estándares y funcionalidades de una PWA seguiremos como mínimo los siguientes pasos:

Dev Tools Google Chrome > Ligthouse > Analyze page load
Herramienta «Lighthouse» de Google Chrome
  1. Utilizar la herramienta «Lighthouse» de Google Chrome: Esta herramienta permite auditar la PWA y ofrece un informe detallado de los aspectos que cumple y los que no.
  2. Comprobar que el sitio tiene un archivo «manifest.json«: Este archivo contiene información sobre la PWA, como su nombre, descripción, iconos, etc.
  3. Comprobar que el sitio utiliza un Service Worker: Este es un script que corre en segundo plano y permite que la PWA funcione sin conexión.
  4. Comprobar que el sitio está protegido con HTTPS: Es importante que la conexión sea segura para garantizar la privacidad y seguridad del usuario.
Finalización ok auditoría PWA
Resultado favorable auditoria

Una vez terminada la auditoría se indicará si es instalable o no y si existe algún tipo de error a solventar.

Instalación de la PWA en dispositivos móviles o de escritorio

A partir de ese momento la PWA se podría instalar tanto en dispositivos móviles como en ordenadores de escritorio. Sin embargo, la forma de instalarla puede variar ligeramente dependiendo del dispositivo y el navegador utilizado.

Para instalarla en un ordenador de escritorio desde Chrome, pulsaremos sobre los 3 puntos y buscaremos la opción «Instalar aplicación (o el nombre que le hayamos dato)». En otros navegadores, como Firefox o Edge, la opción puede estar en un menú diferente o tener un nombre ligeramente diferente, pero normalmente se encuentra en algún lugar del menú de configuración.

PWA funcionando en un ordenador de escritorio sin conexión a Internet

Para instalarla desde un dispositivo móvil, primero debes asegurarte de que el navegador que estás usando lo soporta. Luego, sigue los siguientes pasos:

  1. Abre la PWA en tu navegador móvil.
  2. Pulsa en el icono de «Compartir» o «Agregar a pantalla de inicio».
  3. Si no ves la opción de «Agregar a pantalla de inicio», busca la opción de «Compartir» y desde allí deberías encontrar la opción.
  4. Selecciona «Agregar a pantalla de inicio».
  5. Escribe un nombre para la PWA o déjalo como está y pulsa en «Agregar» o «Añadir».
  6. La PWA debería aparecer en tu pantalla de inicio, desde donde podrás acceder a ella como si fuera una app nativa.

Es importante destacar que el proceso puede variar dependiendo del navegador y del sistema operativo que estés utilizando.

Instalar PWA desde dispositivo móvil con Firefox

Código en Github de este ejemplo de PWA

Puedes ver todo el código y animarte a probarlo en el repositorio de GitHub https://github.com/erabasco/xample-PWA.

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

¿Qué es la Triple Bottom Line? Sostenibilidad en empresas
¿Qué es la Triple Bottom Line? Sostenibilidad en empresas
14/04/2023
Terre3 - Caminado a un lugar entre el GIS y el BIM
Terre3 – Caminando a un lugar entre el GIS y el BIM
28/03/2023
OSGeo4W Shell en Windows Terminal
Integrar la consola de OSGeo4W Shell en Windows Terminal para simplificar tu flujo de trabajo
20/03/2023

Eva Rabasco

Full Stack Developer. Comprometida con el diseño y desarrollo de materiales innovadores basados en la Web. Amplia experiencia en tecnologías específicas del lado cliente y del servidor. Actualmente forma parte del equipo de Programación y Desarrollo SIG de la Asociación Geoinnova. Además desarrolla su labor como docente en algunos de los cursos de bases de datos y de programación SIG del catálogo de cursos de Geoinnova.

Interacciones con los lectores

Comentarios

  1. Carlos Sabando Grasa dice

    17/04/2023 a las 23:09

    Ejemplo de PWA GIS: https://idena.navarra.es/navegar/
    Con «mapas sin conexión» dentro del menú «herramientas».

    Responder
    • Asociación Geoinnova dice

      18/04/2023 a las 11:55

      Gracias Carlos!

      IDENA siempre TOP!! 😀

      Responder

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.

Síguenos en Redes Sociales

Apúntate a nuestra newsletter

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}