github
/
homer
mirror of https://github.com/bastienwirtz/homer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(connectivity-checker): fix network offline issue with auth proxies #961

connectivity-checker-rework
Bastien Wirtz 2025-08-06 22:56:55 +02:00
parent b4e20fe8af
commit 24e489a8f7
1 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/ConnectivityChecker.vue
View File

@ -1,9 +1,20 @@
<template> <template>
<div v-if="offline" class="offline-message mb-4"> <div
v-if="offline"
class="offline-message mb-4"
role="alert"
aria-live="polite"
>
<i class="fa-solid fa-triangle-exclamation"></i> <i class="fa-solid fa-triangle-exclamation"></i>
<h1> <h1>
Network unreachable Network unreachable
<span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span> <button
aria-label="Retry connection check"
class="retry-button"
@click="checkOffline"
>
<i class="fas fa-redo-alt"></i>
</button>
</h1> </h1>
<p> <p>
<a <a
@ -26,46 +37,49 @@ export default {
if (/t=\d+/.test(window.location.href)) { if (/t=\d+/.test(window.location.href)) {
window.history.replaceState({}, document.title, window.location.pathname); window.history.replaceState({}, document.title, window.location.pathname);
} }
let that = this;
this.checkOffline(); this.checkOffline();
document.addEventListener( document.addEventListener(
"visibilitychange", "visibilitychange",
function () { this.handleVisibilityChange,
if (document.visibilityState == "visible") {
that.checkOffline();
}
},
false, false,
); );
window.addEventListener( window.addEventListener("online", this.handleOnline, false);
"online", window.addEventListener("offline", this.handleOffline, false);
function () {
that.checkOffline();
}, },
false, beforeUnmount: function () {
); document.removeEventListener(
window.addEventListener( "visibilitychange",
"offline", this.handleVisibilityChange,
function () {
this.offline = true;
},
false,
); );
window.removeEventListener("online", this.handleOnline);
window.removeEventListener("offline", this.handleOffline);
}, },
methods: { methods: {
handleVisibilityChange: function () {
if (document.visibilityState === "visible") {
this.checkOffline();
}
},
handleOnline: function () {
this.checkOffline();
},
handleOffline: function () {
this.offline = true;
},
checkOffline: function () { checkOffline: function () {
// Global online check
if (!navigator.onLine) { if (!navigator.onLine) {
this.offline = true; this.offline = true;
return; return;
} }
// extra check to make sure we're not offline // Check if the current URL is reachable
let that = this; let that = this;
const urlPath = window.location.pathname.replace(/\/+$/, "");
const aliveCheckUrl = `${ const aliveCheckUrl = new URL(window.location);
window.location.origin aliveCheckUrl.searchParams.set("t", new Date().valueOf());
}${urlPath}/index.html?t=${new Date().valueOf()}`;
return fetch(aliveCheckUrl, { return fetch(aliveCheckUrl, {
method: "HEAD", method: "HEAD",
cache: "no-store", cache: "no-store",