Quasar and Cordova Device information v0.13.10

krsyoung

Hey folks,

I’m trying to find the right way to check what type of device the Quasar code is running on in order to decide what API server to use.

I’m making use of vue-cordova in order to have access to Vue.cordova. I’d rather not if there is a native “Quasar” way to do this.

My general approach is:

Have function that determines the base URL
Store the result in a Vuex store
On all API calls, load the base URL from the store and then append the path

This is kinda working except I’m having a hard time properly accessing the Cordova outside of .vue files.

In my function determineApiServer() stored in utils.js I check for iOS simulator as follows:

Platform.is.cordova && Vue.cordova && Vue.cordova.device && Vue.cordova.device.isVirtual === true

However this causes a blank screen when running in an emulator (seems to blow-up before any console.log statements can be processed which makes debugging a little tricky.

Anybody doing something similar / have an idea how I can get away from using VueCordova and access cordova from Quasar?

krsyoung

Ok, so I might try a bit of a running monologue here to see if it helps anybody else!

I now understand that when using Cordova a global cordova is defined. I am also using a plugin for device information (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/) which registers another global device (which I had to add to the .eslintrc.js).

It is then a matter of doing a lot of checks to determine if the globals are defined before passing them to templates:

function getDevice () {
  if (typeof device !== 'undefined') {
    return device
  }
  return null
}

I guess this is where vue-cordova makes things pretty (everything is accessed via Vue.cordova.* which is pretty convenient). I’m not sure if it is a good or bad idea to use vue-cordova along with Quasar?

The last point I’m stuck on now is where is the first place I can put code that will run after Cordova has ondeviceready. I want to initialize the API server once, after the device plugin has become available, and doing so in a way that doesn’t blow things up when running web native.

krsyoung

Here is part three of the saga, to be tested on a real device. In my main.js I added the following:

// trigger initial setting of the API server ahead of device ready, this catches
// if we're deployed via Web
setApiServer(store, null)

document.addEventListener('deviceready', onDeviceReady, false)
function onDeviceReady () {
  setApiServer(store, device)
}

So far seems to be doing the trick.

No More Posting New Topics!

Quasar and Cordova Device information v0.13.10