Reputation: 1
My Nuxt 3 Implementation of this is a reverse proxy through an NGINX environment that goes from 443 https on the client to 80 on the docker container holding my nuxt 3 files/server.
sw.js changes my hostname from https://someplace.com to http://someplace.com and causes a mixed content error in the browser. Am I missing something? I've looked long and hard for a configuration solution to fix this.
It seems it isn't even reading the correct url (strips the .com)
This is the console error:
Mixed Content: The page at 'https://someplace.com/sw.js' was loaded over HTTPS, but requested an insecure resource 'http://someplace.com/about'. This request has been blocked; the content must be served over HTTPS.
Note: My Nuxt app build using static generate (Nuxt Generate), I'm using "nuxt": "^3.12.2"
and "@vite-pwa/nuxt": "^0.10.1"
I try modify config pwa like this, but not working:
pwa: {
strategies: "generateSW",
registerType: "autoUpdate",
registerWebManifestInRouteRules: true,
devOptions: {
enabled: true,
},
workbox: {
clientsClaim: false,
cacheId: "name",
skipWaiting: false,
cleanupOutdatedCaches: true,
globPatterns: ["**/*.{js,css,html,png,svg,webp,ico,jpg}"],
// Custom fetch logic to enforce HTTPS
runtimeCaching: [
{
urlPattern: ({ url }) => url.protocol === "http:",
handler: "StaleWhileRevalidate",
options: {
fetchOptions: {
credentials: "same-origin",
},
cacheName: "https-only-cache",
plugins: [
{
requestWillFetch: async ({ request }) => {
const url = new URL(request.url);
if (url.protocol === "http:") {
url.protocol = "https:";
return fetch(url.href);
}
return request;
},
},
],
},
},
],
},
manifest: false, // Disabled manifest since installation features are not needed
injectRegister: "auto", // Automatically registers the service worker
},
Upvotes: 0
Views: 96