🏗️ Re: #54 - Adds property to make Service Worker caching optional

docs/configuring.md

@@ -70,6 +70,7 @@ All fields are optional, unless otherwise stated.
 **`showSplashScreen`** | `boolean` | _Optional_ | Should display a splash screen while the app is loading. Defaults to false, except on first load
 **`auth`** | `array` | _Optional_ | An array of objects containing usernames and hashed passwords. If this is not provided, then authentication will be off by default, and you will not need any credentials to access the app. Note authentication is done on the client side, and so if your instance of Dashy is exposed to the internet, it is recommend to configure your web server to handle this. See [`auth`](#appconfigauth-optional)
 **`allowConfigEdit`** | `boolean` | _Optional_ | Should prevent / allow the user to write configuration changes to the conf.yml from the UI. When set to `false`, the user can only apply changes locally using the config editor within the app, whereas if set to `true` then changes can be written to disk directly through the UI. Defaults to `true`. Note that if authentication is enabled, the user must be of type `admin` in order to apply changes globally.
+**`disableServiceWorker`** | `boolean` | _Optional_ | Service workers cache web applications to improve load times and offer basic offline functionality, and are enabled by default in Dashy. The service worker can sometimes cause older content to be cached, requiring the app to be hard-refreshed. If you do not want SW functionality, or are having issues with caching, set this property to `true` to disable all service workers.
 
 **[⬆️ Back to Top](#configuring)**
 

src/registerServiceWorker.js

@@ -2,6 +2,7 @@
 
 import { register } from 'register-service-worker';
 import { sessionStorageKeys } from './utils/defaults';
+import conf from '../public/conf.yml';
 
 /* Sets a local storage item with the state from the SW lifecycle */
 const setSwStatus = (swStateToSet) => {
@@ -14,6 +15,7 @@ const setSwStatus = (swStateToSet) => {
     offline: false,
     error: false,
     devMode: false,
+    disabledByUser: false,
   };
   const sessionData = sessionStorage[sessionStorageKeys.SW_STATUS];
   const currentSwState = sessionData ? JSON.parse(sessionData) : initialSwState;
@@ -25,8 +27,28 @@ const setSwStatus = (swStateToSet) => {
   }
 };
 
+/**
+ * Checks if service workers should be enabled
+ * Disable if not running in production
+ * Or disable if user specified to disable
+ */
+const shouldEnableServiceWorker = () => {
+  let shouldEnable = true;
+  if (conf && conf.appConfig) { // Check if app Config available
+    if (conf.appConfig.disableServiceWorker) { // Disable if user requested
+      shouldEnable = false;
+      setSwStatus({ disabledByUser: true });
+    }
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    shouldEnable = false; // Disable if not in production
+    setSwStatus({ devMode: true });
+  }
+  return shouldEnable;
+};
+
 const registerServiceWorker = () => {
-  if (process.env.NODE_ENV === 'production') {
+  if (shouldEnableServiceWorker()) {
     register(`${process.env.BASE_URL}service-worker.js`, {
       ready() {
         setSwStatus({ ready: true });
@@ -60,8 +82,6 @@ const registerServiceWorker = () => {
         console.error('Error during service worker registration:', error);
       },
     });
-  } else { // Not in production, don't use SW
-    setSwStatus({ devMode: true });
   }
 };
 

src/utils/ConfigSchema.json

@@ -172,6 +172,11 @@
           "type": "boolean",
           "default": true,
           "description": "Can user write changes to conf.yml file from the UI. If set to false, preferences are only stored locally"
+        },
+        "disableServiceWorker": {
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, then service worker will not be used"
         }
       },
       "additionalProperties": false