Offline next JS PWA 2

I have a next-js PWA, I want to do the following:

1. the website should work completely offline
2. post requests that are sent to the API endpoint /api/submitInspection while offline, should be queued and synced when back online using the BackgroundSyncPlugin.
- Request form: src\app\_components\inspections\InspectionForm.jsx
3. use a custom fallback page in case if the page or request is not cached
- I tried to do this using src\app\offline\page.jsx

work files:
1. next.config.mjs
2. service-worker\index.js
3. src\app\_components\inspections\InspectionForm.jsx


Ideal Applicant:
- Proficient in Next.js and PWA development
- Prior experience with data synchronization
- Able to provide a detailed solution report

https://developer.chrome.com/docs/workbox/modules/workbox-background-sync