Application going in a infinite loop

[awais019]

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",
    },
  },

[userquin]

provide a minimal reproduction where we can test it 🙏

[Chuuone]

@awais019 Is the issue occurring on Android devices?

[awais019]

@Chuuone not only android only but everywhere

[Chuuone]

I see. Did you by any chance rename your service worker file? This can cause the issue you describe consistently across every device. If thats the case you might have to create an "uninstaller" for the "previous name" you had on the older servicer worker.

In my case the problem seems to occur only on Safari.

My configuration consists of registerType: "autoUpdate" + virtual:worker with immediate: true.

VitePWA({
	disable: mode === "native-production",
	injectRegister: false,
	registerType: "autoUpdate",
	devOptions: {enabled: mode === "development"},
	workbox: {
		sourcemap: false,
		clientsClaim: true,
		skipWaiting: true,
		cleanupOutdatedCaches: true,
		globPatterns: ["**/*.{js,css,html,ico,png,svg}"]
	},
	injectManifest: {sourcemap: false},
	manifest: {
		id: "project",
		name: "site",
		short_name: "site",
		theme_color: "#ffffff",
		background_color: "#ffffff",
		lang: "sv",
		display: "standalone",
		orientation: "portrait",
		scope: url.toString(),
		start_url: url.toString(),
		icons: [
			{
				src: "/pwa-icon/192.png",
				type: "image/png",
				sizes: "192x192",
			},
			{
				src: "/pwa-icon/512.png",
				type: "image/png",
				sizes: "512x512",
			}
		]
	}
})

Virtual worker setup...

//main.ts

application.use(ServiceWorkerPlugin)

service-worker-plugin.ts

const isReady = ref(!isAvailable);

const isUpdating = ref(false);

if(isAvailable) {
		handler = useRegisterSW({
			immediate: true,
			onRegisteredSW: (url, sourceRegistration) => {
				if(sourceRegistration !== undefined) {
					sourceRegistration.update().then(() => {
						isReady.value = true;

						isUpdating.value = sourceRegistration.installing !== null || sourceRegistration.waiting !== null;
					});
				}
			},
			onRegisterError(error) {
				Sentry.captureException(error, {
					tags: {
						component: "service-worker-plugin",
						action: "register"
					},
					contexts: {
						serviceWorker: {
							available: isAvailable,
						}
					}
				});
			}
		});
	}

The site does exactly as you describe and loops infinitely. The trigger for this loop is extremely random, and inconsistent to recreate, otherwise i would have created a reproduction of this by now.

I am using Sentry in my project and the errors related to service workers vary greatly. I wonder @awais019 if you have some error handling service we could see if you experience similar errors in your logging system (if you hopefully have any, so we could narrow down the most possible cause here)

One most probable error from all the ones i get is points at some internal issue with workbox. However i have no way of proving that this error causes the infinite redirect, since i cant recreate it consistently.
Somebody with better knowledge about workbox and the VitePWA scaffold code might be able to confirm this from looking at the picture.

Error 1

Rejected Error wrsParams.serviceWorkers.navigator.serviceWorker.register /tid-rapport/tim-bank

Error 2
With nothing more to go on than

Cannot update a null/nonexistent service worker registration
(How can we be calling update if the service worker isn't registered yet?)

Error 3
The error right before this one is a 404 on this resource:
https://www.google.com/xjs/_/ss/k=xjs.s.JbiDwuHEbmQ.L.W1.O/am=ABABAAJCAAAAAAYAAAAIAQApAAIAAAAAAAAAAAAAAAAAIAAAAAAAAAAiAAAAAAgQAACAAAAAAAAAQAAAAAAAABEAAAuUzQAAAAAQvIAAkAICAAAAgA9gkKsACBAAAAAAAAAAAEgAAAAAAAAAAAARQAAAAAQBAQAEloAAAEAAQgQAAAgAAIiAgAABgIABAEAiAACCRAAIMgAAAAlAAQAAEgAAAAAIAAA4G4CwAAAQEA8AAACABkAQAAAUA4CACAABAAAAAEIAAAAAAAAAAAQAAAAQAAAAEiAuBGEABFQAWHpwBAEAAAAAQgAABAQAAAAABACAEgCIAAAAoAAAgAMAngACPAAAAEAEQAQAQAIAQAAAABAAAABAACAAcAFAAAAAAEYBAAADAEAEcITRAAAAAAAAAAAgABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAgA/d=1/ed=1/br=1/rs=ACT90oHlbFNVqpwp8JmvPhhcsCtRjWCnDA/suggestion_group.css.map

Script https://www.project.com/sw.js load failed TypeError landing

[Chuuone]

@userquin Is there any chance you could help me verify if the "autoUpdate" service worker is configured to handle this scenario?

link

The linked problem seems to resemble exactly what is happening in my case.