Has anybody else bumped into a problem with vue 2, vite, service employees and firebase internet hosting whereby Apple gadgets wish to replace their service employees extra ceaselessly than android gadgets?

I’ve set every part up precisely as per the docs, however iOS gadgets particularly maintain doing a service employee refrsh/replace even once I have not uploaded a brand new construct to Firebase.

I do know it is solely occurring with Apple gadgets as a result of I can question and filter my Google Analytics for refreshes and correlate it to machine model – within the screenshot, Apple gadgets are updating day-after-day, non-Apple solely once I truly launched a brand new construct to Firebase.

That is the service work code under:

file – useRegisterSW.js as a mixin

import gaTag from "@/mixins/gaTag";
    
    export default {
      mixins: [gaTag],
      title: "useRegisterSW",
      knowledge() {`
        return {
          updateSW: undefined,
          offlineReady: false,
          needRefresh: false,
        };
      },
      async mounted() {
        strive {
          const { registerSW } = await import("digital:pwa-register");
          const vm = this;
          this.updateSW = registerSW({
            fast: true,
            onOfflineReady() {
              vm.offlineReady = true;
              vm.onOfflineReadyFn();
            },
            onNeedRefresh() {
              vm.needRefresh = true;
              vm.onNeedRefreshFn();
            },
            onRegistered(swRegistration) {
              swRegistration && vm.handleSWManualUpdates(swRegistration);
            },
            onRegisterError(e) {
              vm.handleSWRegisterError(e);
            },
          });
        } catch {
          console.log("PWA disabled.");
        }
      },
      strategies: {
        async closePromptUpdateSW() {
          this.offlineReady = false;
          this.needRefresh = false;
        },
        onOfflineReadyFn() {
          console.log("onOfflineReady");
        },
        onNeedRefreshFn() {
          this.$gaExperience("refreshneeded", true);
          console.log("onNeedRefresh");
        },
        updateServiceWorker() {
          this.$gaClickLink("UpgradeApp");
          console.log("updating");
          this.updateSW && this.updateSW(true);
          this.$gaInteraction("updatingserviceworker", true);
        },
        handleSWManualUpdates(swRegistration) {},
        handleSWRegisterError(error) {
          this.$gaExperience("swregistererror", error);
        },
      },
    };

That is the place it is referred to as in App.vue (related elements solely)

<template>
  <div id="app" fashion="padding-bottom: 85px">
    <b-alert :present="needRefresh" class="position-fixed fixed-bottom py-4 m-0 rounded-0" fashion="z-index: 2000"
      variant="warning" @click on="updateServiceWorker()">
      <div class="d-flex align-items-center justify-content-between">
        New model out there!
        <b-button @click on="updateServiceWorker()" dimension="sm" variant="outline-primary">Replace</b-button>
      </div>
    </b-alert>
    
</template>

<script>
import { mapState } from "vuex";
import useRegisterSW from '@/mixins/useRegisterSW'

export default {
  elements: {

  },
  mixins: [useRegisterSW],
  knowledge() {
    return {
      refreshing: false,
      registration: null,
      onLine: navigator.onLine,
      showBackOnline: false,
      dismissSecs: 3,
    };
  },
  computed: {

  },
  mounted() {
    window.addEventListener("on-line", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  beforeDestroy() {
    window.removeEventListener("on-line", this.updateOnlineStatus);
    window.removeEventListener("offline", this.updateOnlineStatus);
  },
  created() {
  },
  watch: {
    onLine(v) {
      if (v) {
        this.showBackOnline = this.dismissSecs;
        setTimeout(() => {
          this.showBackOnline = false;
        }, 4000);
      }
    },
  },
  strategies: {
    updateOnlineStatus(e) {
      const { sort } = e;
      this.onLine = sort === "on-line";
    },
  },
};
</script>

​

Tried configuring as per the documentation however Apple gadgets nonetheless refresh too ceaselessly – I’d count on them to refresh solely when a brand new construct is made and pushed