I’m working on a Next.js application and I want to integrate Progressive Web App (PWA) features. Specifically, I’d like to display the Browser’s default install app icon only on a specific route (/app), rather than on all routes of the website.

I’ve set up the basic PWA configuration in my Next.js project using a service worker and a manifest file, and the Browser’s default install app icon shows up across all pages currently. However, I want to restrict this behavior to just the /app route.

Browser’s Default Install App icon

Relevant code snippets:

1. _app.tsx

 useEffect(() => {
        // Register service worker
        if ('serviceWorker' in navigator && router.pathname === "/app") {
            navigator.serviceWorker
                .register('/service-worker.js')
                .then((registration) => {
                    console.log('Service Worker registered with scope:', registration.scope);
                })
                .catch((error) => {
                    console.error('Service Worker registration failed:', error);
                });
        }
    }, [router.pathname]);

2. manifest.json

{
    "name": "My App",
    "short_name": "Myapp",
    "start_url": "/app",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

3. service-worker.js

self.addEventListener('install', (event) => {
    console.log('Service Worker installed');
});

self.addEventListener('activate', (event) => {
    console.log('Service Worker activated');
});

self.addEventListener('fetch', (event) => {
    // for future offline functionality
});

I’ve explored solutions like checking the current route and only registering the service worker on /app route. But, the browser still shows the install app icon on the searchbar on every route.

I don’t want to setup any custom prompt or a button to trigger the install app pwa prompt on a specific route.

Expected Outcome: Install App icon should only be visible when the route is /app.

Thank you in advance for your help!