목차

🎆 소개 및 설명

Having in mind that hybrid (cordova) apps runs on webview, hence having a single main 
Thread it works with.

This time your app restarts from the beginning because it runs on a single Thread.

🎇 대책

i.e: when we leave our app for the camera, it is still active at the background

NB: This would consume user's battery, so endeavor to disable the background activeness 
when you are done with the whole process that took you outside your app. (We wouldn't want 
to drain our users device battery right ?😊

🎞 플러그인 설치

PS: Please permit me to assume, that you already know how to use cordova plugins (i.e 
starts working on DeviceReady). This 
time I will be using it within Quasar (Link to documentation is above, or 
https://quasar.dev)

코드 작성

아래는 카메라 플러그인을 사용하는 방법에 대한 Quasar 문서의 코드 스니펫입니다.

<template>
  <div>
    <q-btn color="primary" label="Get Picture" @click="captureImage" />

    <img :src="imageSrc">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageSrc: ''
    }
  },
  methods: {
    captureImage () {
      navigator.camera.getPicture(
        data => { // on success
          this.imageSrc = `data:image/jpeg;base64,${data}`
        },
        () => { // on fail
          this.$q.notify('Could not access device camera.')
        },
        {
          // camera options
        }
      )
    }
  }
}

NB: Quasar is so rich, that the normal deviceReady function a cordova plugin needs to 
work, is prebuilt into the runtime, hence, once the app is created, the device is already 
ready (Oops!!, I did it again, word repetition 😋).

Also, readup on the documentation of each cordova plugin, as accessing them might differ, 
but a hack I found, is to use window.plugin to access the plugins in my 
vue/quasar files, 
else Uncle ESLint will keep scolding you with errors 🤣.

아래는 Quasar에 대한 약간의 조정과 함께 백그라운드 모드 플러그인을 사용하는 방법에 대한 Katzar의 스니펫입니다.

 mounted () {
    // 1) Request background execution
    window.plugin.backgroundMode.enable();
},
beforeDestroy () {
    // Disabling the background Mode
    window.plugin.backgroundMode.disable();
}

* The mounted is a LifeCycleHook in vue, meaning that once the companent/page this code 
  appears on is mounted, the app background mode is automaticaly enabled. Then once you're 
  done, you choose to have another function call, say beforeDestroy; which is 
  another 
  vue LifeCycleHook, to disable the backgroundMode

* Please note how I used window.plugin and not cordova.plugins as 
  seen from the actual github repo, well, Cordova.plugins returned "undefine"</b>

안드로이드 포그라운드 권한

PS: I'm a JavaScript Dev, don't know much about Java, so I will simply Copy and Paste, I 
pray WE BOTH understand what we pasted 😋😉

// Simply add the uses permission to your AndroidManifest.xml file
<manifest ...>
     ...
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
     ...
     <application ...>
     ...
</manifest>

요약