Merge remote-tracking branch 'origin/image-path-changes' into sw-fix

README.md

@@ -13,7 +13,38 @@ The source code is licensed under [AGPLv3](LICENSE), the same license as the ups
 The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the original Cinny logo by Ajay Bura and contributors, used under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). The modified logo is © Lotus Guild and is also made available under CC BY 4.0.
 
 ---
-
+## Development Environment Setup
+#### Getting correct Node version
+- Ensure you have the correct version of node installed, specified in `.node-version`
+- Use this command from the terminal to install nvm 
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
+``` 
+- Reload your terminal shell using (for Ubuntu):
+```bash
+source ~/.bashrc
+```
+- Install the specified Node version 
+```bash
+NODE_VERSION="$(tr -d '[:space:]' < .node-version)"
+nvm install "$NODE_VERSION"
+nvm use "$NODE_VERSION"
+```
+- verify the correct version was installed by running
+```bash
+node --version
+```
+and comparing the output to what is listed in `.node-version`
+#### Install npm packages
+- To install the npm packages listed in `package.json` run: 
+```bash
+ npm i 
+ ```
+### Start Development Server
+```bash
+npm run start
+```
+You should now have an active development server at `localhost:8080`, where you can make changes to the code and see the UI update in real time
 ## Features
 
 ### Messaging

src/index.tsx

@@ -17,23 +17,46 @@ import App from './app/pages/App';
 import './app/i18n';
 import { pushSessionToSW } from './sw-session';
 import { getFallbackSession } from './app/state/sessions';
+import { register } from 'module';
 
 document.body.classList.add(configClass, varsClass);
 
 // Register Service Worker
 if ('serviceWorker' in navigator) {
-  const swUrl =
-    import.meta.env.MODE === 'production'
-      ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js`
-      : `/dev-sw.js?dev-sw`;
+  const isProduction = import.meta.env.PROD;
+  const swUrl = isProduction
+    ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js`
+    : `/dev-sw.js?dev-sw`;
 
   const sendSessionToSW = () => {
     const session = getFallbackSession();
     pushSessionToSW(session?.baseUrl, session?.accessToken);
   };
 
-  navigator.serviceWorker.register(swUrl).then(sendSessionToSW);
-  navigator.serviceWorker.ready.then(sendSessionToSW);
+  const registerServiceWorker = async () => {
+    try {
+      const registration = await navigator.serviceWorker.register(
+        swUrl,
+        isProduction
+          ? undefined
+          : {
+              type: 'module',
+              scope: '/',
+            },
+      );
+
+      sendSessionToSW();
+
+      await navigator.serviceWorker.ready;
+      sendSessionToSW();
+
+      console.info('Service worker registered:', registration.scope);
+    } catch (error) {
+      console.error('Service worker registration failed:', error);
+    }
+  };
+
+  void registerServiceWorker();
 
   navigator.serviceWorker.addEventListener('message', (ev) => {
     const { type } = ev.data ?? {};