Detecting "platform is desktop" does not seem to work with Firefox or Edge on SSR with PWA client takeover

[jelices]

Hello,

This is my first post here so excuse if I may be missing something…

I have a page with a typical layout that uses <q-toolbar> containing <q-btn @click="leftDrawerOpen = !leftDrawerOpen"> and then a <q-drawer v-model="leftDrawerOpen">.

This is all in a .vue file. The data, as it is supposed to work with SSR looks like this:

data() {
  return {
    leftDrawerOpen: this.$q.platform.is.desktop
  };
}

This way, the drawer will be open by default on any desktop platform. As I have tested, it does work with Chrome or Internet Explorer, but does not work with Firefox or Edge using SSR with PWA takeover (all under Windows.) While using quasar dev (so only PWA) it seems to work everywhere though.

I have tried using !this.$q.platform.is.mobile or even this.$q.platform.is.desktop || this.$q.platform.is.firefox but it does not work. The drawer is closed for Firefox in this case.

I have also tried delaying the platform detection and adding the initialization code inside mounted this way:

mounted: function () {
  this.leftDrawerOpen = this.$q.platform.is.desktop
}

or even:

mounted: function () {
  this.$nextTick(() => this.leftDrawerOpen = this.$q.platform.is.desktop)
}

But nothing works building with quasar build -m ssr.

Does someone know whether this is a bug or am I doing something wrong?

I am using the latest Quasar 1.0.4. This happens with previous versions as well but I have updated everything to make sure this is not something already fixed.

Thank you!

[patryckx]

“There is a good reason for this. In a client-only app, every user will be using a fresh instance of the app in their browser. For server-side rendering we want the same thing. Each request should have a fresh, isolated app instance so that there is no cross-request state pollution. So Platform and Cookies need to be bound to each request separately.”

https://quasar.dev/quasar-cli/developing-ssr/ssr-frequently-asked-questions

[patryckx]

@jelices It is important that you read all the SSR documentation as it works differently from a SPA.

https://quasar.dev/quasar-cli/developing-ssr/introduction

[jelices]

Thank you for your responses!

Sorry, I forgot to mention that this happens with SSR with PWA client takeover. My mistake. If I understand correctly, on the client side, the platform detection should work as a PWA. In fact, I have noticed that the Quasar Dev web site behaves differently depending on the browser. For instance, on my Windows PC, the page:

https://quasar.dev/options/platform-detection#Usage

Has the menu drawer open on a fresh load with Chrome, but closed with Firefox. I don’t know how it has been coded, but I am guessing that it is the same issue I am experiencing.

[jelices]

Could someone with privileges please change the title to “on SSR with PWA client takeover”? Thank you!

[metalsadman]

@jelices the author can change it i think.

[Nicholas]

I have come across this bug too.

My layout drawer keeps closing whenever I enter the page on Firefox and Edge (I’m using a standard Quasar 1.0 SPA).
Works fine on Safari, Chrome.

[metalsadman]

@Nicholas i suggest opening a different thread, as this one was ssr/pwa issue.

[jelices]

Edited the question. It is still unanswered. Thanks!