vite-pwa / docs

Documentation: PWA integrations for Vite and the ecosystem
https://vite-pwa-org.netlify.app/
MIT License
197 stars 46 forks source link

when the mode is offline, it should redirect to offline page #158

Open tamanna-makkar opened 5 months ago

tamanna-makkar commented 5 months ago

when the mode is offline, for Every page I wanted to redirect to offline page (pages/offline.vue) below is my existing pwa configuration

pwa: {
    strategies: 'generateSW',
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    manifest: {
      name: "Testing web app BETA",
      short_name: "Testing web app BETA",
      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: '/offline',
      globPatterns: ['**/*.{js,css,html,png,PNG,svg,jpg,JPG,jpeg}'],
    },
    devOptions: {
      enabled: true,
      type: "module",
      navigateFallback: '/',
    }
  }

Can anybody help ?

userquin commented 4 months ago

Try adding navigateFallbackAllowlist: [/^\/offline$/] to workbox entry