PWA starter kit: not feeling native for half the users?

[LaurentPayot]

I’m sure you know that Apple is finally implementing service workers, so I’m considering switching to the PWA starter kit.

The definition of a Progressive Web App can be:
a mobile web app that feels and behaves like a native mobile app.

In the US and in the UK, half of the users have an android smartphone, and the others have an ios smartphone.
But from what I understant I have to chose one theme (mat or ios) to build my PWA with Quasar.
So for half of my users in US/UK my Progressive Web App will feel that is was obviously built for the other 50% of people. That’s a big problem

Would it be possible to generate two separate PWA builds like dist/mat/ and dist/ios and to have some magic happening in the root dist/ directory files to detect the user’s platform and use the right build?
Or maybe router aliases tricks, or just whatever works without the same content on different URLs for obvious SEO reasons.

What are your thoughts everyone?

[RiyadhZ]

Hi
I think that you can generate 2 separate builds of your project, one with material design and the other with ios template. Then check where the request is coming from, I believe that IPad and IPhone are visible in the user agent http header (Not sure but you have to check). Then serve the build that is suitable for that platform.

Hope this helps.

[Zambiorix]

Even better would be to have runtime switchable themes.
But I guess that would require a major refactor of the framework

[LaurentPayot]

I’ve just done it with two separated builds (of my non-PWA app for now) merged in a “double-dist” directory. It’s not to complicated but it’s a bit messy because I needed to modify my (complicated) routes.
I simply had to modify the build publicPath in config/index.js so the build process generates the right links, and detect the os with navigator.userAgent in index.html to redirect.
It’s pretty awesome now that it’s working with my app. I’m switching to PWA asap.

@rstoenescu do you think it could be a standard PWA starter kit option (if not feature)?

[rstoenescu]

Main problem with dynamic changing the theme at runtime is webpack related. Can’t manage CSS since webpack is doing it. Once you import some CSS it is there to stay. Before switching to webpack + vue-router, Quasar had its own build system and dynamic theme switching was possible. It actually detected if you’re on an Android or iOS device and delivered the according theme. Looking forward to a solution with webpack if anyone has time for this. I’m currently working on v0.15 goodies and I’m 200% overloaded. Any help on theme switching is greatly appreciated.