Quasar Framework — Combinando Boots com detecção de Plataforma.

Um dos pontos fortes do Quasar, é ter um único Source para diversas plataformas, e o faz através de uma abstração bastante simples de ser utilizada.

Para este artigo, é necessário que tenha um projeto criado usando o Quasar Cli, caso não tenha e precise de ajuda para faze-lo: Quasar Framework — Assinando uma APK durante o Build (clique para mais detalhes)

Porém, uma aplicação Cordova tem as suas peculiaridades, assim como o Electron, SSR e até mesmo o bom e velho SPA. para resolver este problema, o quasar disponibiliza um plugin para detecção de plataformas: Platform Detection (clique para mais detalhes)

Porém, você pode acabar com diversos trechos de código semelhantes ao abaixo espalhados por toda a sua aplicação:

if ($q.platform.is.cordova) {
  console.log('cordova')
} else if ($q.platform.is.electron) {
  console.log('electron')
} else {
  console.log('html5')
}

Certo que isto não chega a ser um problema, e que fique claro, que não é errado faze-lo desta forma, na pior das hipóteses, estará importando dependências desnecessárias.

Como alternativa, podemos utilizar de um recurso do quasar.config.js, que permite a alteração a alteração da aplicação baseadas no modo atual. Configuring quasar.conf.js (clique para mais detalhes).

Mais antes de modificamos o quasar.config.js, vamos falar um pouco sobre os arquivos de boot, basicamente são arquivos JS que espoem uma função que o Quasar irá chamar durante o processo de inicialização. É o lugar perfeito para toda e qual quer configuração, seja um plugin para o vuex, um outro plugin para validação, registrar um serviço, componentes de terceiros, etc.: Boot Files (clique para mais detalhes).

Agora vamos criar um boot que terá um serviço que será consumido pela aplicação, e diversos outros boots que irão prover a implementação apropriada para a plataforma atual.

$ quasar new boot service/index
$ quasar new boot service/cordova
$ quasar new boot service/electron
$ quasar new boot service/web-client
$ quasar new boot service/web-server

E agora, temos de incluir estes boots recém criados no quasar.config.js

module.exports = function (ctx) {
  const boot = [
    'i18n',
    'axios',
    'service/index'
  ]
  switch (true) {
    case ctx.mode.cordova:
      boot.push('service/cordova')
      break
    case ctx.mode.electron:
      boot.push('service/cordova')
      break
    case ctx.mode.ssr:
      boot.push({ path: 'service/web-client', client: true })
      boot.push({ path: 'service/web-server', server: true })
      break
    default:
      boot.push('service/web-client')
      break
  }
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot,
    ...
  }
}

agora vamos ver a analisar o conteúdo de src/boot/service/index.

class MyService {
  provider = void 0
  config ({ provider }) {
    this.provider = provider
  }
  doSomething ({ value }) {
    return this.provider.doSomething({ value })
  }
}
const service = new MyService()
export default async ({ Vue }) => {
  Vue.prototype.$service = service
}
export { service }

Basicamente estamos expondo uma Service, cujo os métodos chamam um método com a mesma assinatura no Provider. e agora o conteúdo de src/boot/service/cordova.

import { service } from './index'
class CordovaProvider {
  name = void 0
  constructor () {
    this.name = 'cordova'
  }
  config ({ app, router, store, Vue, ssrContext }) {
    // configurações adicionais no provider que dependem do context 
    // { app, router, store, Vue, ssrContext }
  }
  doSomething ({ value }) {
    console.log(`${this.name}:`, value)
  }
}
const provider = new CordovaProvider()
service.config({ provider })
export default async (context) => {
  provider.config(context)
}

Neste exemplo, os demais arquivos de boot serão bem parecidos, apenas alterando o nome da classe e o valor da propriedade name. porém em um app mais complexo, aqui é onde deverá ser feito os imports necessários para cada plataforma, e as suas respectivas configurações, assim como as devidas implementações.

Agora precisamos testar, então faremos uma chama ao serviço no hook mounted do src/pages/Index.vue

import { uid } from 'quasar'
export default {
  name: 'PageIndex',
  mounted () {
    this.$service.doSomething({ value: uid() })
  }
}

Então, precisamos executar o app em modo SPA

$ quasar dev -m spa

Como pode ser observado no Dev Tools, o seguinte texto deve ter aparecido

web-client: feb3cf77-13f9-9b50-b2df-efe444eb7bf1

Agora precisamos executar o app em outro modo, por conveniência, iremos utilizar o cordova, mas poderá faze-lo com o modo que preferir (electron, ssr, etc). Caso tenha dificuldades em adicionar o modo Cordova, ou debugar o mesmo, pode consultar o seguinte artigo: Quasar Framework — Usando o Nox para debugar uma APK android (clique para mais detalhes).

$ quasar dev -m cordova -T android
// ou
$ yarn cordova:dev

Desta vez, o valor que deve ter aparecido no Dev Tools é:

cordova: 6655e764-73f7-4b11-b684-4fb781b90912

Com isto, conseguimos abstrair aspectos relacionados a plataforma em que o app está sendo executado, assim como que dependências devem set incluídas no build final.