push service error - webpush + Nextjs + serwist,

[rigid island]

Hi @flint ermine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the official Next.js documentation for implementing web push notifications and PWAs, here are some key points and troubleshooting steps that may help you resolve your issue with webpush + Next.js + Serwist:

1. Service Worker Location
   The service worker file should be placed in the public/ directory as public/sw.js, not in src/app/. This is important because the browser expects the service worker to be served from the root of your domain (e.g., /sw.js). If you place it in src/app/, it will not be accessible at the expected URL, and registration may silently fail or not behave as intended. The official example shows the service worker in public/sw.js:

   // public/sw.js
   self.addEventListener('push', function (event) {
     // ...
   });
   // ...
   

   See official docs

2. Registering the Service Worker
   When registering the service worker in your client code, make sure you are referencing /sw.js (not /src/app/sw.js). Example:

   await navigator.serviceWorker.register('/sw.js', {
     scope: '/',
     updateViaCache: 'none',
   });
   

   See official docs

3. VAPID Keys and Environment Variables
   Ensure your VAPID keys are correctly set in your environment variables and referenced in both your server (for web-push) and client (for pushManager.subscribe). The documentation shows:

   NEXT_PUBLIC_VAPID_PUBLIC_KEY=your_public_key_here
   VAPID_PRIVATE_KEY=your_private_key_here
   

   See official docs

4. Server Actions and Subscription Handling
   The server action for sending notifications should use the correct subscription object. In production, you should store subscriptions in a database, but for testing, you can use an in-memory variable as shown in the docs. Make sure you are serializing/deserializing the subscription object correctly between client and server.

   See official docs

5. Serwist Integration
   If you are using Serwist for offline support, ensure your service worker is still accessible at /sw.js and that your Next.js config is set up to output the service worker to the public/ directory. The documentation notes that Serwist requires custom webpack configuration and that you should follow their integration guide closely. If the service worker is being generated elsewhere, you may need to copy or move it to public/ as part of your build process.

   See official docs

6. Testing and Debugging

   • Test your service worker registration and push notification flow locally using HTTPS (next dev --experimental-https).

   • Check the browser console for errors related to service worker registration, push subscription, or notification display.

   • Make sure your service worker is not cached and is always up to date. You can set appropriate headers in next.config.js:

     {
       source: '/sw.js',
       headers: [
         { key: 'Content-Type', value: 'application/javascript; charset=utf-8' },
         { key: 'Cache-Control', value: 'no-cache, no-store, must-revalidate' },
         { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self'" },
       ],
     }
     

See official docs

---

Summary:

• Move your sw.js to the public/ directory.
• Register the service worker as /sw.js.
• Double-check your VAPID keys and environment variables.
• Ensure your subscription handling matches the official example.
• If using Serwist, ensure the generated service worker ends up in public/ as /sw.js.
• Set proper headers for /sw.js in your Next.js config.

If you follow these steps and still encounter errors, please provide the exact error message you are seeing, as the knowledge sources do not contain information about specific error messages related to your code or the sourceb.in links you provided. If you can share the error text, I can help further based on the documentation and known issues.

How to build a Progressive Web Application (PWA) with Next.js

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@flint ermine Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[flint ermine]

generated the web push keys through web-push generate-vapid-keys