diff --git a/example/ui/src/applet-main.ts b/example/ui/src/applet-main.ts
index 168e9333..ff1be5b8 100644
--- a/example/ui/src/applet-main.ts
+++ b/example/ui/src/applet-main.ts
@@ -13,6 +13,7 @@ import {
   weaveUrlToLocation,
   ReadonlyPeerStatusStore,
   GroupPermissionType,
+  UnsubscribeFunction,
 } from '@theweave/api';
 import { AgentPubKey, AppClient } from '@holochain/client';
 import '@theweave/elements/dist/elements/wal-embed.js';
@@ -78,11 +79,28 @@ export class AppletMain extends LitElement {
   // @state()
   // unsubscribe: undefined | (() => void);
 
+  @query('#failUnbeforeUnloadCheckmark')
+  failUnbeforeUnloadCheckmark!: HTMLInputElement;
+
+  onBeforeUnloadUnsubscribe: UnsubscribeFunction | undefined;
+
   async firstUpdated() {
+    this.onBeforeUnloadUnsubscribe = this.weaveClient.onBeforeUnload(() => {
+      if (this.failUnbeforeUnloadCheckmark.checked)
+        throw new Error(
+          'The onbeforeunload callback failed (intentionally for testing purposes) in the example applet :(.'
+        );
+      console.log('@example-applet: Running second unbeforeunload callback.');
+    });
+
     this.groupPermissionType = await this.weaveClient.myGroupPermissionType();
     this.appletParticipants = await this.weaveClient.appletParticipants();
   }
 
+  disconnectedCallback(): void {
+    if (this.onBeforeUnloadUnsubscribe) this.onBeforeUnloadUnsubscribe();
+  }
+
   // disconnectedCallback(): void {
   //   if (this.unsubscribe) this.unsubscribe();
   // }
@@ -247,6 +265,7 @@ export class AppletMain extends LitElement {
         <div class="row">
           <div class="column">
             <create-post style="margin: 16px;"></create-post>
+            <h2>Notifications</h2>
             <button @click=${() => this.sendLowNotification(5000)}>
               Send Low Urgency Notification with 5 seconds delay
             </button>
@@ -256,6 +275,17 @@ export class AppletMain extends LitElement {
             <button @click=${() => this.sendUrgentNotification(5000)}>
               Send High Urgency Notification with 5 seconds delay
             </button>
+
+            <h2>on-before-unload behavior</h2>
+
+            <div class="row">
+            <input type="checkbox" id="failUnbeforeUnloadCheckmark"/>
+            Make the on-before-unload callback fail when reloading the applet to test how Moss handles this case.
+            </div>
+
+
+            <h2>Activity Notification</h2>
+
             <search-agent
                 @agent-selected=${this.handleAgentSelected}
             ></search-agent>
@@ -265,6 +295,9 @@ export class AppletMain extends LitElement {
             }}>
               Send Activity Notification
             </button>
+
+            <h2>Links</h2>
+
             <div>Enter WAL:</div>
             <textarea
               id="wal-input-field"
@@ -282,6 +315,9 @@ export class AppletMain extends LitElement {
             >
             <a href="https://duckduckgo.com">duckduckgo.com</a>
             <a href="https://duckduckgo.com" traget="_blank">duckduckgo.com</a>
+
+            <h2>Clipboard</h2>
+
             <button
               @click=${() => {
                 navigator.clipboard.writeText('Easter Egg.');
@@ -290,6 +326,8 @@ export class AppletMain extends LitElement {
               Copy Something To Clipboard
             </button>
 
+            <h2>Bindings</h2>
+
             <div style="border: 1px solid black; padding: 5px; border-radius: 5px; margin: 10px 0;">
               <div><b>Create Binding:</b></div>
               <div class="row">
@@ -319,6 +357,8 @@ export class AppletMain extends LitElement {
               </button>
             </div>
 
+            <h2>WAL Embeds</h2>
+
             <div style="border: 1px solid black; padding: 5px; border-radius: 5px; margin: 10px 0;">
               <div><b>Embed WAL:</b></div>
               <div class="row" style="margin-bottom: 10px;">
diff --git a/example/ui/src/elements/post-detail.ts b/example/ui/src/elements/post-detail.ts
index f3782878..9325aba1 100644
--- a/example/ui/src/elements/post-detail.ts
+++ b/example/ui/src/elements/post-detail.ts
@@ -28,7 +28,7 @@ import './edit-post.js';
 import { PostsStore } from '../posts-store.js';
 import { postsStoreContext } from '../context.js';
 import { Post } from '../types.js';
-import { WAL, weaveUrlFromWal } from '@theweave/api';
+import { WAL, WeaveClient, weaveUrlFromWal } from '@theweave/api';
 
 /**
  * @element post-detail
@@ -41,6 +41,9 @@ export class PostDetail extends LitElement {
   @property(hashProperty('post-hash'))
   postHash!: ActionHash;
 
+  @property()
+  weaveClient!: WeaveClient;
+
   /**
    * @internal
    */
@@ -126,6 +129,12 @@ export class PostDetail extends LitElement {
         </sl-card>
         <attachments-card .wal=${weaveUrlFromWal(this.WAL!, false)}></attachments-card>
       </div>
+      <sl-button
+        style="margin-top: 20px;"
+        variant="danger"
+        @click=${() => this.weaveClient.requestClose()}
+        >Close Window (only works if open in separate Window)</sl-button
+      >
     `;
   }
 
diff --git a/example/ui/src/example-applet.ts b/example/ui/src/example-applet.ts
index 49dbe262..ba181102 100644
--- a/example/ui/src/example-applet.ts
+++ b/example/ui/src/example-applet.ts
@@ -42,7 +42,14 @@ export class ExampleApplet extends LitElement {
 
   peerStatusUnsubscribe: UnsubscribeFunction | undefined;
 
+  onBeforeUnloadUnsubscribe: UnsubscribeFunction | undefined;
+
   firstUpdated() {
+    this.onBeforeUnloadUnsubscribe = this.weaveClient.onBeforeUnload(async () => {
+      console.log('Unloading in 10 seconds');
+      await new Promise((resolve) => setTimeout(resolve, 10000));
+      console.log('Unloading now.');
+    });
     // To test whether applet iframe properly gets removed after disabling applet.
     // setInterval(() => {
     //   console.log('Hello from the example applet iframe.');
@@ -117,6 +124,7 @@ export class ExampleApplet extends LitElement {
                               <attachments-context .store=${this.attachmentsStore}>
                                 <post-detail
                                   .postHash=${this.weaveClient.renderInfo.view.wal.hrl[1]}
+                                  .weaveClient=${this.weaveClient}
                                 ></post-detail>
                               </attachments-context>
                             </posts-context>
diff --git a/iframes/applet-iframe/src/index.ts b/iframes/applet-iframe/src/index.ts
index c79f9358..30efcd88 100644
--- a/iframes/applet-iframe/src/index.ts
+++ b/iframes/applet-iframe/src/index.ts
@@ -40,6 +40,11 @@ import {
 import { readable } from '@holochain-open-dev/stores';
 import { toOriginalCaseB64 } from '@theweave/utils';
 
+type CallbackWithId = {
+  id: number;
+  callback: () => any;
+};
+
 declare global {
   interface Window {
     __WEAVE_API__: WeaveServices;
@@ -49,6 +54,7 @@ declare global {
     __WEAVE_APPLET_ID__: AppletId;
     __WEAVE_PROTOCOL_VERSION__: string;
     __MOSS_VERSION__: string;
+    __WEAVE_ON_BEFORE_UNLOAD_CALLBACKS__: Array<CallbackWithId> | undefined;
   }
 
   interface WindowEventMap {
@@ -60,11 +66,40 @@ const weaveApi: WeaveServices = {
   mossVersion: () => {
     return window.__MOSS_VERSION__;
   },
+
   onPeerStatusUpdate: (callback: (payload: PeerStatusUpdate) => any) => {
     const listener = (e: CustomEvent<PeerStatusUpdate>) => callback(e.detail);
     window.addEventListener('peer-status-update', listener);
     return () => window.removeEventListener('peer-status-update', listener);
   },
+
+  onBeforeUnload: (callback: () => void) => {
+    // registers a callback on the window object that will be called before
+    // the iframe gets unloaded
+    const existingCallbacks = window.__WEAVE_ON_BEFORE_UNLOAD_CALLBACKS__ || [];
+    let newCallbackId = 0;
+    const existingCallbackIds = existingCallbacks.map((callbackWithId) => callbackWithId.id);
+    if (existingCallbackIds && existingCallbackIds.length > 0) {
+      // every new callback gets a new id in increasing manner
+      const highestId = existingCallbackIds.sort((a, b) => b - a)[0];
+      newCallbackId = highestId + 1;
+    }
+
+    existingCallbacks.push({ id: newCallbackId, callback });
+
+    window.__WEAVE_ON_BEFORE_UNLOAD_CALLBACKS__ = existingCallbacks;
+
+    const unlisten = () => {
+      const allCallbacks = window.__WEAVE_ON_BEFORE_UNLOAD_CALLBACKS__ || [];
+      window.__WEAVE_ON_BEFORE_UNLOAD_CALLBACKS__ = allCallbacks.filter(
+        (callbackWithId) => callbackWithId.id !== newCallbackId,
+      );
+    };
+
+    // We return an unlistener function which removes the callback from the list of callbacks
+    return unlisten;
+  },
+
   openAppletMain: async (appletHash: EntryHash): Promise<void> =>
     postMessage({
       type: 'open-view',
@@ -190,6 +225,22 @@ const weaveApi: WeaveServices = {
   window.__WEAVE_API__ = weaveApi;
   window.__WEAVE_APPLET_SERVICES__ = new AppletServices();
 
+  // message handler for ParentToApplet messages
+  // This one is registered early here for any type of iframe
+  // to be able to respond also in case of page refreshes in short time
+  // intervals. Otherwise the message handler may not be registered in time
+  // when the on-before-unload message is sent to the iframe and Moss
+  // is waiting for a response and will never get one.
+  window.addEventListener('message', async (m: MessageEvent<any>) => {
+    try {
+      const result = await handleEventMessage(m.data);
+      m.ports[0].postMessage({ type: 'success', result });
+    } catch (e) {
+      console.error('Failed to send postMessage to cross-group-view', e);
+      m.ports[0]?.postMessage({ type: 'error', error: (e as any).message });
+    }
+  });
+
   const [_, view] = await Promise.all([fetchLocalStorage(), getRenderView()]);
 
   if (!view) {
@@ -233,7 +284,7 @@ const weaveApi: WeaveServices = {
 
     const appletHash = window.__WEAVE_APPLET_HASH__;
 
-    // message handler for ParentToApplet messages - Only added for applet main-view
+    // message handler for ParentToApplet messages
     window.addEventListener('message', async (m: MessageEvent<any>) => {
       try {
         const result = await handleMessage(appletClient, appletHash, m.data);
@@ -329,6 +380,19 @@ async function fetchLocalStorage() {
   );
 }
 
+const handleEventMessage = async (message: ParentToAppletMessage) => {
+  switch (message.type) {
+    case 'on-before-unload':
+      const allCallbacks = window.__WEAVE_ON_BEFORE_UNLOAD_CALLBACKS__ || [];
+      await Promise.all(
+        allCallbacks.map(async (callbackWithId) => await callbackWithId.callback()),
+      );
+      return;
+    default:
+      return;
+  }
+};
+
 const handleMessage = async (
   appletClient: AppClient,
   appletHash: AppletHash,
@@ -364,6 +428,10 @@ const handleMessage = async (
         }),
       );
       break;
+    case 'on-before-unload': {
+      // This case is handled in handleEventMessage
+      return;
+    }
     default:
       throw new Error(
         `Unknown ParentToAppletMessage type: '${(message as any).type}'. Message: ${message}`,
diff --git a/libs/api/src/api.ts b/libs/api/src/api.ts
index 43cdd65c..7a28b17b 100644
--- a/libs/api/src/api.ts
+++ b/libs/api/src/api.ts
@@ -225,6 +225,18 @@ export interface WeaveServices {
    * @returns
    */
   onPeerStatusUpdate: (callback: (payload: PeerStatusUpdate) => any) => UnsubscribeFunction;
+  /**
+   * Event listener allowing to register a callback that will get executed before the
+   * applet gets reloaded, for example to save intermediate user input (e.g. commit
+   * the most recent changes of a document to the source chain).
+   *
+   * If this callback takes too long, users may be offered to force reload, thereby
+   * ignoring/cancelling the pending callback.
+   *
+   * @param callback Callback that gets called before the Applet gets reloaded
+   * @returns
+   */
+  onBeforeUnload: (callback: () => void) => UnsubscribeFunction;
   /**
    * Open the main view of the specified Applet
    * @param appletHash
@@ -369,6 +381,10 @@ export class WeaveClient implements WeaveServices {
     return window.__WEAVE_API__.onPeerStatusUpdate(callback);
   };
 
+  onBeforeUnload = (callback: () => any): UnsubscribeFunction => {
+    return window.__WEAVE_API__.onBeforeUnload(callback);
+  };
+
   openAppletMain = async (appletHash: EntryHash): Promise<void> =>
     window.__WEAVE_API__.openAppletMain(appletHash);
 
diff --git a/libs/api/src/types.ts b/libs/api/src/types.ts
index b4c6788c..41a28a80 100644
--- a/libs/api/src/types.ts
+++ b/libs/api/src/types.ts
@@ -293,6 +293,9 @@ export type ParentToAppletMessage =
   | {
       type: 'peer-status-update';
       payload: PeerStatusUpdate;
+    }
+  | {
+      type: 'on-before-unload';
     };
 
 export type AppletToParentMessage = {
diff --git a/package.json b/package.json
index 9700315c..62089269 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "org.lightningrodlabs.moss-0.13",
-  "version": "0.13.0-gamma.2",
+  "version": "0.13.0-gamma.3",
   "private": true,
   "description": "Moss (0.13)",
   "main": "./out/main/index.js",
@@ -22,6 +22,7 @@
     "applet-dev": "yarn check:binaries && concurrently  \"yarn workspace @theweave/api build:watch\" \"yarn workspace @theweave/elements build:watch\" \"UI_PORT=8888 yarn workspace example-applet start\" \"electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 1\" \"sleep 10 && electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 2 --sync-time 10000\"",
     "applet-dev-1": "yarn check:binaries && concurrently \"yarn workspace @theweave/api build:watch\" \"yarn workspace @theweave/elements build:watch\" \"yarn workspace @theweave/attachments build:watch\" \"UI_PORT=8888 yarn workspace example-applet start\" \"electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 1\"",
     "applet-dev-3": "yarn check:binaries && concurrently  \"yarn workspace @theweave/api build:watch\" \"yarn workspace @theweave/elements build:watch\" \"UI_PORT=8888 yarn workspace example-applet start\" \"electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 1\" \"sleep 5 && electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 2 --sync-time 10000\" \"sleep 5 && electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 3 --sync-time 10000\"",
+    "applet-dev-example-1": "yarn check:binaries && concurrently  \"yarn workspace @theweave/api build:watch\" \"yarn workspace @theweave/elements build:watch\" \"UI_PORT=8888 yarn workspace example-applet start\" \"electron-vite dev -- --dev-config weave.dev.config.example.ts --agent-idx 1\"",
     "applet-dev-example": "yarn check:binaries && concurrently  \"yarn workspace @theweave/api build:watch\" \"yarn workspace @theweave/elements build:watch\" \"UI_PORT=8888 yarn workspace example-applet start\" \"electron-vite dev -- --dev-config weave.dev.config.example.ts --agent-idx 1\" \"sleep 10 && electron-vite dev -- --dev-config weave.dev.config.example.ts --agent-idx 2\"",
     "dev": "yarn check:binaries && concurrently  \"yarn workspace @theweave/api build:watch\" \"yarn workspace @theweave/elements build:watch\" \"UI_PORT=8888 yarn workspace example-applet start\" \"electron-vite dev -- --dev-config weave.dev.config.ts --agent-idx 1\"",
     "dev:electron": "electron-vite dev",
diff --git a/src/main/index.ts b/src/main/index.ts
index 6522dd56..65027258 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -221,23 +221,25 @@ if (app.isPackaged) {
     // This event will always be triggered in the first instance, no matter with which profile
     // it is being run. On Linux and Windows it is also how deeplinks get in.
     app.on('second-instance', (_event, argv, _cwd, additionalData: any) => {
-      console.log('second-instance event triggered. argv: ', argv);
-      console.log('additionalData: ', additionalData);
-      if (process.platform !== 'darwin') {
-        console.log('Option 3');
-
-        // deeplink case
-        const url = argv.pop();
-        if (SPLASH_SCREEN_WINDOW) {
-          CACHED_DEEP_LINK = url;
-          SPLASH_SCREEN_WINDOW.show();
-        } else if (MAIN_WINDOW) {
-          console.log('RECEIVED DEEP LINK: url', argv, url);
-          // main window is already open
-          createOrShowMainWindow();
-          emitToWindow(MAIN_WINDOW, 'deep-link-received', url);
-        } else {
-          CACHED_DEEP_LINK = url;
+      if (!isAppQuitting) {
+        console.log('second-instance event triggered. argv: ', argv);
+        console.log('additionalData: ', additionalData);
+        if (process.platform !== 'darwin') {
+          console.log('Option 3');
+
+          // deeplink case
+          const url = argv.pop();
+          if (SPLASH_SCREEN_WINDOW) {
+            CACHED_DEEP_LINK = url;
+            SPLASH_SCREEN_WINDOW.show();
+          } else if (MAIN_WINDOW) {
+            console.log('RECEIVED DEEP LINK: url', argv, url);
+            // main window is already open
+            createOrShowMainWindow();
+            emitToWindow(MAIN_WINDOW, 'deep-link-received', url);
+          } else {
+            CACHED_DEEP_LINK = url;
+          }
         }
       }
     });
@@ -289,22 +291,17 @@ setupLogs(WE_EMITTER, WE_FILE_SYSTEM, RUN_OPTIONS.printHolochainLogs);
 
 protocol.registerSchemesAsPrivileged([
   {
-    scheme: 'moss',
-    privileges: { standard: true, supportFetchAPI: true, secure: true, stream: true },
-  },
-]);
-
-protocol.registerSchemesAsPrivileged([
-  {
-    scheme: 'default-app',
+    scheme: 'applet',
     privileges: { standard: true, supportFetchAPI: true, secure: true, stream: true },
   },
-]);
-
-protocol.registerSchemesAsPrivileged([
   {
-    scheme: 'applet',
-    privileges: { standard: true, supportFetchAPI: true, secure: true, stream: true },
+    scheme: 'moss',
+    privileges: {
+      standard: true,
+      secure: true,
+      stream: true,
+      supportFetchAPI: true,
+    },
   },
 ]);
 
@@ -339,6 +336,10 @@ let UPDATE_AVAILABLE:
 
 // icons
 const SYSTRAY_ICON_DEFAULT = nativeImage.createFromPath(path.join(ICONS_DIRECTORY, '32x32@2x.png'));
+const SYSTRAY_ICON_QUITTING = nativeImage.createFromPath(
+  path.join(ICONS_DIRECTORY, 'transparent32x32@2x.png'),
+);
+
 const SYSTRAY_ICON_HIGH = nativeImage.createFromPath(
   path.join(ICONS_DIRECTORY, 'icon_priority_high_32x32@2x.png'),
 );
@@ -825,6 +826,7 @@ app.whenReady().then(async () => {
           icon: notificationIcon,
         })
           .on('click', () => {
+            console.log('Clicked on OS notification');
             createOrShowMainWindow();
             emitToWindow(MAIN_WINDOW!, 'switch-to-applet', appletId);
             SYSTRAY_ICON_STATE = undefined;
@@ -897,7 +899,17 @@ app.whenReady().then(async () => {
       return;
     }
     const newWalWindow = createWalWindow();
+    // on-before-unload (added here for searchability of event-related code)
+    // This event is forwarded to the window in order to discern in the
+    // onbeforeunload callback between reloading and closing of the window
     newWalWindow.on('close', () => {
+      // on-before-unload
+      // closing may be prevented by the beforeunload event listener in the window
+      // the first time. The window should however be hidden already anyway.
+      newWalWindow.hide();
+      emitToWindow(newWalWindow, 'window-closing', null);
+    });
+    newWalWindow.on('closed', () => {
       delete WAL_WINDOWS[src];
     });
     WAL_WINDOWS[src] = {
@@ -923,13 +935,15 @@ app.whenReady().then(async () => {
       return undefined;
     },
   );
+  ipcMain.handle('close-main-window', () => {
+    if (MAIN_WINDOW) MAIN_WINDOW.close();
+  });
   ipcMain.handle('close-window', (e) => {
     const walAndWindowInfo = Object.entries(WAL_WINDOWS).find(
       ([_src, window]) => window.window.webContents.id === e.sender.id,
     );
     if (walAndWindowInfo) {
       walAndWindowInfo[1].window.close();
-      delete WAL_WINDOWS[walAndWindowInfo[0]];
     }
   });
   ipcMain.handle('focus-main-window', (): void => {
@@ -1160,6 +1174,33 @@ app.whenReady().then(async () => {
       return appInfo;
     },
   );
+  ipcMain.handle(
+    'fetch-and-validate-happ-or-webhapp',
+    async (_e, url: string): Promise<AppHashes> => {
+      const response = await net.fetch(url);
+      const byteArray = Array.from(new Uint8Array(await response.arrayBuffer()));
+      const { happSha256, webhappSha256, uiSha256 } =
+        await rustUtils.validateHappOrWebhapp(byteArray);
+      if (uiSha256) {
+        if (!webhappSha256) throw Error('Ui sha256 defined but not webhapp sha256.');
+        return {
+          type: 'webhapp',
+          sha256: webhappSha256,
+          happ: {
+            sha256: happSha256,
+          },
+          ui: {
+            sha256: uiSha256,
+          },
+        };
+      } else {
+        return {
+          type: 'happ',
+          sha256: happSha256,
+        };
+      }
+    },
+  );
   ipcMain.handle('validate-happ-or-webhapp', async (_e, bytes: number[]): Promise<AppHashes> => {
     const { happSha256, webhappSha256, uiSha256 } = await rustUtils.validateHappOrWebhapp(bytes);
     if (uiSha256) {
@@ -1572,7 +1613,36 @@ app.on('activate', () => {
 });
 
 app.on('before-quit', () => {
+  if (!isAppQuitting) {
+    // If the quitting process takes longer than 15 seconds, force quit.
+    setTimeout(() => {
+      WE_EMITTER.emitMossError('FORCE QUITTING. Quitting Moss took longer than 15 seconds.');
+      // ignore beforeunload of all windows
+      MAIN_WINDOW?.webContents.on('will-prevent-unload', (e) => {
+        e.preventDefault();
+      });
+      MAIN_WINDOW?.close();
+      Object.values(WAL_WINDOWS).forEach((windowInfo) => {
+        const walWindow = windowInfo.window;
+        if (walWindow) {
+          walWindow.webContents.on('will-prevent-unload', (e) => {
+            e.preventDefault();
+          });
+          walWindow.webContents.close();
+        }
+      });
+    }, 15000);
+  }
   isAppQuitting = true;
+  // on-before-unload
+  // This is to discern in the beforeunload listener between a reaload
+  // and a window close
+  if (MAIN_WINDOW) MAIN_WINDOW.hide();
+  if (SYSTRAY) {
+    SYSTRAY.setImage(SYSTRAY_ICON_QUITTING);
+    SYSTRAY.setContextMenu(Menu.buildFromTemplate([]));
+  }
+  if (MAIN_WINDOW) emitToWindow(MAIN_WINDOW, 'window-closing', null);
 });
 
 app.on('quit', () => {
diff --git a/src/preload/admin.ts b/src/preload/admin.ts
index b2013a63..1f97dfb4 100644
--- a/src/preload/admin.ts
+++ b/src/preload/admin.ts
@@ -41,6 +41,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
     ipcRenderer.on('deep-link-received', callback),
   onSwitchToApplet: (callback: (e: Electron.IpcRendererEvent, payload: AppletId) => any) =>
     ipcRenderer.on('switch-to-applet', callback),
+  onWindowClosing: (callback: (e: Electron.IpcRendererEvent) => any) =>
+    ipcRenderer.on('window-closing', callback),
   onZomeCallSigned: (
     callback: (
       e: Electron.IpcRendererEvent,
@@ -51,6 +53,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
       },
     ) => any,
   ) => ipcRenderer.on('zome-call-signed', callback),
+  closeMainWindow: () => ipcRenderer.invoke('close-main-window'),
   openApp: (appId: string) => ipcRenderer.invoke('open-app', appId),
   openAppStore: () => ipcRenderer.invoke('open-appstore'),
   openWalWindow: (iframeSrc: string, appletId: AppletId, wal: WAL) =>
@@ -141,6 +144,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
     ),
   uninstallApplet: (appId: string) => ipcRenderer.invoke('uninstall-applet', appId),
   dumpNetworkStats: () => ipcRenderer.invoke('dump-network-stats'),
+  fetchAndValidateHappOrWebhapp: (url: string) =>
+    ipcRenderer.invoke('fetch-and-validate-happ-or-webhapp', url),
   validateHappOrWebhapp: (bytes: number[]) => ipcRenderer.invoke('validate-happ-or-webhapp', bytes),
 });
 
diff --git a/src/preload/walwindow.ts b/src/preload/walwindow.ts
index cc60d494..4e6fb1b5 100644
--- a/src/preload/walwindow.ts
+++ b/src/preload/walwindow.ts
@@ -12,6 +12,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   focusMainWindow: () => ipcRenderer.invoke('focus-main-window'),
   focusMyWindow: () => ipcRenderer.invoke('focus-my-window'),
   getMySrc: () => ipcRenderer.invoke('get-my-src'),
+  onWindowClosing: (callback: (e: Electron.IpcRendererEvent) => any) =>
+    ipcRenderer.on('window-closing', callback),
   selectScreenOrWindow: () => ipcRenderer.invoke('select-screen-or-window'),
   setMyIcon: (icon: string) => ipcRenderer.invoke('set-my-icon', icon),
   setMyTitle: (title: string) => ipcRenderer.invoke('set-my-title', title),
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 4ebb23ba..b74a947e 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -64,6 +64,15 @@
     <script>
       window['__HC_LAUNCHER_ENV__'] = {};
     </script>
+    <!-- code to make on-before-unload working: -->
+    <script>
+      window.electronAPI.onWindowClosing(() => {
+        // This code is required to discern in the window.onbeforeunload callback
+        // whether the onbeforunload event is coming from a page reload or from a
+        // page close
+        window.__WINDOW_CLOSING__ = true;
+      });
+    </script>
     <script type="module">
       import '@shoelace-style/shoelace/dist/themes/light.css';
       import '@fontsource/aileron';
diff --git a/src/renderer/src/applets/applet-host.ts b/src/renderer/src/applets/applet-host.ts
index 72bbf6a5..4c2fae76 100644
--- a/src/renderer/src/applets/applet-host.ts
+++ b/src/renderer/src/applets/applet-host.ts
@@ -137,6 +137,9 @@ export function buildHeadlessWeaveClient(mossStore: MossStore): WeaveServices {
     onPeerStatusUpdate(_) {
       return () => undefined;
     },
+    onBeforeUnload(_) {
+      return () => undefined;
+    },
     async assetInfo(wal: WAL): Promise<AssetLocationAndInfo | undefined> {
       const maybeCachedInfo = mossStore.weCache.assetInfo.value(wal);
       if (maybeCachedInfo) return maybeCachedInfo;
diff --git a/src/renderer/src/electron-api.ts b/src/renderer/src/electron-api.ts
index a1835f79..714ab8a7 100644
--- a/src/renderer/src/electron-api.ts
+++ b/src/renderer/src/electron-api.ts
@@ -45,6 +45,7 @@ declare global {
           },
         ) => any,
       ) => any;
+      closeMainWindow: () => Promise<void>;
       openApp: (appId: string) => Promise<void>;
       openWalWindow: (iframeSrc: string, appletId: AppletId, wal: WAL) => Promise<void>;
       getAllAppAssetsInfos: () => Promise<
@@ -101,6 +102,7 @@ declare global {
       ) => Promise<void>;
       uninstallApplet: (appId: string) => Promise<void>;
       dumpNetworkStats: () => Promise<void>;
+      fetchAndValidateHappOrWebhapp: (url: string) => Promise<AppHashes>;
       validateHappOrWebhapp: (bytes: number[]) => Promise<AppHashes>;
     };
     __ZOME_CALL_LOGGING_ENABLED__: boolean;
@@ -191,6 +193,10 @@ export async function selectScreenOrWindow(): Promise<string> {
   return window.electronAPI.selectScreenOrWindow();
 }
 
+export async function fetchAndValidateHappOrWebhapp(url: string) {
+  return window.electronAPI.fetchAndValidateHappOrWebhapp(url);
+}
+
 export async function validateHappOrWebhapp(bytes: number[]) {
   return window.electronAPI.validateHappOrWebhapp(bytes);
 }
diff --git a/src/renderer/src/elements/main-dashboard.ts b/src/renderer/src/elements/main-dashboard.ts
index 5668127c..47f807ca 100644
--- a/src/renderer/src/elements/main-dashboard.ts
+++ b/src/renderer/src/elements/main-dashboard.ts
@@ -76,6 +76,8 @@ import {
   decodeContext,
   getAllIframes,
   logMossZomeCall,
+  postMessageToAppletIframes,
+  postMessageToIframe,
   progenitorFromProperties,
 } from '../utils.js';
 import { dialogMessagebox } from '../electron-api.js';
@@ -195,6 +197,15 @@ export class MainDashboard extends LitElement {
   @state()
   hoverTopBar = false;
 
+  @state()
+  reloading = false;
+
+  @state()
+  slowLoading = false;
+
+  @state()
+  slowReloadTimeout: number | undefined;
+
   _dashboardState = new StoreSubscriber(
     this,
     () => this._mossStore.dashboardState(),
@@ -237,6 +248,8 @@ export class MainDashboard extends LitElement {
     () => [this, this._mossStore],
   );
 
+  _reloadingApplets: Array<AppletId> = [];
+
   // _unlisten: UnlistenFn | undefined;
 
   @provide({ context: openViewsContext })
@@ -471,7 +484,46 @@ export class MainDashboard extends LitElement {
     this.openViews.openAppletMain(appletHash);
   }
 
+  hardRefresh() {
+    this.slowLoading = false;
+    window.removeEventListener('beforeunload', this.beforeUnloadListener);
+    // The logic to set this variable lives in walwindow.html
+    if ((window as any).__WINDOW_CLOSING__) {
+      (window as any).electronAPI.closeWindow();
+    } else {
+      window.location.reload();
+    }
+  }
+
+  beforeUnloadListener = async (e) => {
+    e.preventDefault();
+    this.reloading = true;
+    console.log('onbeforeunload event');
+    // If it takes longer than 5 seconds to unload, offer to hard reload
+    this.slowReloadTimeout = window.setTimeout(() => {
+      this.slowLoading = true;
+    }, 4500);
+    await postMessageToAppletIframes({ type: 'all' }, { type: 'on-before-unload' });
+    console.log('on-before-unload callbacks finished.');
+    window.removeEventListener('beforeunload', this.beforeUnloadListener);
+    // The logic to set this variable lives in index.html
+    window.location.reload();
+    if ((window as any).__WINDOW_CLOSING__) {
+      console.log('__WINDOW_CLOSING__ is true.');
+      window.electronAPI.closeMainWindow();
+    } else {
+      window.location.reload();
+    }
+  };
+
   async firstUpdated() {
+    // add the beforeunload listener only 10 seconds later as there won't be anything
+    // meaningful to save by applets before and it will ensure that the iframes
+    // are ready to respond to the on-before-reload event
+    setTimeout(() => {
+      window.addEventListener('beforeunload', this.beforeUnloadListener);
+    }, 10000);
+
     window.addEventListener('message', appletMessageHandler(this._mossStore, this.openViews));
     window.electronAPI.onAppletToParentMessage(async (_e, payload) => {
       console.log('Got cross window applet to parent message: ', payload);
@@ -733,7 +785,23 @@ export class MainDashboard extends LitElement {
           (appletHash) => html`
             <applet-main
               .appletHash=${appletHash}
+              .reloading=${this._reloadingApplets.includes(encodeHashToBase64(appletHash))}
               style="flex: 1; ${this.displayApplet(appletHash) ? '' : 'display: none'}"
+              @hard-refresh=${async () => {
+                // emit onBeforeUnload event and wait for callback to be executed
+                const appletId = encodeHashToBase64(appletHash);
+
+                const allIframes = getAllIframes();
+                const appletIframe = allIframes.find((iframe) => iframe.id === appletId);
+                if (appletIframe) {
+                  appletIframe.src += '';
+                }
+                const reloadingApplets = this._reloadingApplets;
+
+                // Remove AppletId from reloading applets
+                this._reloadingApplets = reloadingApplets.filter((id) => id !== appletId);
+                console.log('this._reloadingApplets after reloading: ', this._reloadingApplets);
+              }}
             ></applet-main>
           `,
         );
@@ -1330,7 +1398,7 @@ export class MainDashboard extends LitElement {
               }
             }}
           >
-            <img class="moss-icon" src="moss-icon.svg" />
+            <img src="moss-icon.svg" />
           </button>
         </div>
 
@@ -1497,14 +1565,32 @@ export class MainDashboard extends LitElement {
                         appletHash: e.detail.appletHash,
                       });
                     }}
-                    @refresh-applet=${(e: CustomEvent) => {
+                    @refresh-applet=${async (e: CustomEvent) => {
+                      // emit onBeforeUnload event and wait for callback to be executed
+                      const appletId = encodeHashToBase64(e.detail.appletHash);
+
+                      const reloadingApplets = this._reloadingApplets;
+                      reloadingApplets.push(appletId);
+                      this._reloadingApplets = reloadingApplets;
+
                       const allIframes = getAllIframes();
-                      const appletIframe = allIframes.find(
-                        (iframe) => iframe.id === encodeHashToBase64(e.detail.appletHash),
-                      );
+                      const appletIframe = allIframes.find((iframe) => iframe.id === appletId);
                       if (appletIframe) {
+                        try {
+                          await postMessageToIframe(appletIframe, { type: 'on-before-unload' });
+                        } catch (e) {
+                          console.warn(
+                            'WARNING: onBeforeUnload callback failed for applet with id',
+                            appletId,
+                            ':',
+                            e,
+                          );
+                        }
                         appletIframe.src += '';
                       }
+
+                      // Remove AppletId from reloading applets
+                      this._reloadingApplets = reloadingApplets.filter((id) => id !== appletId);
                     }}
                   ></group-applets-sidebar>
                 </group-context>
@@ -1579,6 +1665,39 @@ export class MainDashboard extends LitElement {
             <pocket-drop class="flex flex-1"></pocket-drop>
           </div>`
         : html``}
+
+      <!-- Reloading overlay -->
+
+      <div
+        class="overlay column center-content reloading-overlay"
+        style="${this.reloading ? '' : 'display: none;'}"
+      >
+        <img src="moss-icon.svg" style="height: 80px; width: 80px;" />
+        <div style="margin-top: 25px; margin-left: 10px; font-size: 24px; color: #142510">
+          ${this.reloading ? msg('reloading...') : msg('loading...')}
+        </div>
+        ${this.slowLoading
+          ? html`
+              <div
+                class="column items-center"
+                style="margin-top: 50px; max-width: 600px;color: white;"
+              >
+                <div>
+                  One or more Tools take unusually long to unload. Do you want to force reload?
+                </div>
+                <div style="margin-top: 10px;">
+                  (force reloading may interrupt the Tool from saving unsaved content)
+                </div>
+                <sl-button
+                  variant="danger"
+                  @click=${() => this.hardRefresh()}
+                  style="margin-top: 20px; width: 150px;"
+                  >Force Reload</sl-button
+                >
+              </div>
+            `
+          : html``}
+      </div>
     `;
   }
 
@@ -1602,6 +1721,10 @@ export class MainDashboard extends LitElement {
           display: flex;
         }
 
+        .reloading-overlay {
+          background: #588121;
+        }
+
         /* .esc-pocket-msg {
           position: fixed;
           top: 13px;
diff --git a/src/renderer/src/layout/views/applet-main.ts b/src/renderer/src/layout/views/applet-main.ts
index c0176646..736b851b 100644
--- a/src/renderer/src/layout/views/applet-main.ts
+++ b/src/renderer/src/layout/views/applet-main.ts
@@ -12,10 +12,14 @@ export class AppletMain extends LitElement {
   @property(hashProperty('applet-hash'))
   appletHash!: EntryHash;
 
+  @property()
+  reloading = false;
+
   render() {
     return html`<applet-view
       .view=${{ type: 'main' }}
       .appletHash=${this.appletHash}
+      .reloading=${this.reloading}
       .hostColor=${'#588121'}
       style="flex: 1"
     ></applet-view>`;
diff --git a/src/renderer/src/layout/views/applet-view.ts b/src/renderer/src/layout/views/applet-view.ts
index 08aa63d2..90dd3152 100644
--- a/src/renderer/src/layout/views/applet-view.ts
+++ b/src/renderer/src/layout/views/applet-view.ts
@@ -22,9 +22,8 @@ export class AppletViewEl extends LitElement {
   @property()
   hostColor: string | undefined;
 
-  firstUpdated() {
-    this.shadowRoot!.host.classList.add();
-  }
+  @property()
+  reloading = false;
 
   hostStyle() {
     if (this.hostColor) {
@@ -49,6 +48,7 @@ export class AppletViewEl extends LitElement {
       <view-frame
         .renderView=${renderView}
         .appletHash=${this.appletHash}
+        .reloading=${this.reloading}
         class="elevated"
         style="flex: 1; overflow: hidden;"
       ></view-frame>
diff --git a/src/renderer/src/layout/views/view-frame.ts b/src/renderer/src/layout/views/view-frame.ts
index 412d1a81..b7f830f9 100644
--- a/src/renderer/src/layout/views/view-frame.ts
+++ b/src/renderer/src/layout/views/view-frame.ts
@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { hashProperty } from '@holochain-open-dev/elements';
 import { encodeHashToBase64, EntryHash } from '@holochain/client';
@@ -9,9 +9,11 @@ import { weStyles } from '../../shared-styles.js';
 import { appletOrigin, renderViewToQueryString, urlFromAppletHash } from '../../utils.js';
 import { mossStoreContext } from '../../context.js';
 import { MossStore } from '../../moss-store.js';
-import { getAppletDevPort } from '../../electron-api.js';
-import { appIdFromAppletHash } from '@theweave/utils';
+import { localized, msg } from '@lit/localize';
 
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+
+@localized()
 @customElement('view-frame')
 export class ViewFrame extends LitElement {
   @consume({ context: mossStoreContext })
@@ -24,21 +26,85 @@ export class ViewFrame extends LitElement {
   @property()
   renderView!: RenderView;
 
+  @property()
+  reloading = false;
+
   @state()
   appletDevPort: number | undefined;
 
   @state()
   loading = true;
 
+  @state()
+  slowLoading = false;
+
+  @state()
+  slowReloadTimeout: number | undefined;
+
   async firstUpdated() {
-    console.log('@view-frame: IS APPLET DEV: ', this.mossStore.isAppletDev);
     if (this.mossStore.isAppletDev) {
-      const appId = appIdFromAppletHash(this.appletHash);
-      this.appletDevPort = await getAppletDevPort(appId);
-      console.log('@view-frame @devmode: Got applet dev port: ', this.appletDevPort);
+      this.appletDevPort = await this.mossStore.getAppletDevPort(
+        encodeHashToBase64(this.appletHash),
+      );
     }
   }
 
+  willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('reloading')) {
+      if (this.reloading) {
+        // If it takes longer than 5 seconds to unload, offer to hard reload
+        this.slowReloadTimeout = window.setTimeout(() => {
+          if (this.reloading) {
+            this.slowLoading = true;
+          }
+        }, 4500);
+        this.loading = true;
+      } else {
+        if (this.slowReloadTimeout) window.clearTimeout(this.slowReloadTimeout);
+        this.loading = false;
+        this.slowLoading = false;
+      }
+    }
+  }
+
+  hardRefresh() {
+    this.slowLoading = false;
+    this.dispatchEvent(new CustomEvent('hard-refresh', { bubbles: true, composed: true }));
+  }
+
+  renderLoading() {
+    return html`
+      <div
+        class="column center-content"
+        style="flex: 1; padding: 0; margin: 0; ${this.loading ? '' : 'display: none'}"
+      >
+        <img src="moss-icon.svg" style="height: 80px; width: 80px;" />
+        <div style="margin-top: 25px; margin-left: 10px; font-size: 24px; color: #142510">
+          ${this.reloading ? msg('reloading...') : msg('loading...')}
+        </div>
+        ${this.slowLoading
+          ? html`
+              <div
+                class="column items-center"
+                style="margin-top: 50px; max-width: 600px;color: white;"
+              >
+                <div>This Tool takes unusually long to reload. Do you want to force reload?</div>
+                <div style="margin-top: 10px;">
+                  (force reloading may interrupt the Tool from saving unsaved content)
+                </div>
+                <sl-button
+                  variant="danger"
+                  @click=${() => this.hardRefresh()}
+                  style="margin-top: 20px; width: 150px;"
+                  >Force Reload</sl-button
+                >
+              </div>
+            `
+          : html``}
+      </div>
+    `;
+  }
+
   renderProductionFrame() {
     return html`<iframe
         frameborder="0"
@@ -53,15 +119,7 @@ export class ViewFrame extends LitElement {
           this.loading = false;
         }}
       ></iframe>
-      <div
-        class="column center-content"
-        style="flex: 1; padding: 0; margin: 0; ${this.loading ? '' : 'display: none'}"
-      >
-        <img src="moss-icon.svg" style="height: 80px; width: 80px;" />
-        <div style="margin-top: 25px; margin-left: 10px; font-size: 24px; color: #142510">
-          loading...
-        </div>
-      </div>`;
+      ${this.renderLoading()}`;
   }
 
   render() {
@@ -88,15 +146,7 @@ export class ViewFrame extends LitElement {
               this.loading = false;
             }}
           ></iframe>
-          <div
-            class="column center-content"
-            style="flex: 1; padding: 0; margin: 0; ${this.loading ? '' : 'display: none'}"
-          >
-            <img src="moss-icon.svg" style="height: 80px; width: 80px;" />
-            <div style="margin-top: 25px; margin-left: 10px; font-size: 24px; color: #142510">
-              loading...
-            </div>
-          </div> `;
+          ${this.renderLoading()}`;
     }
   }
 
diff --git a/src/renderer/src/moss-store.ts b/src/renderer/src/moss-store.ts
index c9c3071e..0c4cdf9b 100644
--- a/src/renderer/src/moss-store.ts
+++ b/src/renderer/src/moss-store.ts
@@ -48,7 +48,13 @@ import {
 import { ToolsLibraryStore } from './personal-views/tool-library/tool-library-store.js';
 import { GroupStore } from './groups/group-store.js';
 import { DnaLocation, locateHrl } from './processes/hrl/locate-hrl.js';
-import { ConductorInfo, createGroup, getAllAppAssetsInfos, joinGroup } from './electron-api.js';
+import {
+  ConductorInfo,
+  createGroup,
+  getAllAppAssetsInfos,
+  getAppletDevPort,
+  joinGroup,
+} from './electron-api.js';
 import {
   deStringifyWal,
   destringifyAndDecode,
@@ -64,6 +70,7 @@ import { AppletStore } from './applets/applet-store.js';
 import { AppHashes, DistributionInfo, WebHappSource } from '@theweave/moss-types';
 import {
   appIdFromAppletHash,
+  appIdFromAppletId,
   appletHashFromAppId,
   appletIdFromAppId,
   toolBundleActionHashFromDistInfo,
@@ -155,6 +162,11 @@ export class MossStore {
 
   _appClients: Record<InstalledAppId, AppClient> = {};
 
+  /**
+   * Ports of applets running with hot-reloading in dev mode
+   */
+  _appletDevPorts: Record<AppletId, number> = {};
+
   _tzUtcOffset: number | undefined;
 
   myLatestActivity: number;
@@ -197,6 +209,16 @@ export class MossStore {
     });
   }
 
+  async getAppletDevPort(appletId: AppletId) {
+    const maybePort = this._appletDevPorts[appletId];
+    if (maybePort) return maybePort;
+    const port = await getAppletDevPort(appIdFromAppletId(appletId));
+    const appletPorts = this._appletDevPorts;
+    appletPorts[appletId] = port;
+    this._appletDevPorts = appletPorts;
+    return port;
+  }
+
   async groupStore(groupDnaHash: DnaHash): Promise<GroupStore | undefined> {
     const groupStores = await toPromise(this.groupStores);
     return groupStores.get(groupDnaHash);
diff --git a/src/renderer/src/personal-views/tool-publishing/elements/publish-tool.ts b/src/renderer/src/personal-views/tool-publishing/elements/publish-tool.ts
index 3543155f..e07fa617 100644
--- a/src/renderer/src/personal-views/tool-publishing/elements/publish-tool.ts
+++ b/src/renderer/src/personal-views/tool-publishing/elements/publish-tool.ts
@@ -17,7 +17,7 @@ import { consume } from '@lit/context';
 import { ActionHash } from '@holochain/client';
 import { resizeAndExport } from '../../../utils.js';
 import { AppHashes, WebHappSource } from '@theweave/moss-types';
-import { validateHappOrWebhapp } from '../../../electron-api.js';
+import { fetchAndValidateHappOrWebhapp } from '../../../electron-api.js';
 import { Tool } from '@theweave/tool-library-client';
 
 @localized()
@@ -79,32 +79,22 @@ export class PublishTool extends LitElement {
     version: string;
     webhapp_url: string;
   }) {
-    this._publishing = 'Fetching resource for validation...';
     console.log('TRYING TO PUBLISH TOOL...');
     if (!this._toolIconSrc) {
       this._publishing = undefined;
       notifyError('No Icon provided.');
       throw new Error('Icon is required.');
     }
-    // try to fetch (web)happ from source to verify link
-    let byteArray: number[];
-    try {
-      const response = await fetch(fields.webhapp_url);
-      byteArray = Array.from(new Uint8Array(await response.arrayBuffer()));
-    } catch (e) {
-      this._publishing = undefined;
-      notifyError('Failed to fetch resource at the specified URL');
-      throw new Error(`Failed to fetch resource at the specified URL: ${e}`);
-    }
+
     // verify that resource is of the right format (happ or webhapp) and compute the hashes
     let hashes: AppHashes;
     try {
-      this._publishing = 'Validating resource format and computing hashes...';
-      hashes = await validateHappOrWebhapp(byteArray);
+      this._publishing = 'Fetching and validating resource and computing hashes...';
+      hashes = await fetchAndValidateHappOrWebhapp(fields.webhapp_url);
     } catch (e) {
       this._publishing = undefined;
       notifyError(
-        `Asset format validation failed. Make sure the URL points to a valid .webhapp or .happ file.`,
+        `Asset format validation failed. Make sure the URL is valid and points to a valid .webhapp or .happ file.`,
       );
       throw new Error(`Asset format validation failed: ${e}`);
     }
diff --git a/src/renderer/src/personal-views/tool-publishing/elements/update-tool.ts b/src/renderer/src/personal-views/tool-publishing/elements/update-tool.ts
index 31be0a89..859130e5 100644
--- a/src/renderer/src/personal-views/tool-publishing/elements/update-tool.ts
+++ b/src/renderer/src/personal-views/tool-publishing/elements/update-tool.ts
@@ -16,7 +16,7 @@ import { consume } from '@lit/context';
 import { ActionHash } from '@holochain/client';
 import { notifyAndThrow, resizeAndExport } from '../../../utils.js';
 import { AppHashes, WebHappSource } from '@theweave/moss-types';
-import { validateHappOrWebhapp } from '../../../electron-api.js';
+import { fetchAndValidateHappOrWebhapp } from '../../../electron-api.js';
 import {
   Tool,
   UpdateToolInput,
@@ -112,23 +112,15 @@ export class UpdateTool extends LitElement {
         url: fields.webhapp_url,
       };
       this._updating = 'Fetching new resource for validation...';
-      // try to fetch (web)happ from new source to verify link
-      let byteArray: number[];
-      try {
-        const response = await fetch(fields.webhapp_url);
-        byteArray = Array.from(new Uint8Array(await response.arrayBuffer()));
-      } catch (e) {
-        this._updating = undefined;
-        notifyError('Failed to fetch new resource at the specified URL');
-        throw new Error(`Failed to fetch new resource at the specified URL: ${e}`);
-      }
       // verify that new resource is of the right format (happ or webhapp) and compute the new hashes
       try {
         this._updating = 'Validating resource format and computing hashes...';
-        newHashes = await validateHappOrWebhapp(byteArray);
+        newHashes = await fetchAndValidateHappOrWebhapp(fields.webhapp_url);
       } catch (e) {
         this._updating = undefined;
-        notifyError(`Failed to validate resources: ${e}`);
+        notifyError(
+          `Asset format validation failed. Make sure the URL is valid and points to a valid .webhapp or .happ file.`,
+        );
         throw new Error(`Asset format validation failed: ${e}`);
       }
       this._updating = 'Comparing hashes with previous app version...';
diff --git a/src/renderer/src/utils.ts b/src/renderer/src/utils.ts
index 6843d0d1..9b800850 100644
--- a/src/renderer/src/utils.ts
+++ b/src/renderer/src/utils.ts
@@ -21,7 +21,15 @@ import {
   DnaModifiers,
   InstalledAppId,
 } from '@holochain/client';
-import { Hrl, WAL, RenderView, FrameNotification, AppletHash, AppletId } from '@theweave/api';
+import {
+  Hrl,
+  WAL,
+  RenderView,
+  FrameNotification,
+  AppletHash,
+  AppletId,
+  ParentToAppletMessage,
+} from '@theweave/api';
 import { GroupDnaProperties } from '@theweave/group-client';
 import { decode, encode } from '@msgpack/msgpack';
 import { Base64, fromUint8Array, toUint8Array } from 'js-base64';
@@ -856,3 +864,74 @@ export function localTimeFromUtcOffset(offsetMinues: number): string {
   // Format the time in HH:MM format
   return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
 }
+
+/**
+ * Posts a message to all iframes of the specified AppletIds and returns the settled promises.
+ * This includes iframes of assets associated to the AppletIds, not only the main view.
+ *
+ * TODO: Add option to only target main view or specific views
+ *
+ * @param appletIds
+ * @param message
+ * @returns
+ */
+export async function postMessageToAppletIframes(
+  appletIds: { type: 'all' } | { type: 'some'; ids: AppletId[] },
+  message: ParentToAppletMessage,
+  extraOrigins?: Array<string>,
+) {
+  const allIframes = getAllIframes();
+  let allAppletIframes = allIframes.filter(
+    (iframe) => iframe.src.startsWith('applet://') || iframe.src.startsWith('http://localhost'),
+  );
+  if (appletIds.type === 'some') {
+    const relevantSrcs = appletIds.ids.map((id) => appletOriginFromAppletId(id));
+    allAppletIframes = allAppletIframes.filter((iframe) => {
+      let matches = false;
+      if (extraOrigins) {
+        extraOrigins.forEach((origin) => {
+          if (iframe.src.startsWith(origin)) {
+            matches = true;
+          }
+        });
+      }
+      relevantSrcs.forEach((origin) => {
+        if (iframe.src.startsWith(origin)) {
+          matches = true;
+        }
+      });
+      return matches;
+    });
+  }
+  console.log(
+    'Sending postMessate to the following iframes: ',
+    allAppletIframes.map((iframe) => iframe.src),
+  );
+
+  return Promise.allSettled(
+    allAppletIframes.map(async (iframe) => {
+      await postMessageToIframe(iframe, message);
+    }),
+  );
+}
+
+export async function postMessageToIframe<T>(
+  iframe: HTMLIFrameElement,
+  message: ParentToAppletMessage,
+) {
+  return new Promise<T>((resolve, reject) => {
+    const { port1, port2 } = new MessageChannel();
+
+    if (iframe.contentWindow) {
+      iframe.contentWindow!.postMessage(message, '*', [port2]);
+
+      port1.onmessage = (m) => {
+        if (m.data.type === 'success') {
+          resolve(m.data.result);
+        } else if (m.data.type === 'error') {
+          reject(m.data.error);
+        }
+      };
+    }
+  });
+}
diff --git a/src/renderer/src/walwindow.ts b/src/renderer/src/walwindow.ts
index f2afd2c4..f598b130 100644
--- a/src/renderer/src/walwindow.ts
+++ b/src/renderer/src/walwindow.ts
@@ -11,8 +11,14 @@ import {
   GroupProfile,
 } from '@theweave/api';
 import { decodeHashFromBase64 } from '@holochain/client';
+import { localized, msg } from '@lit/localize';
+import { postMessageToAppletIframes } from './utils';
+
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+
 // import { ipcRenderer } from 'electron';
 
+@localized()
 @customElement('wal-window')
 export class WalWindow extends LitElement {
   @state()
@@ -21,7 +27,49 @@ export class WalWindow extends LitElement {
   @state()
   appletHash: AppletHash | undefined;
 
+  @state()
+  loading: string | undefined = msg('loading...');
+
+  @state()
+  slowLoading = false;
+
+  @state()
+  slowReloadTimeout: number | undefined;
+
+  @state()
+  onBeforeUnloadHandler: ((e) => Promise<void>) | undefined;
+
+  @state()
+  shouldClose = false;
+
+  beforeUnloadListener = async (e) => {
+    e.preventDefault();
+    console.log('onbeforeunload event');
+    this.loading = 'Saving...';
+    // If it takes longer than 5 seconds to unload, offer to hard reload
+    this.slowReloadTimeout = window.setTimeout(() => {
+      this.slowLoading = true;
+    }, 4500);
+    await postMessageToAppletIframes({ type: 'all' }, { type: 'on-before-unload' });
+    console.log('on-before-unload callbacks finished.');
+    window.removeEventListener('beforeunload', this.beforeUnloadListener);
+    // The logic to set this variable lives in walwindow.html
+    if ((window as any).__WINDOW_CLOSING__) {
+      console.log('__WINDOW_CLOSING__ is true.');
+      (window as any).electronAPI.closeWindow();
+    } else {
+      window.location.reload();
+    }
+  };
+
   async firstUpdated() {
+    // add the beforeunload listener only 5 seconds later as there won't be anything
+    // meaningful to save by applets before and it will ensure that the iframes
+    // are ready to respond to the on-before-reload event
+    setTimeout(() => {
+      window.addEventListener('beforeunload', this.beforeUnloadListener);
+    }, 5000);
+
     // set up handler to handle iframe messages
     window.addEventListener('message', async (message) => {
       const request = message.data.request as AppletToParentRequest;
@@ -128,15 +176,64 @@ export class WalWindow extends LitElement {
     }
   }
 
+  hardRefresh() {
+    this.slowLoading = false;
+    window.removeEventListener('beforeunload', this.beforeUnloadListener);
+    // The logic to set this variable lives in walwindow.html
+    if ((window as any).__WINDOW_CLOSING__) {
+      (window as any).electronAPI.closeWindow();
+    } else {
+      window.location.reload();
+    }
+  }
+
+  renderLoading() {
+    return html`
+      <div
+        class="column center-content"
+        style="flex: 1; padding: 0; margin: 0; ${this.loading ? '' : 'display: none'}"
+      >
+        <img src="moss-icon.svg" style="height: 80px; width: 80px;" />
+        <div style="margin-top: 25px; margin-left: 10px; font-size: 24px; color: #142510">
+          ${this.loading}
+        </div>
+        ${this.slowLoading
+          ? html`
+              <div
+                class="column items-center"
+                style="margin-top: 50px; max-width: 600px;color: white;"
+              >
+                <div>This Tool takes unusually long to reload. Do you want to force reload?</div>
+                <div style="margin-top: 10px;">
+                  (force reloading may interrupt the Tool from saving unsaved content)
+                </div>
+                <sl-button
+                  variant="danger"
+                  @click=${() => this.hardRefresh()}
+                  style="margin-top: 20px; width: 150px;"
+                  >Force Reload</sl-button
+                >
+              </div>
+            `
+          : html``}
+      </div>
+    `;
+  }
+
   render() {
     if (!this.iframeSrc) return html`<div class="center-content">Loading...</div>`;
     return html`
       <iframe
+        id="wal-iframe"
         frameborder="0"
         src="${this.iframeSrc}"
-        style="flex: 1; display: block; padding: 0; margin: 0; height: 100vh;"
+        style=${`flex: 1; display: ${this.loading ? 'none' : 'block'}; padding: 0; margin: 0; height: 100vh;`}
         allow="camera *; microphone *; clipboard-write *;"
+        @load=${() => {
+          this.loading = undefined;
+        }}
       ></iframe>
+      ${this.renderLoading()}
     `;
   }
 
@@ -149,6 +246,8 @@ export class WalWindow extends LitElement {
           display: flex;
           margin: 0;
           padding: 0;
+          background-color: #588121;
+          font-family: 'Aileron', 'Open Sans', 'Helvetica Neue', sans-serif;
         }
       `,
     ];
diff --git a/src/renderer/walwindow.html b/src/renderer/walwindow.html
index 4bf32773..a331c201 100644
--- a/src/renderer/walwindow.html
+++ b/src/renderer/walwindow.html
@@ -7,11 +7,27 @@
       body {
         margin: 0;
         padding: 0;
+        display: flex;
+        flex: 1;
+        height: 100vh;
       }
     </style>
   </head>
   <body>
+    <!-- code to make on-before-unload working: -->
+    <script>
+      window.electronAPI.onWindowClosing(() => {
+        // This code is required to discern in the window.onbeforeunload callback
+        // whether the onbeforunload event is coming from a page reload or from a
+        // page close
+        window.__WINDOW_CLOSING__ = true;
+      });
+    </script>
     <script type="module" src="/src/walwindow.ts"></script>
+    <script type="module">
+      import '@shoelace-style/shoelace/dist/themes/light.css';
+      import '@fontsource/aileron';
+    </script>
     <wal-window></wal-window>
   </body>
 </html>