src/components/ConnectivityChecker.vue

   1 <template>
   2   <div v-if="offline" class="offline-message">
   3     <i class="far fa-dizzy"></i>
   4     <h1>
   5       You're offline friend.
   6       <span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span>
   7     </h1>
   8   </div>
   9 </template>
  10
  11 <script>
  12 export default {
  13   name: "ConnectivityChecker",
  14   data: function () {
  15     return {
  16       offline: false,
  17     };
  18   },
  19   created: function () {
  20     if (/t=\d+/.test(window.location.href)) {
  21       window.history.replaceState({}, document.title, window.location.pathname);
  22     }
  23     let that = this;
  24     this.checkOffline();
  25
  26     document.addEventListener(
  27       "visibilitychange",
  28       function () {
  29         if (document.visibilityState == "visible") {
  30           that.checkOffline();
  31         }
  32       },
  33       false,
  34     );
  35     window.addEventListener(
  36       "online",
  37       function () {
  38         that.checkOffline();
  39       },
  40       false,
  41     );
  42     window.addEventListener(
  43       "offline",
  44       function () {
  45         this.offline = true;
  46       },
  47       false,
  48     );
  49   },
  50   methods: {
  51     checkOffline: function () {
  52       if (!navigator.onLine) {
  53         this.offline = true;
  54         return;
  55       }
  56
  57       // extra check to make sure we're not offline
  58       let that = this;
  59       const urlPath = window.location.pathname.replace(/\/+$/, "");
  60       const aliveCheckUrl = `${
  61         window.location.origin
  62       }${urlPath}/index.html?t=${new Date().valueOf()}`;
  63       return fetch(aliveCheckUrl, {
  64         method: "HEAD",
  65         cache: "no-store",
  66         redirect: "manual",
  67       })
  68         .then(function (response) {
  69           // opaqueredirect means request has been redirected, to auth provider probably
  70           if (
  71             (response.type === "opaqueredirect" && !response.ok) ||
  72             [401, 403].indexOf(response.status) != -1
  73           ) {
  74             window.location.href = aliveCheckUrl;
  75           }
  76           that.offline = !response.ok;
  77         })
  78         .catch(function () {
  79           that.offline = true;
  80         })
  81         .finally(function () {
  82           that.$emit("network-status-update", that.offline);
  83         });
  84     },
  85   },
  86 };
  87 </script>