All files / src/components/shared UpdateSnackbar.vue

100% Statements 25/25
100% Branches 12/12
100% Functions 10/10
100% Lines 25/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96    1x                   1x           3x                     2x                     6x                       13x   13x   13x 13x 13x   13x 13x 13x 7x         7x 7x 7x 6x 6x 5x 5x         7x 1x         1x 1x                  
<template>
  <v-snackbar
    v-model="updateFound"
    content-class="update"
    :timeout="-1"
    location="bottom end"
    rounded="lg"
    min-width="240"
    elevation="0"
    variant="elevated"
  >
    <v-alert
      v-model="updateFound"
      color="minsk_900"
      prominent
      rounded="lg"
      icon="browser_updated"
    >
      <div class="text-subtitle-2">
        <span>{{ t('texts.updateDetected') }}</span>
        <br />
        <span>{{ t('texts.pleaseUpdateAsap') }}</span>
      </div>
      <template #append>
        <v-btn
          v-if="!updateInstalled"
          :loading="true"
          disabled
        >
          <span>{{ t('labels.installing') }}</span>
        </v-btn>
        <v-btn
          v-if="updateInstalled"
          data-testid="update"
          color="minsk_500"
          variant="flat"
          size="large"
          :loading="updateLoading"
          @click="completeRegistration"
        >
          <span>{{ t('labels.update') }}</span>
        </v-btn>
      </template>
    </v-alert>
  </v-snackbar>
</template>
 
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ServiceWorkerService } from '@/services/service-worker.service';
import { useI18n } from 'vue-i18n';
 
let registration: ServiceWorkerRegistration | undefined = undefined;
 
const { t } = useI18n();
 
const updateFound = ref<boolean>(false);
const updateInstalled = ref<boolean>(false);
const updateLoading = ref<boolean>(false);
 
onMounted(async () => {
  registration = await ServiceWorkerService.Instantiate().getRegistration();
  if (registration) {
    setupCheck(registration);
  }
});
 
function setupCheck(registration: ServiceWorkerRegistration) {
  registration.addEventListener('updatefound', () => {
    updateFound.value = true;
    if (registration.installing) {
      registration.installing.addEventListener('statechange', () => {
        if (registration.waiting) {
          updateInstalled.value = true;
          console.log('[app]Service Worker update available');
        }
      });
    }
  });
  setInterval(() => {
    registration.update();
  }, 1000);
}
 
function completeRegistration() {
  updateLoading.value = true;
  registration?.waiting?.postMessage('SKIP_WAITING');
}
</script>
 
<style lang="scss">
.update .v-snackbar__content {
  padding: 0 !important;
}
</style>