PWA: guía del manifest file

Published in

Samsung Internet Developers

4 min readFeb 14, 2020

[Check English version here]

Ya dimos introducción al concepto de las Progressive Web Apps o PWAs siendo estas una manera de traer la experiencia de una app nativa al browser.

La definición técnica nos dice que para que una web sea una PWA debe tener estas características: HTTPS, un service worker y un manifest file. En este artículo nos vamos a enfocar en el manifest file … 🕵️‍♀️

Qué es el manifest file?

Es simplemente un archivo JSON con diferentes valores como el nombre de la app o la URL. Estos valores se denominan miembros y definen cómo tu app le aparece al usuario incluyendo los detalles que hacen que una PWA se vea similar a una app nativa, como por ejemplo el ícono, y se asegura de que pueda ser descubierta.

👉Mini guía

El archivo manifest básico consiste en los siguientes miembros: name, short-name, description, y icon. A continuación vamos a mostrar un manifest más completo para cubrir diferentes temas y explicar cada valor. Hay aún mas campos que se pueden incluir, para una guía completa de todos los posibles valor de un manifest file pueden chequear el sitio de MDN.

Guarda este artículo para cuando necesites chequear cuáles son los campos necesarios para crear tu PWA.

{
   "name": puede ser utilizado por las app stores o los browsers en las pantallas de startup o prompts.
   "short-name": es el nombre que el usuario ve junto con el ícono. Por ejemplo en la homescreen.
   "description": provee contexto adicional de la app.
   "dir": Dirección del texto. 
          Valores: ltr(left to right),
                  rtl (right to left),
                  auto
   "lang": Lenguaje del texto. 
           Ejemplo: en (inglés)
   "icons": Es un array cuyos elementos son un JSON con diferentes propiedades del ícono incluyendo el tamaño y el tipo, de esta manera el browser puede elegir cuál es el ícono correspondiente dentro de este conjunto.
           [{
             "src": source,
             "sizes": ejemplo "192x192",
             "type": ejemplo "image/png",
             "purpose": el propósito de la imagen en el contexto del sistema operativo.
                       Valores: badge, maskable, any
            }]
    "display": Modo de visualización de preferencia del website
               Valores: fullscreen,
                       standalone,
                       minimal-ui,
                       browser.
    "scope": representa el conjunto de urls que se puede ver a través del contexto de PWA, si el usuario navega afuera de este scope, las páginas serán abiertas en un modo standard del browser.
              Ejemplo:"https://example.com/", "/app/"   
    "orientation": se puede forzar la orientación de tu app cuando es conveniente, por ejemplo en algún videojuego sería landscape. Puede omitirse.
                   Ejemplo: natural (default).
    "background_color": indica al browser qué color utilizar en la pantalla de inicio que los usuarios verán cuando ejecutan su app.
                        Ejemplo: "#456BD9"
    "theme_color": se utiliza en algunos browsers para colorear la barra de estado y otras partes de la interfaz del usuario que pertenecen al browser.
    "start_url": indica cuál es la url que debe iniciarse cuando el usuario ejecuta la progressive web app.
    "categories": Se intenta utilizar para categorizar las pwa en algunas app stores.
                  Example: ["business", "technology", "web"]}

Cómo crear un archivo manifest

Podemos crear el archivo manifest file manualmente con un formato JSON apropiado, luego debemos conectar este archivo a nuestra app. Realizamos esto agregando un elemento <link> dentro del <head> de nuestro archivo HTML:

<link rel=”manifest” href=”/appmanifest.webmanifest”>

Probablemente notaste que si bien estamos trabajando con un archivo JSON, la extensión recomendada es .webmanifest por la W3C ya que algunos web servers reconocen esta extensión y transfieren el archivo utilizando ciertos standards.

Existen apps de terceros como PWAbuilder de Microsoft que permiten crear un manifest file de manera simple y paso a paso, completando los valores correspondientes al archivo y además ayudándote a elegir el tamaño correspondiente de los íconos.

Manifest File y Standards

Es importante tomarse un tiempo y testear el manifest file: propiedades como el ícono, cómo se ve tu home screen u otros valores puede generar diferentes resultados dependiendo del browser. Para simplificar este proceso, la W3C está trabajando en diferentes standards para mejorar esta experiencia y obtener mayor claridad en cuáles son los campos que se deben agregar y estudiar nuevos valores para poner a producción tu PWA de manera más eficiente, independientemente del browser que las esté ejecutando.

Se pueden ver más ejemplos, el estado actual de los standards y más aquí.

📢 Anuncios desde Samsung Internet:

Si estás por Londres el 19 de abril tendremos la primera conferencia sobre PWA, una jornada completa para ver cuál es el estado actual de las PWAs de diferentes browsers y conocer a la comunidad, te veo allí! 💥
Seguimos buscando ejemplos relevantes de PWAs para el Galaxy Store, si tenés un caso que nos querés compartir, esperamos tu contacto!
Agradecimientos a Maximiliano Firtman por su feedback a este artículo, pueden seguirlo para ver más noticias sobre PWA! Y además también estará presente en la PWA conf 🎉