Abdul Rahmat
Abdul Rahmat

Reputation: 1

Nuxt 3 - Vite Pwa: Service Worker redirects to http in reverse proxy?

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

Answers (0)

Related Questions