offline mode: when I navigate to another route, it shows nothing, but when I refresh then it shows the page from cache

[tamanna-makkar]

Help needed! Am facing some issues, when I switched to offline via network tab (1) when I navigate to another route, initially it shows the blank page, it works only on refresh (2) Images are not showing, they are not from assets but hosted on another domain, like for ex - https://images.delta.com/name_of_image.jpg

and my configurations looks like this

pwa: {
    strategies: 'generateSW',
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    manifest: {
      name: "Testing app",
      short_name: "Testing app",
      start_url: "/?pwa",
      scope: "/",
      icons: [
          {
              src: "maskable_icon.png",
              sizes: "384x384",
              type: "image/png",
              purpose: "maskable"
          },
          {
              src: "android-chrome-192x192.png",
              sizes: "192x192",
              type: "image/png",
              purpose: "any"
          },
          {
              src: "android-chrome-256x256.png",
              sizes: "256x256",
              type: "image/png"
          },
          {
              src: "icon.png",
              sizes: "512x512",
              type: "image/png"
          }
      ],
      theme_color: "#245BA7",
      background_color: "#000000",
      display: "standalone"
    },
    workbox: {
      navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,png,PNG,svg,jpg,JPG,jpeg}']
    },
    devOptions: {
      enabled: true,
      type: "module",
      navigateFallback: '/',
    }
  }

also I pre-rendered the nitro routes

// pre-render the routes

 async 'nitro:config'(nitroConfig) {
      if (nitroConfig.dev) { return }
      const getMenuItem = useMenuNavigation()
      const response = await fetch(`${process.env.INTERNAL_API_URL}/api/globalMenuItems`)
      const { main_menu } = await response.json()
      if (nitroConfig.prerender && nitroConfig.prerender.routes) {
        nitroConfig.prerender.routes?.push(...main_menu.map((item) => getMenuItem(item).link))
      }
      console.log(nitroConfig.prerender, 'nitroConfig.prerender')
    }

Sorry, if something I missed or wrong, Can anybody please help ?

[userquin]

If using SSR app, you will need to prerender index.vue page (that's the fallback page /). Check https://github.com/vite-pwa/sveltekit/issues/65#issuecomment-1734213190 .

[tamanna-makkar]

@userquin did you mean pre-render the / page ?

prerender: [
    routes: ['/']
  ]

[userquin]

yes

[tamanna-makkar]

@userquin I already added the dynamic routes, so it will be pushed to prerender.routes

async 'nitro:config'(nitroConfig) {
   if (nitroConfig.dev) { return }
   const getMenuItem = useMenuNavigation()
   const response = await fetch(`${process.env.INTERNAL_API_URL}/api/globalMenuItems`)
   const { main_menu } = await response.json()
   if (nitroConfig.prerender && nitroConfig.prerender.routes) {
     nitroConfig.prerender.routes?.push(...main_menu.map((item) => getMenuItem(item).link))
   }
   console.log(nitroConfig.prerender, 'nitroConfig.prerender')
 }

still no any changes, page is working on refresh but not when I navigate to another page

[userquin]

Create a minimal reproduction using @vite-pwa/create-pwa, I'll try to check it later...

Check https://vite-pwa-org.netlify.app/guide/scaffolding.html : select Vue and then Nuxt when selecting the framework

[tamanna-makkar]

okay @userquin I will make it if I wanted it to redirect to simple offline.vue file which normally says( your are offline now ) instead of default offline page what should I do for that ? it would be very helpful if you can answer it my client needs it urgently for a quick fix

Much thanks @userquin

[userquin]

If you want to redirect to custom page (pages/offline.vue), you need to prerender the route, otherwise you will get infinite redirection when offline. In the runtime caching just redirect to that page route (/offline): you can add some logic in the callback, iirc you have the original request, or just add it to the context and use it (check callbacks params)