Breaking News: Grepper is joining You.com. Read the official announcement!

nextjs pwa

waqas pathan answered on September 20, 2022 Popularity 10/10 Helpfulness 3/10

answer nextjs pwa

nextjs pwa

Comment

// 4 Steps to make a NextJS webapp into a PWA

// 1. Run 'npm install next-pwa'
// 2. At root of project, create a file 'next.config.js' with this code:
const withPWA = require("next-pwa")

module.exports = withPWA({
  pwa: {
    dest: "public"
  }
})

// 3. In the 'public' folder, create a file 'manifest.json' with this code:
{
  "name": "PWA App",
  "short_name": "PWA App",
  "start_url": "/",
  "scope": "/",
  "icons": [
    {
      "src": "/icons/file.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": ""
    },
  ],
  "theme_color": "#000000",
  "background_color": "#FFFFFF",
  "display": "fullscreen",
  "orientation": "portrait"
}

// 4. In the 'pages' folder, create a file '_document.js' with this code:
import {Html, Head, Main, NextScript} from 'next/document'

export default function Document() {
    return (
        <Html>
            <Head>
                <link rel="manifest" href={"/manifest.json"}/>
                <link rel={"apple-touch-icon"} href={".icons/apple-icon-180.png"}></link>
                <meta name={"theme-color"} content={"#FFF"}/>

            </Head>

            <body>

            <Main/>
            <NextScript/>

            </body>
        </Html>
    )
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Sep 20 2022

waqas pathan

0 Answers Avg Quality 2/10

nextjs pwa

Contents

More Related Answers

nextjs pwa

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.