NEXT.js 13: PWA Not Functioning on Live Deployment but Works Locally

Question

I am trying to add PWA to my Nextjs 13 project, after carefully implementing it, it works just fine on local but when I push to live on Microsoft Azure App service, it doesn't work. Help!!!. thanks in advance.

Here is my Manifest.js file

{
    "theme_color": "#6083ff",
    "background_color": "#6083ff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "App_name",
    "short_name": "App_name",
    "description": "Experience Live Anywhere",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "/maskable_icon.png",
            "sizes": "794x200",
            "type": "image/png",
            "purpose": "any maskable"
          }

    ],
    "screenshots": [
        {
          "src": "/screenshot.png",
          "sizes": "192x48",
          "type": "image/png",
          "form_factor": "wide",
          "label": "Coventi"
        },
        {
          "src": "/screenshot-mobile.png",
          "sizes": "794x200",
          "type": "image/png",
          "form_factor": "narrow",
          "label": "Coventi"
        }
      ]
}

My Next.config file

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: { esmExternals: true, scrollRestoration: true },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "placehold.co",
      },
      {
        protocol: "https",
        hostname: "coventiassets.blob.core.windows.net",
      },
    ],
    ...withPWA({
      dest: "public",
      register: true,
      skipWaiting: true,
      runtimeCaching,
      // buildExcludes: [/middleware-manifest.json$/],
      // disable: process.env.NODE_ENV === "development",
    }),
  },
};

module.exports = nextConfig;

And I added the link in my _document file like so

        <link
          rel="manifest"
          crossOrigin="use-credentials"
          href="manifest.json"
        />

I also installed the next-pwa: ^5.6.0

I have tried to change the link address like this

    <link
          rel="manifest"
          crossOrigin="use-credentials"
          href="%PUBLIC_URL%/manifest.json"
        />
Also tried downgrading the next-pwa version to 5.5.0 with and without the "^" symbol in the package.json file

still wont work, i have tried to regenerate the manifest. still no luck.

Answer 1

So I kept digging to find answer, I deployed the same project to vercel and it worked fine, that simple made me believe the error was from Microsoft Azure App service where the frontend is being deployed, The cause of the error was because the server was reading the manifest.json file as a text file instead of a json file.

How I resolved it was to add this line of code below in the web.config file

    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
     <mimeMap fileExtension=".webmanifest"                  mimeType="application/manifest+json" />
  </staticContent>

I found this link helpful while resolving the error