Application going in an infinite loading loop #201
Description
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. Here is my configuration
strategies: "injectManifest",
srcDir: "service-worker",
filename: "sw.ts",
registerType: "autoUpdate",
manifest: {
name: "My App",
short_name: "MyApp",
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",
},
],
},
injectManifest: {
globPatterns: [
"**/*.{js,css,html,png,svg,ico,json,woff,woff2}",
],
},
client: {
installPrompt: true,
periodicSyncForUpdates: 20,
},
devOptions: {
enabled: true,
suppressWarnings: true,
navigateFallback: "/",
navigateFallbackAllowlist: [/^\/$/],
type: "module",
},
},
Service worker
/// <reference lib="WebWorker" />
/// <reference types="vite/client" />
import { clientsClaim } from "workbox-core";
import {
cleanupOutdatedCaches,
createHandlerBoundToURL,
precacheAndRoute,
} from "workbox-precaching";
import { NavigationRoute, registerRoute } from "workbox-routing";
import {
tryUploadPendingSubmissions,
tryUploadingPendingFiles,
} from "./upload";
import { removeOldData } from "./db";
declare let self: ServiceWorkerGlobalScope;
// self.__WB_MANIFEST is default injection point
precacheAndRoute([...self.__WB_MANIFEST, "/", "/offline"]);
// clean old assets
cleanupOutdatedCaches();
// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL("/")));
self.skipWaiting();
clientsClaim();