Cómo crear un manifest en CloudFlare

Cómo Crear un Manifest en Cloudflare

Crear un manifest en Cloudflare es un proceso sencillo que permite definir cómo se comporta tu aplicación web en dispositivos móviles y de escritorio. A continuación, te explicamos cómo hacerlo paso a paso.

Paso 1: Iniciar Sesión en Cloudflare

Lo primero que debes hacer es iniciar sesión en tu cuenta de Cloudflare. Si no tienes una cuenta, necesitarás crear una.

Paso 2: Acceder a Service Workers

Una vez que estés en tu panel de control de Cloudflare, dirígete a la sección de Service Workers. Aquí es donde podrás gestionar y crear tus propios workers.

Paso 3: Crear un Nuevo Service Worker

Haz clic en el botón Crear para iniciar el proceso de creación de un nuevo service worker. Esto te llevará a una pantalla donde podrás editar el código del worker.

Paso 4: Editar el Código

En la pantalla de edición, necesitarás pegar el siguiente código que define tu manifest:

   const jsonManifest = {
  "name": "www.kolectiva.co",
  "short_name": "Kolectiva",
  "description": "Comercio kolectiva",
  "lang": "en-ES",
  "display": "standalone",
  "background_color": "#F5B914",
  "start_url": "/",
  "scope": "/",
  "theme_color": "#F5B914",
  "orientation": "portrait",
  "icons": [
    {
      "src": "https://blogger.googleusercontent.com/img/a/AVvXsEgtaEUFXGXBtdBDHF9lk-Y6RZSB1fyS7xHCHEeuxzG7zDPNfhnTUYZxKAtPkltdDG_puDPem0W6YcmYh6H_kp83tBZ6AYi00yjdV9Vrmowoe-ETHpGnzZbxn7zQ7UwDaeshI-UlI5rnFYflMdqrOjxEtAYLUgUZYeGFq7vqMwdRZv-LR-pUqFwY9LsBiB4=s192",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/a/AVvXsEgtaEUFXGXBtdBDHF9lk-Y6RZSB1fyS7xHCHEeuxzG7zDPNfhnTUYZxKAtPkltdDG_puDPem0W6YcmYh6H_kp83tBZ6AYi00yjdV9Vrmowoe-ETHpGnzZbxn7zQ7UwDaeshI-UlI5rnFYflMdqrOjxEtAYLUgUZYeGFq7vqMwdRZv-LR-pUqFwY9LsBiB4=s512",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "serviceworker": {
    "src": "/sw.js"
  },
  "screenshots": [
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_7AABKA4_3CQiEzFaMIdZ86aMEyzxLK5VralJPQ4IShCrnTgMiMd8BcOIgfpId6q-qFUxS6zboBM0rUT95PUXknEjDwAttRw19W0LdwKf7gt3rQKIlnKvB2-hqOQTsjbhgwrEpHBoCOYD2F_2zWxo_PIZfVwUXHtrOC8oBN-2Kbes0UFhnO1NwxyxPvo/s1280/captura%20computador.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKv40c6JgdIRjZrgATXO9uq2K9JOAqdItOAbC_1xc8EAJ7A6S8xgRCW8pamKdJKPF11dNurJxlZOFk7Ys8JJPk9wAOZlwEOamhRpTypUs2zhsdHGAfYAsZP1N_sHytZ7uFf77Q2xYPpd4pWoOAagg_hDajyZhDedIwlx6OVU9kRG8gqpuatHyk5FBW-G4/s1600/captura%20movil.png",
      "sizes": "720x1280",
      "type": "image/png"
    }
  ]
};

Una vez que hayas pegado el código, asegúrate de guardarlo. Esto activará el nuevo service worker con tu manifest configurado.

Paso 5: Ve a configuración de tu worker y luego mira en Dominios y rutas

Ahi vas a configurar tu ruta de esta manera: *tudominio.com/manifest.json

Paso 6: Pon la etiqueta link para hacer el llamado

Ve a tu html y dentro de la etiqueta head pones con esto ya se hará el llamado al manifest

<link expr:href='data:blog.url + &quot;manifest.json&quot;' rel='manifest'/>

Paso 7: Probar tu Manifest

Finalmente, prueba tu manifest accediendo a la URL donde has configurado el service worker. Puedes usar herramientas de desarrollo en tu navegador para asegurarte de que todo funciona correctamente y que el manifest se está sirviendo como se espera.

Conclusión

Crear un manifest en Cloudflare es una manera efectiva de mejorar la experiencia de usuario de tu aplicación web. Siguiendo estos pasos, podrás implementar y personalizar el manifest según las necesidades de tu proyecto. Si tienes alguna duda, ¡no dudes en preguntar!

Para obtener más información, consulta los siguientes artículos:

Visualización de Producto
Script para corazones en el blog