[Quasar & Capacitor] 화면켜짐 유지하기(Cordova Insomnia plugin)

19 Apr 2021 in Javascript on Javascript, Vue, Quasar

Quasar 에 capacitor 모드추가하기

quasar mode add capacitor
quasar dev -m capacitor -T android

프로젝트에 Insomnia 플러그인 추가하기

ionic native 에 있는 플러그인을 사용하기 위해서 @ionic-native/core 패키지도 추가적으로 설치가 필요하다.

cd src-capacitor
npm i @ionic-native/core cordova-plugin-insomnia @ionic-native/insomnia

npx cap sync

# quasar dev 로 web 모드로 실행할때 depencency 오류가 나는데 capacitor 프로젝트 상위 프로젝트에도 똑같이 설치해 주면 해결된다.
cd ..
npm i @ionic-native/core cordova-plugin-insomnia @ionic-native/insomnia

vue 에서 플러그인 사용하기

<template>
    <q-page class="flex flex-center"> 화면 꺼짐 방지 </q-page>
</template>

<script>
    import { Platform } from 'quasar';
    import { Insomnia } from '@ionic-native/insomnia';

    export default {
        name: 'PageIndex',
        created() {
            // 모바일 환경일때만 실행되도록
            if (this.$q.platform.is.capacitor) {
                Insomnia.keepAwake().then(
                    () => console.log('Insomnia keepAwake success'),
                    () => console.log('Insomnia keepAwake error')
                );
            }
        },

        destroyed() {
            // 종료시 다시 원래대로
            if (this.$q.platform.is.capacitor) {
                Insomnia.allowSleepAgain().then(
                    () => console.log('Insomnia allowSleepAgain success'),
                    () => console.log('Insomnia allowSleepAgain error')
                );
            }
        },
    };
</script>