Quasar: Capacitor mode not working with an https devServer

[plmercereau]

Describe the bug
Capacitor doesn't seem to be recognised when running in dev mode with an https devServer.

Codepen/jsFiddle/Codesandbox (required)
--> capacitor mode, won't help

To Reproduce
Steps to reproduce the behavior:

1. Install a new Quasar 2 project
2. Change https: true in the devServer section in quasar.conf.js
3. Add to App.vue the following code:

import { Platform } from 'quasar'
console.log(Platform.is)

Expected behavior
When running capacitor with quasar dev -m capacitor -T android, the value of Platform.is is:

{
  android: true
  capacitor: true
  chrome: true
  mobile: true
  name: 'chrome'
  nativeMobile: true
  nativeMobileWrapper: 'capacitor'
  platform: 'android'
  version: '83.0.4103.106'
  versionNumber: 83
  webkit: true
}

But when turning in devServer.https to true in quasar.conf.js, Platform.is then is:

{
  android: true
  chrome: true
  mobile: true
  name: 'chrome'
  platform: 'android'
  version: '83.0.4103.106'
  versionNumber: 83
  webkit: true
}

It basically behaves like capacitor native has not been loaded at all.
I wish I could use the http devServer mode, but unfortunately I have to use navigator.mediadevices that can only be accessed in a secure context...

Platform (please complete the following information):
OS: MacOS
Node: v13.11.0
NPM: 6.9.0
Yarn: 1.22.4
Browsers: N/A
iOS: N/A
Android: 10
Electron: N/A

Additional context
@quasar/app: 2.0.0
@capacitor/core: 2.2.0

It may worth to notice the following error in the ADB logs:

I/X509Util: Failed to validate the certificate chain, error: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

and a recurrent:

E/chromium: [ERROR:ssl_client_socket_impl.cc(959)] handshake failed; returned -1, SSL error code 1, net_error -202

Many, many thanks in advance!

[bezhanSalleh]

The issue is with your localhost certification you need to generate or renew/setup ssl certificate for your local development first.

Enabling Https for Local Development

It should work afterwards just in case you run into trouble you can always use the generated certificate to open a Https enabled public server
For more info on how to setup just run the below command.
$ quasar serve -h

[plmercereau]

Hi @bezhanSalleh, and thanks for this.
It is definitely related to certificates, but from what I understand and what I tried, a self-signed localhost doesn't solve the problem: capacitor runs an app that access the webpack devServer from a webview, through the local network. As a consequence, the certificate must be generated for the ip of the machine that runs quasar dev.

It becomes a problem as the webview on the android device won't accept the certificate as being signed (whereas I think any localhost certificate is considered safe by default).

I also tried tunnelling the webpack devServer through ngrok / localhost.run, but quasar automatically overrides the server.url prop in capacitor.config.json with the ip address of the host machine...

[webnoob]

@nklayman Can you weigh in on this please?

[nklayman]

This line determines if the app is running on capacitor. For some reason, it appears window.Capacitor is not defined when this code is ran, but is defined when user code runs in App.vue. As a workaround just use !!window.Capacitor to determine if you are running in capacitor. This looks like a problem with capacitor rather than quasar as window.Capacitor should be defined then.

[webnoob]

Closing as Noah has provided a solution.

[nklayman]

A bug report should probably be created for capacitor as window.Capacitor isn't available when it should be. I'll do this when I get the chance.