fix(homepage): unregister stale service workers before mount

commit: 9ae3e09113a04e8e8cb52979953091840c9ec87a
author: bamen · 13mo ago · 2025-09-17 05:17 UTC
parent: e7ca981
signature: unsigned

2 files · +42 -8

M gui/src/pages/Homepage.svelte +20 -4

@@ -1,6 +1,6 @@
1	1		<script lang="ts">
2	2		import { onMount } from 'svelte';
3		-	import { Trash2, Globe } from '@lucide/svelte';
	3	+	// Icons disabled for investigation: removed @lucide/svelte imports
4	4
5	5		interface HistoryItem {
6	6		id: number;

@@ -478,11 +478,19 @@
478	478		}}
479	479		/>
480	480		<div class="history-favicon-fallback" style="display: none;">
481		-	<Globe size={12} />
	481	+	<!-- inline globe placeholder -->
	482	+	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
	483	+	<circle cx="12" cy="12" r="10" />
	484	+	<path d="M2 12h20" />
	485	+	</svg>
482	486		</div>
483	487		{:else}
484	488		<div class="history-favicon-fallback">
485		-	<Globe size={12} />
	489	+	<!-- inline globe placeholder -->
	490	+	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
	491	+	<circle cx="12" cy="12" r="10" />
	492	+	<path d="M2 12h20" />
	493	+	</svg>
486	494		</div>
487	495		{/if}
488	496		</div>

@@ -500,7 +508,8 @@
500	508		onkeydown={(e) => e.key === 'Enter' && deleteHistoryEntry(item.id, e)}
501	509		title="Delete this entry"
502	510		>
503		-	<Trash2 size={16} />
	511	+	<!-- inline delete placeholder -->
	512	+	<span aria-hidden="true" style="display:inline-block;line-height:1;">×</span>
504	513		</div>
505	514		</div>
506	515		</div>

@@ -588,6 +597,13 @@
588	597		</div>
589	598
590	599		<style>
	600	+	/* Remove default browser margins/padding on the page */
	601	+	:global(html), :global(body) {
	602	+	margin: 0;
	603	+	padding: 0;
	604	+	background: #1a1a1a;
	605	+	}
	606	+
591	607		/* Scoped homepage container to prevent global CSS conflicts */
592	608		.homepage-container {
593	609		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Trash2, Globe } from '@lucide/svelte';
+  // Icons disabled for investigation: removed @lucide/svelte imports
   interface HistoryItem {
     id: number;
                     }}
                   />
                   <div class="history-favicon-fallback" style="display: none;">
-                    <Globe size={12} />
+                    <!-- inline globe placeholder -->
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <circle cx="12" cy="12" r="10" />
+                      <path d="M2 12h20" />
+                    </svg>
                   </div>
                 {:else}
                   <div class="history-favicon-fallback">
-                    <Globe size={12} />
+                    <!-- inline globe placeholder -->
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <circle cx="12" cy="12" r="10" />
+                      <path d="M2 12h20" />
+                    </svg>
                   </div>
                 {/if}
               </div>
                 onkeydown={(e) => e.key === 'Enter' && deleteHistoryEntry(item.id, e)}
                 title="Delete this entry"
               >
-                <Trash2 size={16} />
+                <!-- inline delete placeholder -->
+                <span aria-hidden="true" style="display:inline-block;line-height:1;">×</span>
               </div>
             </div>
           </div>
 </div>
 <style>
+  /* Remove default browser margins/padding on the page */
+  :global(html), :global(body) {
+    margin: 0;
+    padding: 0;
+    background: #1a1a1a;
+  }
   /* Scoped homepage container to prevent global CSS conflicts */
   .homepage-container {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

M gui/src/pages/homepage.ts +22 -4

@@ -1,9 +1,27 @@
1	1		import { mount } from 'svelte';
2	2		import Homepage from './Homepage.svelte';
3	3
	4	+	// Proactively unregister any Service Workers and clear caches that may have been
	5	+	// installed by previous builds (e.g., SvelteKit), which can otherwise attempt to
	6	+	// request non-existent _app/immutable/* assets under dumb://homepage.
	7	+	async function cleanupServiceWorkersAndCaches() {
	8	+	try {
	9	+	if ('serviceWorker' in navigator) {
	10	+	const regs = await navigator.serviceWorker.getRegistrations();
	11	+	await Promise.all(regs.map((r) => r.unregister().catch(() => {})));
	12	+	}
	13	+	} catch { /* ignore */ }
	14	+
	15	+	try {
	16	+	if ('caches' in window) {
	17	+	const keys = await caches.keys();
	18	+	await Promise.all(keys.map((k) => caches.delete(k).catch(() => false)));
	19	+	}
	20	+	} catch { /* ignore */ }
	21	+	}
	22	+
	23	+
4	24		// Mount the Homepage component to the DOM
5		-	const app = mount(Homepage, {
6		-	target: document.body,
	25	+	cleanupServiceWorkersAndCaches().finally(() => {
	26	+	mount(Homepage, { target: document.body });
7	27		});
8		-
9		-	export default app;⏎̸

@@ -1,9 +1,27 @@
1		import { mount } from 'svelte';	1		import { mount } from 'svelte';
2		import Homepage from './Homepage.svelte';	2		import Homepage from './Homepage.svelte';
3			3
			4	+	// Proactively unregister any Service Workers and clear caches that may have been
			5	+	// installed by previous builds (e.g., SvelteKit), which can otherwise attempt to
			6	+	// request non-existent _app/immutable/* assets under dumb://homepage.
			7	+	async function cleanupServiceWorkersAndCaches() {
			8	+	try {
			9	+	if ('serviceWorker' in navigator) {
			10	+	const regs = await navigator.serviceWorker.getRegistrations();
			11	+	await Promise.all(regs.map((r) => r.unregister().catch(() => {})));
			12	+	}
			13	+	} catch { /* ignore */ }
			14	+
			15	+	try {
			16	+	if ('caches' in window) {
			17	+	const keys = await caches.keys();
			18	+	await Promise.all(keys.map((k) => caches.delete(k).catch(() => false)));
			19	+	}
			20	+	} catch { /* ignore */ }
			21	+	}
			22	+
			23	+
4		// Mount the Homepage component to the DOM	24		// Mount the Homepage component to the DOM
5	-	const app = mount(Homepage, {	25	+	cleanupServiceWorkersAndCaches().finally(() => {
6	-	target: document.body,	26	+	mount(Homepage, { target: document.body });
7		});	27		});
8	-
9	-	export default app;⏎̸