Nuxt•3mo ago

PWA Application going in a infinite loop

My app is going in an infinite loading loop in production. What could be the reason I guess the service worker is try to register again and again or resources are getting cached with duplicate revisions. I am using NUXT module. Here is my configuration

 pwa: {
    injectRegister: "auto",
    registerType: "autoUpdate",
    manifest: {
      name: "My app",
      short_name: "My app",
      theme_color: "#DFE0E2",
      background_color: "#0EA5E9",
      scope: "/",
      start_url: "/",
      id: "/",
      display: "standalone",
      orientation: "portrait",
      icons: [
        {
          src: "pwa-64x64.png",
          sizes: "64x64",
          type: "image/png",
        },
        {
          src: "pwa-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "pwa-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "any",
        },
        {
          src: "maskable-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable",
        },
      ],
    },
     workbox: {
      navigateFallback: "/offline",
      globPatterns: [
        "**/*.{js,json,css,html,ico,svg,png,webp,ico,woff,woff2,ttf,eit,otf}",
      ],
      globIgnores: ["manifest**.webmanifest"],
      cleanupOutdatedCaches: true,
    },
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 20,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallback: "/offline",
      navigateFallbackAllowlist: [/^\/offline$/],
      type: "module",
    },
  },

 pwa: {
    injectRegister: "auto",
    registerType: "autoUpdate",
    manifest: {
      name: "My app",
      short_name: "My app",
      theme_color: "#DFE0E2",
      background_color: "#0EA5E9",
      scope: "/",
      start_url: "/",
      id: "/",
      display: "standalone",
      orientation: "portrait",
      icons: [
        {
          src: "pwa-64x64.png",
          sizes: "64x64",
          type: "image/png",
        },
        {
          src: "pwa-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "pwa-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "any",
        },
        {
          src: "maskable-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable",
        },
      ],
    },
     workbox: {
      navigateFallback: "/offline",
      globPatterns: [
        "**/*.{js,json,css,html,ico,svg,png,webp,ico,woff,woff2,ttf,eit,otf}",
      ],
      globIgnores: ["manifest**.webmanifest"],
      cleanupOutdatedCaches: true,
    },
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 20,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallback: "/offline",
      navigateFallbackAllowlist: [/^\/offline$/],
      type: "module",
    },
  },

3 Replies

kapa.ai•3mo ago

Hi @Muhammad Awais. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there is no explicit documentation or discussion about a PWA infinite loading loop in Nuxt caused by the service worker registering repeatedly or resources being cached with duplicate revisions. However, there are some related issues and best practices that may help you troubleshoot: 1. Manifest and Icon Paths: Ensure your icon paths are correct and that the files are placed in the public/ directory. Incorrect paths or missing files can sometimes cause unexpected PWA behavior. For example, in a similar case, moving icons to the public folder and correcting the sizes format (using x instead of *) resolved issues with PWA registration and manifest loading [PWA not enable with vite-plugin-pwa on Nuxt]. 2. Service Worker Registration in Development: Enabling PWA features in development (devOptions.enabled: true) can sometimes cause hydration errors or unexpected behavior. One user reported that disabling PWA in development resolved their issues, and the PWA worked flawlessly in production [Adding '@vite-pwa/nuxt' to nuxt 3 project causes hydration errors]. Consider setting devOptions.enabled to false in production. 3. Workbox Configuration: Your workbox config looks standard, but ensure that your navigateFallback and navigateFallbackAllowlist are not causing navigation to always redirect to /offline, which could result in a loop if the offline page itself is not properly handled or cached. 4. Duplicate Resource Caching: There is no direct mention of issues with duplicate revisions in the sources, but make sure your globPatterns and globIgnores are not overlapping in a way that could cause the service worker to cache the same resource multiple times. 5. General Troubleshooting: If you suspect the service worker is causing the loop, try unregistering all service workers from your browser and reloading the app. Also, check the browser console for any service worker errors or warnings. If after these checks the issue persists, the knowledge sources do not provide a direct solution for an infinite loading loop in a Nuxt PWA. You may want to consult the official Nuxt PWA module documentation or open an issue with a minimal reproduction for further assistance. Summary:
- Double-check icon paths and manifest formatting. - Try disabling PWA in development mode. - Review your workbox and fallback settings. - Clear existing service workers and caches. - If unresolved, seek help with a minimal reproduction. I'm sorry, but the knowledge sources do not contain enough information to provide a definitive answer for your specific infinite loop issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@860590411629330482> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Muhammad AwaisOP•3mo ago

When I unregister the service worker it works fine but when I reload it again goes in a loop of waiting, installing and activating

Gaming

Programming

PWA Application going in a infinite loop

Did you find this page helpful?