manifest.ts

Generate the web app manifest from code: app/manifest.ts returns the manifest object and GioJS serves it at /manifest.webmanifest.

import type { MetadataRoute } from '@gio.js/core';

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

Reference

File name and location

app/manifest.ts or app/manifest.js, at the root of app/ only. It answers /manifest.webmanifest.

Exports

Response

• 200, Content-Type: application/manifest+json; charset=utf-8, the object as JSON (indented by two spaces).
• Only GET and HEAD: other methods get 405 with Allow: GET, HEAD.
• Cached by the server for revalidate seconds, with an ETag and no automatic Cache-Control.
• A result that is not a plain object (an array, null), or a function that throws, answers 500 Internal Server Error (ref <digest>).

Examples

Link the manifest from every page

Browsers find the manifest through a <link rel="manifest">, which GioJS does not add by itself. Set it once in the root layout's metadata:

import React from 'react';
import type { LayoutProps, Metadata } from '@gio.js/core';

export const metadata: Metadata = {
  title: { default: 'Acme Store', template: '%s | Acme Store' },
  manifest: '/manifest.webmanifest',
};

export default function RootLayout({ children }: LayoutProps) {
  return (
    <html lang="en">
      <head />
      <body>{children}</body>
    </html>
  );
}

Every page then carries <link rel="manifest" href="/manifest.webmanifest">.

Good to know

• GioJS does not check the manifest's members and does not resolve URLs in it: write start_url and icon src values as the browser should read them. Icons are ordinary files in public/.
• A public/manifest.webmanifest wins over app/manifest.ts, with a startup warning. A page or route.ts at that URL stops startup. A static public/manifest.json is a different URL and does not conflict.
• gio export writes out/manifest.webmanifest from it.
• There are no file-based icons (app/icon.png, app/apple-icon.png): use the icons metadata field.

Related

• Metadata & SEO - the guide.
• sitemap.ts, robots.ts, metadata

Version history