Service Worker with Next.js /app directory v14

I’m working on a Next.js (v13 or later) project using the /app directory architecture. I’d like to implement a service worker to enhance my website’s performance and offline capabilities, but I’m having trouble finding resources specifically addressing this setup.

Here’s what I need help with:

• Registration: How do I correctly register the service worker in my app/page.js file?
• Service Worker Logic: What’s the best approach to write the core service worker code (service-worker.js) for caching strategies and potential offline support within the /app directory structure?
• Considerations: Are there any Next.js-specific considerations or quirks I should be aware of when implementing a service worker in the /app directory?

Things I’ve tried:

• I’ve searched for tutorials and guides, but most seem to focus on older Next.js versions or don’t address the /app directory.
• I understand the basics of service workers in general, but I’m unsure how to adapt it to Next.js’s newer architecture.