Getting Started with Progressive Web Apps

Image of Author
Invalid Date (last updated January 16, 2023)


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 (
        <link rel="manifest" href="/manifest.json" />


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"


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 article on PWA.

  "display": "fullscreen" 


  "icons": []