Getting Started with Progressive Web Apps

Image of Author
Austin GatlinLinkedInGitHubMastodonX
January 16, 2023 (last updated April 28, 2023)

Manifest

You need to serve a manifest file from your server. In next.js, for example, this would be in public/manifest.json. That manifest file tells the browser how to render your app as a psuedo-native app. You would then add the html-link element pointing to the manifest file in your html. The full example with Next.js is as follows (which is also at the tail end of my guide Getting Started with NextJS on Vercel):

// public/manifest.json

{
  "name": "App",
  "icons": [...],
  ...
}

// pages/_app.tsx

export default function App() {
  return (
    <>
      <Head>
        <link rel="manifest" href="/manifest.json" />
      </Head>
    </>
  );
}

Name

This field that is the name of your application. If your application name is long, you can also set the non-mandatory short-name field.

{
  "name": "App"
}

Display

This field is the display style. This is one major way you can impersonate native apps: hiding the browser controls. Which one you pick depends on the application you are building. For simple, single-page apps, the full, immersive experience is desirable, which means setting the display to fullscreen. There is a builtin fallback through the available options. You can get a sense for what each setting does, here, on web.dev article on PWA.

{
  "display": "fullscreen"
}

Icons

{
  "icons": []
}