Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tamanna-makkar opened this issue Jun 5, 2024 · 8 comments

Comments

@tamanna-makkar
Copy link

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
Copy link
Member

userquin commented Jun 5, 2024

If using SSR app, you will need to prerender index.vue page (that's the fallback page /). Check vite-pwa/sveltekit#65 (comment) .

@tamanna-makkar
Copy link
Author

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

prerender: [
    routes: ['/']
  ]

@userquin
Copy link
Member

userquin commented Jun 5, 2024

yes

@tamanna-makkar
Copy link
Author

tamanna-makkar commented Jun 5, 2024

@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
Copy link
Member

userquin commented Jun 5, 2024

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
Copy link
Author

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
Copy link
Member

userquin commented Jun 7, 2024

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)

@userquin
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants