VitePWA Issues - registerSW.js is generated but not included in the scripts. Having multiple issues described bellow.

[RAGAdox]

1. Created PWA Config using VitePWA but registerSW.js is not getting included into the index.html file.

Workaround - Include the registerSW.js manually inside root.tsx <body/>

2. index.html is not included in the cache by the service worker even though .html is present in the globPatterns. globPatterns: ["**/*.{js,css,html,png,jpg,jpeg,svg,webp,ico,json}"],

Workaround - Include index.html is additionalManifestEntries (Not Ideal by the name it suggests)
additionalManifestEntries: [{ url: "/index.html", revision: null }],

With the above workarounds offline mode was supported but broke when I tried to add another route to the application.

Let's say I create a route /share-target. On initial load the /share-target page would render properly as there is not cache present.
But on reload index.html from the root is also rendered on top of the /share-target route because of client side hydration.

I would like to know about the proper way to include index.html into the cache with service workers.

My current vitePWA configuration -

VitePWA({ registerType: "autoUpdate", scope: "/", workbox: { globFollow: true, mode: "production", clientsClaim: true, skipWaiting: true, globDirectory: "build/client", globPatterns: ["**/*.{js,css,html,png,jpg,jpeg,svg,webp,ico,json}"], cleanupOutdatedCaches: true, additionalManifestEntries: [ // { url: "/index.html", revision: null }, // { url: "/share-target/index.html", revision: null }, ], navigateFallbackDenylist: [ /^\/api\//, // Exclude API routes ], }, manifest: { name: "RAGAdox", short_name: "RAGAdox", description: "RAGAdox Personal Portfolio", theme_color: "#000000", background_color: "#ffffff", display: "standalone", start_url: "/?utm_source=homescreen", id: "com.ragadox", handle_links: "preferred", categories: ["personal", "portfolio", "resume", "cv"], icons: [ { src: "/apple-touch-icon-precomposed-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/apple-touch-icon-precomposed-512x512.png", sizes: "512x512", type: "image/png", }, ], screenshots: [ { src: "/screenshot-desktop.png", platform: "web", sizes: "2560x1664", form_factor: "wide", label: "Home Page", }, { src: "/screenshot-mobile.png", platform: "web", sizes: "750x1334", form_factor: "narrow", label: "Home Page", }, ], share_target: { action: "/share", method: "GET", params: { url: "url", }, }, }, }),