is @vite-pwa/nuxt ssr-friendly?

[prstwo]

hi, I'm using "@vite-pwa/nuxt": "^0.0.4", in my nuxt version 3 project. whenever I refresh the page, I see first the fallback page appeared and then the content of the website, here is the config:

pwa: {
  registerType: 'autoUpdate',
  registerWebManifestInRouteRules: true,
  manifest: {
    "name": "Fares bazar",
    "short_name": "Faresbazar",
    "start_url": "/",
    "display": "fullscreen",
    "background_color": "#ffffff",
    "lang": "fa",
    "scope": "https://faresbazar.com",
    "theme_color": "#d71920",
    "icons": [
      {
        "src": "faresbazar-192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "faresbazar-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "description": "جدیدترین و خوش‌نام‌ترین محصولات دیجیتال را براحتی از طریق نرم‌افزار فارِس بازار خرید نمایید.",
    "dir": "auto",
    "display_override": [
      "fullscreen",
      "standalone"
    ],
    "categories": [
      "shopping"
    ],
    "screenshots": [
      {
        "src": "screenshot.png",
        "sizes": "1280x800",
        "type": "image/png"
      },
      {
        "src": "screenshot.png",
        "sizes": "750x1334",
        "type": "image/png"
      }
    ]
  },
  workbox: {
    navigateFallback: 'fallback',
    globPatterns: ['**/*.{js,css,html,png,svg,ico}'
    ],
  },
  client: {
    installPrompt: true,
    // you don't need to include this: only for testing purposes
    // if enabling periodic sync for update use 16 minutes or so (periodicSyncForUpdates: 60*15)
    periodicSyncForUpdates: 3600,
  },
},

clearing site data didn't solve my problem. the project contains multiple routes and pages. showing fallback page is not specific to one page

[Guito]

Also happening to me. Did you find a solution @prstwo ?

[userquin]

When using a meta framework we need to deal with server pages. We need the context where the PWA will run in the client, for example:

• do you have server pages (when using Nuxt, are you using nuxi generate or nuxi build)?
• are you generating static pages (nitro.prerender)?
• do you have protected pages (sign-in)?

A simple workaround for Nuxt will be an empty index.vue page (use it as the fallback for offline: navigateFallback: '/'), then add a simple middleware (only for client) to redirect/navigate to the home page (if you've protected pages, you can use the auth middleware redirecting to the protected home page when signed-in): check this middleware https://github.com/elk-zone/elk/blob/main/middleware/auth.ts and the index.vue page in the elk.zone repo.

Any api call and server page should be excluded from the sw interception: for server pages, you should add the required logic to avoid accessing those server pages if you're offline (you can also use a simple client middleware with offline logic redirecting to some page or just throw an error and handle it in a custom error page): check https://github.com/elk-zone/elk/blob/main/service-worker/sw.ts#L36-L50 (you can use workbox.navigateFallbackDenylist if using generateSW strategy).

[Guito]

Thanks for your response @userquin

In my case I am deploying to Vercel and I have protected pages.

I'm not totally sure if I understand the middleware part. It seems you want to always get the user to a default page, but we wanted them to enter the page they navigated to. So, for example:

User enters /test and he gets redirected to /
We want the user to enter /test and stay there

If we don't use PWA it works fine, but with PWA it goes to /

[userquin]

If we don't use PWA it works fine, but with PWA it goes to /

Because any server page is missing from sw precache and the sw will return the content of /, if you exclude /test from sw interception (add that route to workbox.navigateFallbackDenylist), it should work: beware, when offline browser offline page will be there when requesting /test.

For example, if you go to https://vitesse-nuxt3.netlify.app/, enter aaa in the input, click the Go button and then refresh the page once in /hi/aaa page, you can check the response in the network tab, the request being intercepted by the sw returning the / page content.

[userquin]

In previous example, the hi route excluded in Nitro prerender, and so the html page will be missing and the entry in the sw precache manifest also missing: https://github.com/antfu/vitesse-nuxt3/blob/main/nuxt.config.ts#L36-L39.

Nuxt by default will exclude any page when using build command. In the example we exclude the hi route.

[Guito]

I confirm this works. Thank you again @userquin, you are very helpful

[woldtwerk]

When I include '@vite-pwa/nuxt' in modules I get data-ssr="false".

Is this related?

[userquin]

Check vite-pwa/nuxt#74