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 aliveCheckUrl = window.location.href + "?t=" + new Date().valueOf();
  60       return fetch(aliveCheckUrl, {
  61         method: "HEAD",
  62         cache: "no-store",
  63         redirect: "manual",
  64       })
  65         .then(function (response) {
  66           // opaqueredirect means request has been redirected, to auth provider probably
  67           if (
  68             (response.type === "opaqueredirect" && !response.ok) ||
  69             [401, 403].indexOf(response.status) != -1
  70           ) {
  71             window.location.href = aliveCheckUrl;
  72           }
  73           that.offline = !response.ok;
  74         })
  75         .catch(function () {
  76           that.offline = true;
  77         })
  78         .finally(function () {
  79           that.$emit("network-status-update", that.offline);
  80         });
  81     },
  82   },
  83 };
  84 </script>