Reputation: 11
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:
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!
sw.js
exists in public/
.disable: true
to check behavior, but no difference.Upvotes: 1
Views: 35