next-pwa: dynamicStartUrl Not Working As Expected on Mobile

Provide environment information

"next": "13.4.12",    "@ducanh2912/next-pwa": "^9.5.0",

Whose documentation is this feedback for?

@ducanh2912/next-pwa

Describe the problem

this is my current config for the pwa I’m trying to create.

const withPWA = require("@ducanh2912/next-pwa").default({
  disable: false,
  dest: "public",
  cacheOnFrontEndNav: false,
  cacheStartUrl: true,
  dynamicStartUrl: true,
  workboxOptions: {
    skipWaiting: true,
  },
});

My startUrl or “/” is an async server component where I make a fetch to see whether a user exists based on a token (retrieved using cookies from “next/headers”) and if they do then I render UserComponent or else I render a vanilla home page.

When I visit the page on the website, when I install the pwa on my computer it works as expected, by which I mean the page is dynamically rendered based on the data retrieved by the fetch call on the server before page load.

However, when I install the pwa on an android device , the first time the pwa loads, I get the vanilla home page, despite me manually knowing a token is present. If I pull to refresh the screen, it updates to the correct UserComponent view.

I have tried to the setting cacheStartUrl to false in the config as well and got the same result.

Any advice on how I can fix this or what I’m doing wrong?

Expected behavior

when the pwa is installed on mobile, the startUrl which is an async server component should dynamically render UI based on state returned by a fetch call on load.

Screenshots (if relevant)

No response

Additional information (if relevant)

Turning the startUrl into a client component and running the fetch in a useEffect does work. However I’d prefer to not do that, if possible.