Merge pull request #448 from bemble/main

feat(pwa): enhance connectivity checks

docs/configuration.md

@@ -25,7 +25,8 @@ header: true # Set to false to hide the header
 footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
 
 columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
-connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
+connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example).
+                        # You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity.
 
 # Optional: Proxy / hosting option
 proxy:

docs/troubleshooting.md

@@ -17,3 +17,9 @@ To resolve this, you can either:
 * Host all your target service under the same domain & port.
 * Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
 * Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
+
+## I am using an authentication proxy and homer says I am offline
+
+This should be a configuration issue.
+* Make sure the option `connectivityCheck` is set to `true` in configuration.
+* Check your proxy configuration, the expected behavior is to redirect user using a 302 to the login page when user is not authenticated.

src/App.vue

@@ -231,13 +231,7 @@ export default {
     },
     getConfig: function (path = "assets/config.yml") {
       return fetch(path).then((response) => {
-        if (response.redirected) {
+        if (response.status == 404 || response.redirected) {
-          // This allows to work with authentication proxies.
-          window.location.href = response.url;
-          return;
-        }
-
-        if (response.status == 404) {
           this.configNotFound = true;
           return {};
         }

src/components/ConnectivityChecker.vue

@@ -17,6 +17,9 @@ export default {
     };
   },
   created: function () {
+    if (/t=\d+/.test(window.location.href)) {
+      window.history.replaceState({}, document.title, window.location.pathname);
+    }
     let that = this;
     this.checkOffline();
 
@@ -29,15 +32,41 @@ export default {
       },
       false
     );
+    window.addEventListener(
+      "online",
+      function () {
+          that.checkOffline();
+      },
+      false
+    );
+    window.addEventListener(
+      "offline",
+      function () {
+        this.offline = true;
+      },
+      false
+    );
   },
   methods: {
     checkOffline: function () {
+      if (!navigator.onLine) {
+        this.offline = true;
+        return;
+      }
+
+      // extra check to make sure we're not offline
       let that = this;
-      return fetch(window.location.href + "?alive", {
+      const aliveCheckUrl = window.location.href + "?t="+(new Date().valueOf());
+      return fetch(aliveCheckUrl, {
         method: "HEAD",
         cache: "no-store",
+        redirect: "manual"
       })
         .then(function (response) {
+          // opaqueredirect means request has been redirected, to auth provider probably
+          if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) {
+            window.location.href = aliveCheckUrl;
+          }
           that.offline = !response.ok;
         })
         .catch(function () {

vue.config.js

@@ -26,4 +26,7 @@ module.exports = {
       msTileImage: "assets/icons/icon-any.png",
     },
   },
+  devServer: {
+    disableHostCheck: true
+  },
 };