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

is @vite-pwa/nuxt ssr-friendly? #58

Open
prstwo opened this issue Jun 25, 2023 · 8 comments
Open

is @vite-pwa/nuxt ssr-friendly? #58

prstwo opened this issue Jun 25, 2023 · 8 comments

Comments

@prstwo
Copy link

prstwo commented Jun 25, 2023

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

Guito commented Aug 30, 2023

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

@userquin
Copy link
Member

userquin commented Sep 3, 2023

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

Guito commented Sep 6, 2023

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

userquin commented Sep 6, 2023

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.

imagen

@userquin
Copy link
Member

userquin commented Sep 6, 2023

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

Guito commented Sep 6, 2023

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

@woldtwerk
Copy link

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

Is this related?

@userquin
Copy link
Member

Check vite-pwa/nuxt#74

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

4 participants