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     let that = this;
  21     this.checkOffline();
  22
  23     document.addEventListener(
  24       "visibilitychange",
  25       function () {
  26         if (document.visibilityState == "visible") {
  27           that.checkOffline();
  28         }
  29       },
  30       false
  31     );
  32     window.addEventListener(
  33       "online",
  34       function () {
  35           that.checkOffline();
  36       },
  37       false
  38     );
  39     window.addEventListener(
  40       "offline",
  41       function () {
  42         this.offline = true;
  43       },
  44       false
  45     );
  46   },
  47   methods: {
  48     checkOffline: function () {
  49       if (!navigator.onLine) {
  50         this.offline = true;
  51         return;
  52       }
  53
  54       // extra check to make sure we're not offline
  55       let that = this;
  56       return fetch(window.location.href + "?alive", {
  57         method: "HEAD",
  58         cache: "no-store",
  59         redirect: "manual"
  60       })
  61         .then(function (response) {
  62           // opaqueredirect means request has been redirected, to auth provider probably
  63           if (response.type === "opaqueredirect" && !response.ok) {
  64             window.location.reload(true);
  65           }
  66           that.offline = !response.ok;
  67         })
  68         .catch(function () {
  69           that.offline = true;
  70         })
  71         .finally(function () {
  72           that.$emit("network-status-update", that.offline);
  73         });
  74     },
  75   },
  76 };
  77 </script>