Quasar Capacitor History/Hashmode

Excel1 commented 3 months ago

What happened?

I have developed an app with Quasar using Capacitor. My goal is to connect oidc-client.ts to my app. Everything works fine so far, but in production mode the router uses hashmode, although I forced historymode in the configuration file. In the web browser, history mode is used correctly. However, oidc-client.ts expects history mode because it needs the redirect URLs to extract the token, which is not possible in hashmode from Capacitor to Quasar.

What did you expect to happen?

Quasar with Capacitor should using the same router mode. Is it set to history, then history should be used in the app.

Reproduction URL

https://stackblitz.com/edit/quasarframework-dgzdtc?file=src%2Fpages%2FIndexPage.vue,quasar.config.js

How to reproduce?

Create or choose a Quasar Project
Make sure history-mode is set in quasar.config.js
Add capacitor plattform android
Build App for production and open in Android Studio
Go to Chrome Devtools and inspect app
Watch the location url > hashmode "https://localhost/#/"

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Capacitor Mode

Platforms/Browsers

Android

Quasar info output

Operating System - Linux(6.8.0-31-generic) - linux/x64
NodeJs - 18.18.2

Global packages
  NPM - 9.8.1
  yarn - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - 2.5.4
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.30 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - WS
  enp42s0 - 192.168.188.20

Relevant log output

No response

Additional context

No response

Excel1 commented 3 months ago

Does quasar uses different router modes for different deploys? Cause if i force router mode history

  const createHistory = createWebHistory;

it seems to work as it should be

yusufkandemir commented 3 months ago

@Excel1: Does quasar uses different router modes for different deploys?

Yes, it does: https://github.com/quasarframework/quasar/blob/a907ebb8348886a333497be7533a8a97172c4f3c/app-vite/lib/quasar-config-file.js#L760-L765

Please see https://capacitorjs.com/docs/config#schema:

    /**
     * Configure the local scheme on iOS.
     *
     * [Can't be set to schemes that the WKWebView already handles, such as http or https](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/2875766-seturlschemehandler)
     * This can be useful when migrating from
     * [`cordova-plugin-ionic-webview`](https://github.com/ionic-team/cordova-plugin-ionic-webview),
     * where the default scheme on iOS is `ionic`.
     *
     * @since 1.2.0
     * @default capacitor
     */
    iosScheme?: string;

    /**
     * Configure the local scheme on Android.
     *
     * Custom schemes on Android are unable to change the URL path as of Webview 117. Changing this value from anything other than `http` or `https` can result in your
     * application unable to resolve routing. If you must change this for some reason, consider using a hash-based url strategy, but there are no guarentees that this
     * will continue to work long term as allowing non-standard schemes to modify query parameters and url fragments is only allowed for compatibility reasons.
     * https://ionic.io/blog/capacitor-android-customscheme-issue-with-chrome-117
     *
     * @since 1.2.0
     * @default https
     */
    androidScheme?: string;

The default "URL" is https://localhost on Android, and capacitor://localhost on iOS. Since iOS uses a different URL scheme, it's impossible to use the history mode. That's why it enforces hash mode. You could ask why Quasar enforces that on Android as well, and the answer would be unification and simplicity.

As a side information, Cordova, Electron, and BEX use the file scheme(e.g., file:///...), so we also enforce hash mode in those modes.

If it works, you can modify the const createHistory = ... part to satisfy your use case. But, don't expect it to work under all cases. Here are some resources I've found about the topic that you might want to check: https://forum.ionicframework.com/t/redirect-back-to-app-after-oauth2-oidc-login/201056 https://stackoverflow.com/questions/71577408/is-it-possible-to-for-an-ionic5-capacitor3-application-to-complete-an-open-i

So, to sum up, this is not an issue. It's the expected behavior and for a good reason.

Excel1 commented 2 months ago

@yusufkandemir Many thanks for the quick reply and detailed explanation! You have helped me a lot.

Im now using hash mode router like expected 👍🏻

quasarframework / quasar