feat: service worker

app/com/icons/baseline-system-update-alt.tsx

@@ -0,0 +1,9 @@
+import { createIcon } from './_icon.tsx';
+
+const SystemUpdateAltIcon = createIcon([
+	[
+		'm12 16.5l4-4h-3v-9h-2v9H8l4 4zm9-13h-6v1.99h6v14.03H3V5.49h6V3.5H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2z',
+	],
+]);
+
+export default SystemUpdateAltIcon;

app/desktop/views/Layout.tsx

@@ -17,13 +17,16 @@ import {
 } from '../globals/panes.ts';
 import { addPane, preferences } from '../globals/settings.ts';
 
+import { isUpdateReady, updateSW } from '~/utils/service-worker.ts';
+
 import { Interactive } from '~/com/primitives/interactive.ts';
 
 import { Flyout } from '~/com/components/Flyout.tsx';
 
 import FeatherIcon from '~/com/icons/baseline-feather.tsx';
 import SearchIcon from '~/com/icons/baseline-search.tsx';
 import SettingsIcon from '~/com/icons/baseline-settings.tsx';
+import SystemUpdateAltIcon from '~/com/icons/baseline-system-update-alt.tsx';
 import TableLargeAddIcon from '~/com/icons/baseline-table-large-add.tsx';
 
 import {
@@ -36,7 +39,11 @@ import AddDeckDialog from '../components/settings/AddDeckDialog.tsx';
 const SettingsDialog = lazy(() => import('../components/settings/SettingsDialog.tsx'));
 
 const menuIconButton = Interactive({
-	class: `h-11 shrink-0 text-lg disabled:pointer-events-none disabled:opacity-50`,
+	class: `grid h-11 shrink-0 place-items-center text-lg disabled:opacity-50`,
+});
+
+const updateButton = Interactive({
+	class: `grid h-11 shrink-0 place-items-center text-lg text-green-600`,
 });
 
 const DashboardLayout = () => {
@@ -49,14 +56,14 @@ const DashboardLayout = () => {
 				<Show when={multiagent.active}>
 					{(uid) => (
 						<>
-							<button title="Post..." class={menuIconButton}>
-								<FeatherIcon class="mx-auto" />
+							<button disabled title="Post..." class={menuIconButton}>
+								<FeatherIcon />
 							</button>
 
 							<Flyout
 								button={
 									<button title="Search..." class={menuIconButton}>
-										<SearchIcon class="mx-auto" />
+										<SearchIcon />
 									</button>
 								}
 								placement="bottom-start"
@@ -149,6 +156,22 @@ const DashboardLayout = () => {
 					</For>
 				</div>
 
+				{(() => {
+					if (isUpdateReady()) {
+						return (
+							<button
+								title="Skeetdeck update is ready, click here to reload"
+								onClick={() => {
+									updateSW();
+								}}
+								class={updateButton}
+							>
+								<SystemUpdateAltIcon />
+							</button>
+						);
+					}
+				})()}
+
 				<button
 					title="Open application settings"
 					disabled={preferences.onboarding}
@@ -157,7 +180,7 @@ const DashboardLayout = () => {
 					}}
 					class={menuIconButton}
 				>
-					<SettingsIcon class="mx-auto" />
+					<SettingsIcon />
 				</button>
 			</div>
 

app/env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/vanillajs" />
 
 interface ImportMetaEnv {
 	readonly VITE_BRAND_NAME: string;

app/package.json

@@ -29,6 +29,7 @@
 		"postcss": "^8.4.32",
 		"terser": "^5.25.0",
 		"vite": "^5.0.6",
+		"vite-plugin-pwa": "^0.17.4",
 		"vite-plugin-solid": "^2.7.2",
 		"wrangler": "^3.19.0"
 	}

app/utils/service-worker.ts

@@ -0,0 +1,12 @@
+import { createSignal } from 'solid-js';
+import { registerSW } from 'virtual:pwa-register';
+
+const [isUpdateReady, setIsUpdateReady] = createSignal(false);
+
+const updateSW = registerSW({
+	onNeedRefresh() {
+		setIsUpdateReady(true);
+	},
+});
+
+export { isUpdateReady, updateSW };

app/vite-desktop.config.ts

@@ -2,6 +2,7 @@ import * as path from 'node:path';
 import { defineConfig } from 'vite';
 
 import solid from 'vite-plugin-solid';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
 	root: 'desktop',
@@ -11,6 +12,31 @@ export default defineConfig({
 				optimizeConstEnums: true,
 			},
 		}),
+		VitePWA({
+			registerType: 'prompt',
+			injectRegister: null,
+			workbox: {
+				globPatterns: ['**/*.{js,css,html,svg}'],
+				cleanupOutdatedCaches: true,
+			},
+			manifest: {
+				name: 'Skeetdeck',
+				short_name: 'Skeetdeck',
+				description: 'A deck-based client for Bluesky social media',
+				display: 'standalone',
+				id: '/?source=pwa',
+				start_url: '/?source=pwa',
+				background_color: '#000000',
+				scope: '/',
+				icons: [
+					{
+						src: 'favicon.svg',
+						type: 'image/svg+xml',
+						sizes: '150x150',
+					},
+				],
+			},
+		}),
 	],
 	build: {
 		minify: 'terser',