Manifest d'aplicació web

Què comprova aquesta auditoria

Busca <link rel="manifest" href="..."> al head del document, recupera el fitxer JSON referenciat i valida que parseja i que conté els camps que els navegadors necessiten per mostrar un prompt d’instal·lació: name (o short_name), start_url, icons amb almenys un de 192×192 i un de 512×512, i display.

Per què importa

El manifest controla com el sistema operatiu tracta el teu lloc un cop l’usuari l’afegeix a la pantalla d’inici.

• Android (Chrome, Samsung Internet, Edge): amb un manifest vàlid més un service worker, el navegador mostra el prompt “Afegeix a la pantalla d’inici”. Sense ell, cap banner d’instal·lació: els usuaris han de trobar l’opció de menú amagada.
• Chromebook / Chrome / Edge d’escriptori: instal·lable com a aplicació autònoma des de la icona omnibox de la barra d’adreces.
• iOS Safari: llegeix name, theme_color i apple-touch-icon (encara un enllaç separat). No honora display: standalone del manifest: també necessites <meta name="apple-mobile-web-app-capable" content="yes">.
• Barra de pestanyes: Chrome utilitza theme_color del manifest (i la meta etiqueta corresponent) per al color de fons de la barra d’adreces.

Encara que no vulguis un prompt d’instal·lació PWA, el manifest segueix alimentant el favicon que Android utilitza quan els usuaris afegeixen un marcador, i la icona que Chrome mostra al menú overflow de pestanyes al mòbil.

Com solucionar-ho

1. Enllaça el manifest des de cada pàgina:

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#0b0b0b" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

L’extensió del fitxer és convencionalment .webmanifest, però .json també funciona sempre que la resposta se serveixi amb Content-Type: application/manifest+json (o application/json).

2. Escriu un manifest mínim vàlid:

{
  "name": "MetricSpot",
  "short_name": "MetricSpot",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b0b0b",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

La icona maskable és la que Android utilitza per al badge de la pantalla d’inici. Sense ella, Android retalla la teva icona i obtens un cercle d’espai en blanc al voltant del logo. Prova-ho amb maskable.app.

3. Serveix el content type correcte:

location = /manifest.webmanifest {
  default_type application/manifest+json;
  add_header Cache-Control "public, max-age=3600";
}

Si el teu host el serveix com a text/plain o text/html, Chrome ignora el fitxer silenciosament.

Astro: col·loca manifest.webmanifest a public/. Astro el copia a l’arrel del lloc sense canvis. Afegeix l’<link> al teu base layout.

Next.js (App Router): exporta un manifest tipat des de app/manifest.ts i Next emet el JSON en temps de build:

// app/manifest.ts
import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "MetricSpot",
    short_name: "MetricSpot",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#0b0b0b",
    icons: [
      { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
      { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
    ],
  };
}

L’<link rel="manifest"> l’injecta Next automàticament quan aquest fitxer existeix.

WordPress: el camí més simple és un plugin PWA (PWA per 10up, o Super Progressive Web Apps). O escriu el manifest tu mateix, col·loca’l a l’arrel del tema i afegeix l’etiqueta <link> via wp_head:

add_action('wp_head', function () {
  echo '<link rel="manifest" href="' . esc_url(get_template_directory_uri() . '/manifest.webmanifest') . '">';
});

4. Combina-ho amb les meta etiquetes correctes. El manifest fa la major part de la feina, però iOS Safari i crawlers antics encara volen les etiquetes separades:

<meta name="theme-color" content="#0b0b0b" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Consulta també Apple touch icon i Favicon per a la resta del conjunt d’icones.

Preguntes freqüents

Necessito un service worker per passar aquesta comprovació?

No. La comprovació del manifest només verifica l’<link> i el fitxer JSON. Necessites un service worker per ser instal·lable com a PWA a Android: sense ell, el prompt d’instal·lació no apareixerà ni amb un manifest perfecte. Només el manifest segueix donant-te una millor icona a la pantalla d’inici i metadades de la barra de pestanyes.

Per què no apareix el meu prompt d’instal·lació a Android?

Es requereixen tres coses: un manifest vàlid amb icones de 192×192 i 512×512, un service worker que gestioni esdeveniments fetch, i el lloc servit per HTTPS. Comprova chrome://inspect → “Devices” → la teva pestanya → Application → Manifest a DevTools. Chrome llista exactament quins criteris d’instal·lació falten.

Quina diferència hi ha entre display: standalone i display: fullscreen?

standalone amaga el chrome del navegador però manté la barra d’estat de l’SO (notificacions, hora, bateria), el que la majoria d’apps volen. fullscreen amaga tot i normalment només és apropiat per a jocs. minimal-ui manté una fina barra de navegador amb endavant/enrere; rarament s’utilitza. La majoria d’apps instal·lables volen standalone.