Jason
Jason

Reputation: 11

PWA Why are service workers not visible under the Application tab in Chrome for Next.js 15?

I am learning Progressive Web App (PWA) development in Next.js and using the @ducanh2912/next-pwa package.

Setup:

I have configured my next.config.js as follows:

/** @type {import('next').NextConfig} */

const withPWA = require("@ducanh2912/next-pwa").default({
    dest: "public",
    cacheOnFrontEndNav: true,
    aggressiveFrontEndNavCaching: true,
    reloadOnOnline: true,
    swcMinify: true,
    disable: false,
    workboxOptions: {
        disableDevLogs: true,
    },
});

const nextConfig = {};

module.exports = withPWA(nextConfig);

I have also created a manifest.json inside the public/ directory:

{
    "id": "2",
    "name": "Next.js PWA",
    "short_name": "NextPWA",
    "description": "A Progressive Web App built with Next.js",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#3367D6",
    "background_color": "#3367D6",
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait"
}

In layout.js, I have added the manifest inside metadata:

export const metadata = {
  manifest: "/manifest.json",
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  description: siteConfig.description,
  icons: {
    icon: "/favicon.ico",
  },
};

Issue:

After running the build and starting the dev server:

npm run build && npm run dev

I see the following log:

(pwa) Service worker: /Users/xxxx/Desktop/next-app-template/public/sw.js
(pwa)   URL: /sw.js
(pwa)   Scope: /

The install app prompt appears in Chrome, indicating PWA functionality is partially working. However, when I check DevTools > Application > Service Workers, the service worker is not registered or visible.

What I Tried:

  1. Cleared cache and hard reloaded the browser.
  2. Checked for errors in the console and network tab—no errors found.
  3. Verified sw.js exists in public/.
  4. Tested with disable: true to check behavior, but no difference.

Question:

Why is the service worker not appearing in DevTools > Application > Service Workers? Am I missing a configuration step?

Any insights or suggestions would be greatly appreciated!

  1. Cleared cache and hard reloaded the browser.
  2. Checked for errors in the console and network tab—no errors found.
  3. Verified sw.js exists in public/.
  4. Tested with disable: true to check behavior, but no difference.

Upvotes: 1

Views: 35

Answers (0)

Related Questions