Як визначити висоту статус бара Cordova iOS Android

Якщо ви використовуєте cordova-plugin-statusbar, з параметром накладення статус бару на додаток. То ви скоріш за все стикнулися з проблемою визначення висоти цього статус бару. Нажаль стандартних методів для визначення висоти статус бару поки-що нему, але це не проблема. 

Після підключення плагіну, у вас стане глобально доступна змінна StatusBar. І ви можете подумати, що можете вирішити проблему через підключення та відключення статус бару, типу так: 

document.addEventListener('deviceready', () => {
      if(typeof StatusBar !== 'undefined') {
        var initialHeight = document.documentElement.clientHeight;
        StatusBar.overlaysWebView(false);

        function resizeFunction() {
            console.log(document.documentElement.clientHeight - initialHeight)  // HEIGHT
            window.removeEventListener('resize', resizeFunction);
            StatusBar.overlaysWebView(true);
        }
        window.addEventListener('resize', resizeFunction);
      }
 });

Але тоді ви зітнкнетеся з проблемою, що при методі resume, у вам буде не корректно опрацьовуватися document.documentElement.clientHeight, і насправді корректного рішення на JS нема, але є на яві. Для цього вже є готовий плагін - dfocus-fm-cordova-plugin-statusbar-height. 

Після підключення плагіну, нам стане доступне апі:

function getStatusbarHeight() {
    window.StatusBarHeight.getValue(
        function(height) {
            console.log(height);
        },
        function(error) {
            console.log(error);
        }
    )
}

document.addEventListener('deviceready', getStatusbarHeight, false);

На прикладі апки VueJS:

<template lang="pug">
.g(:style="{'--bartop': bartop + 'px'}")
  .g__gv
    RouterView(v-slot="{ Component }")
      transition(name="pg" mode="out-in")
        component(:is="Component")
  bottomNav
</template>

<script setup>
import { RouterView } from 'vue-router'
import bottomNav from './components/frames/bottomNav.vue'
import { onMounted, ref, nextTick } from "vue"

const bartop = ref(0)

const phoneBarUpdate = async () => {
  if(typeof StatusBar !== 'undefined') {
    window.StatusBarHeight.getValue(val => {
      bartop.value = val
    })
  }
}

onMounted(() => {
    document.addEventListener('deviceready', phoneBarUpdate);
    document.addEventListener('resume', phoneBarUpdate);
})
</script>

<style lang="stylus">
.g
  padding-top 25px
  padding-bottom 25px
  padding-left 16px
  padding-right 16px
  &__gv
    padding-top var(--bartop)
    
.pg-enter-active, .pg-leave-active
  transition: all 0.15s ease;

.pg-enter-from, .pg-leave-to
  opacity: 0;
  
</style>

Таким чином ми можемо задати відступ від шапки, який буде динамічним для будь яких пристроїв.

Якщо вас цікавить чи буде піддьоргування, то не буде, оскільки така зміна відбувається за 0.0003 секунди, але якщо ви параноїте, то можете додати анімації предзавантаження. 

І не забувайте, щоб змінна кордови, або її плагінів стали доступні в додатку, ви повинні підключити її в своєму індексному файлі, кордова генерить свій файл в корені додатку:

<script type="text/javascript" src="cordova.js"></script>