]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <div v-if="offline" class="offline-message"> | |
3 | <i class="far fa-dizzy"></i> | |
4 | <h1> | |
5f5a508b | 5 | You're offline, friend. |
b9c5fcf0 BW |
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 () { | |
98b460d6 P |
20 | if (/t=\d+/.test(window.location.href)) { |
21 | window.history.replaceState({}, document.title, window.location.pathname); | |
22 | } | |
b9c5fcf0 BW |
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 | }, | |
de4b7e61 | 33 | false, |
b9c5fcf0 | 34 | ); |
bf2fcc66 P |
35 | window.addEventListener( |
36 | "online", | |
37 | function () { | |
10f6f123 | 38 | that.checkOffline(); |
bf2fcc66 | 39 | }, |
de4b7e61 | 40 | false, |
bf2fcc66 P |
41 | ); |
42 | window.addEventListener( | |
43 | "offline", | |
44 | function () { | |
45 | this.offline = true; | |
46 | }, | |
de4b7e61 | 47 | false, |
bf2fcc66 | 48 | ); |
b9c5fcf0 BW |
49 | }, |
50 | methods: { | |
51 | checkOffline: function () { | |
bf2fcc66 P |
52 | if (!navigator.onLine) { |
53 | this.offline = true; | |
54 | return; | |
55 | } | |
56 | ||
57 | // extra check to make sure we're not offline | |
b9c5fcf0 | 58 | let that = this; |
d141a69a | 59 | const urlPath = window.location.pathname.replace(/\/+$/, ""); |
de4b7e61 BW |
60 | const aliveCheckUrl = `${ |
61 | window.location.origin | |
62 | }${urlPath}/index.html?t=${new Date().valueOf()}`; | |
f64278d4 | 63 | return fetch(aliveCheckUrl, { |
b9c5fcf0 BW |
64 | method: "HEAD", |
65 | cache: "no-store", | |
10f6f123 | 66 | redirect: "manual", |
b9c5fcf0 | 67 | }) |
a5fe53be | 68 | .then(function (response) { |
bf2fcc66 | 69 | // opaqueredirect means request has been redirected, to auth provider probably |
10f6f123 BW |
70 | if ( |
71 | (response.type === "opaqueredirect" && !response.ok) || | |
72 | [401, 403].indexOf(response.status) != -1 | |
73 | ) { | |
f64278d4 | 74 | window.location.href = aliveCheckUrl; |
bf2fcc66 | 75 | } |
f3b3b89b | 76 | that.offline = !response.ok; |
b9c5fcf0 BW |
77 | }) |
78 | .catch(function () { | |
79 | that.offline = true; | |
80 | }) | |
81 | .finally(function () { | |
ed8b17e0 | 82 | that.$emit("network-status-update", that.offline); |
b9c5fcf0 BW |
83 | }); |
84 | }, | |
85 | }, | |
86 | }; | |
87 | </script> |