Added PWA support

app/app.vue

@@ -3,6 +3,16 @@ const { currentSong, isPlaying } = usePlayer()
 const debugView = useCookie("DEBUG_VIEW")
 const debugViewEnabled = computed(() => String(debugView.value ?? "") === "1")
 
+useHead({
+	meta: [
+		{ name: "theme-color", content: "#09090b" },
+		{ name: "viewport", content: "width=device-width, initial-scale=1, viewport-fit=cover" },
+		{ name: "apple-mobile-web-app-capable", content: "yes" },
+		{ name: "apple-mobile-web-app-status-bar-style", content: "black-translucent" },
+	],
+	link: [{ rel: "apple-touch-icon", href: "/icons/apple-touch-icon.png" }],
+})
+
 useHead(
 	computed(() => ({
 		titleTemplate:
@@ -14,6 +24,7 @@ useHead(
 </script>
 
 <template>
+	<NuxtPwaManifest />
 	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />

app/layouts/default.vue

@@ -21,10 +21,11 @@ const onSearchInput = (v: string) => {
 }
 
 const { data: user } = useApiFetch<any>("/user")
+const song = useSong()
 </script>
 
 <template>
-	<Sidebar class="default-shell">
+	<Sidebar class="default-shell" :class="{ 'has-player': song }">
 		<template #sidebar>
 			<p class="title">Music</p>
 
@@ -180,7 +181,12 @@ const { data: user } = useApiFetch<any>("/user")
 		}
 
 		:deep(> main) {
-			padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom) + $player-height);
+			padding: calc(1.25rem + env(safe-area-inset-top)) 1rem
+				calc(6rem + env(safe-area-inset-bottom));
+		}
+
+		&.has-player :deep(> main) {
+			padding-bottom: calc(6rem + env(safe-area-inset-bottom) + $player-height);
 		}
 	}
 

app/styles/_variables.scss

@@ -1,5 +1,5 @@
 $color-accent: rgb(255, 69, 58);
-$color-background: oklch(14.1% 0.005 285.823); // #1a202c
+$color-background: oklch(14.1% 0.005 285.823); // #09090b
 $color-secondary-background: oklch(26.862% 0.00003 271.152);
 $color-text: rgba(255, 255, 255, 0.92);
 $color-placeholder-text: rgba(255, 255, 255, 0.44);

app/styles/global.scss

@@ -1,11 +1,17 @@
 @use "reset" as *;
 @use "util" as *;
+@use "variables" as *;
 
 html {
 	font-family:
 		-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	color: white;
+	background-color: $color-background;
+}
+
+body {
+	background-color: $color-background;
 }
 
 main > h1 {

nuxt.config.ts

@@ -25,7 +25,50 @@ export default defineNuxtConfig({
 			mediaBaseUrl: "",
 		},
 	},
-	modules: ["@nuxt/fonts", "@nuxt/icon", "@nuxt/image"],
+	modules: ["@nuxt/fonts", "@nuxt/icon", "@nuxt/image", "@vite-pwa/nuxt"],
+	pwa: {
+		strategies: "injectManifest",
+		srcDir: "../public",
+		filename: "sw.js",
+		registerType: "autoUpdate",
+		registerWebManifestInRouteRules: true,
+		injectManifest: {
+			injectionPoint: undefined,
+		},
+		devOptions: {
+			enabled: false,
+		},
+		manifest: {
+			id: "/",
+			name: "Music",
+			short_name: "Music",
+			description: "Your personal music library and player.",
+			start_url: "/",
+			scope: "/",
+			display: "standalone",
+			background_color: "#09090b",
+			theme_color: "#09090b",
+			categories: ["music", "entertainment"],
+			icons: [
+				{
+					src: "/icons/pwa-192.png",
+					sizes: "192x192",
+					type: "image/png",
+				},
+				{
+					src: "/icons/pwa-512.png",
+					sizes: "512x512",
+					type: "image/png",
+				},
+				{
+					src: "/icons/pwa-maskable-512.png",
+					sizes: "512x512",
+					type: "image/png",
+					purpose: "maskable",
+				},
+			],
+		},
+	},
 	components: [
 		{
 			path: "~/ui",

package.json

@@ -3,7 +3,7 @@
 	"type": "module",
 	"private": true,
 	"scripts": {
-		"build": "nuxt build",
+		"build": "nuxt build && bun scripts/copy-nitro-public-assets.ts",
 		"dev": "nuxt dev",
 		"generate": "nuxt generate",
 		"preview": "nuxt preview",
@@ -31,6 +31,7 @@
 	"devDependencies": {
 		"@golar/vue": "^0.1.10",
 		"@types/node": "^24.9.1",
+		"@vite-pwa/nuxt": "^1.1.1",
 		"golar": "^0.1.10",
 		"sass-embedded": "^1.93.2"
 	}

public/icons/pwa-source.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<rect width="512" height="512" fill="#08090b" />
+	<path
+		d="M96 352 174 176l78 176h44l70-138 64 138"
+		fill="none"
+		stroke="#00db81"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="34"
+	/>
+</svg>

public/manifest.webmanifest

@@ -0,0 +1,30 @@
+{
+	"id": "/",
+	"name": "Music",
+	"short_name": "Music",
+	"description": "Your personal music library and player.",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"background_color": "#09090b",
+	"theme_color": "#09090b",
+	"categories": ["music", "entertainment"],
+	"icons": [
+		{
+			"src": "/icons/pwa-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/icons/pwa-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		},
+		{
+			"src": "/icons/pwa-maskable-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	]
+}

public/offline.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<meta name="theme-color" content="#09090b" />
+		<title>Offline · Music</title>
+		<style>
+			:root {
+				color-scheme: dark;
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+				background: #09090b;
+				color: white;
+			}
+			body {
+				min-height: 100vh;
+				margin: 0;
+				display: grid;
+				place-items: center;
+				text-align: center;
+			}
+			main {
+				max-width: 26rem;
+				padding: 2rem;
+			}
+			img {
+				width: 4rem;
+				height: 4rem;
+				margin-bottom: 1rem;
+			}
+			p {
+				color: #b8b8bd;
+				line-height: 1.5;
+			}
+			button {
+				margin-top: 1rem;
+				padding: 0.75rem 1.25rem;
+				border: 0;
+				border-radius: 999px;
+				background: #00db81;
+				color: #09090b;
+				font: inherit;
+				font-weight: 700;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<img src="/icons/pwa-192.png" alt="" />
+			<h1>You’re offline</h1>
+			<p>Reconnect to browse your library and play music.</p>
+			<button type="button" onclick="location.reload()">Try again</button>
+		</main>
+	</body>
+</html>

public/sw.js

@@ -0,0 +1,80 @@
+const SHELL_CACHE = "music-pwa-shell-v1"
+const ASSET_CACHE = "music-pwa-assets-v1"
+const OFFLINE_PAGE = "/offline.html"
+const SHELL_ASSETS = [
+	OFFLINE_PAGE,
+	"/icons/pwa-192.png",
+	"/icons/pwa-512.png",
+	"/icons/pwa-maskable-512.png",
+	"/icons/apple-touch-icon.png",
+]
+const SHELL_ASSET_PATHS = new Set(SHELL_ASSETS)
+
+self.addEventListener("install", (event) => {
+	event.waitUntil(
+		caches
+			.open(SHELL_CACHE)
+			.then((cache) => cache.addAll(SHELL_ASSETS))
+			.then(() => self.skipWaiting()),
+	)
+})
+
+self.addEventListener("activate", (event) => {
+	event.waitUntil(
+		caches.keys().then(async (keys) => {
+			await Promise.all(
+				keys
+					.filter(
+						(key) =>
+							key.startsWith("music-pwa-") &&
+							key !== SHELL_CACHE &&
+							key !== ASSET_CACHE,
+					)
+					.map((key) => caches.delete(key)),
+			)
+			await self.clients.claim()
+		}),
+	)
+})
+
+self.addEventListener("fetch", (event) => {
+	const request = event.request
+	if (request.method !== "GET") return
+
+	const url = new URL(request.url)
+	if (url.origin !== self.location.origin) return
+
+	if (request.mode === "navigate") {
+		event.respondWith(
+			fetch(request).catch(async () => {
+				const offlinePage = await caches.match(OFFLINE_PAGE)
+				return offlinePage ?? Response.error()
+			}),
+		)
+		return
+	}
+
+	if (SHELL_ASSET_PATHS.has(url.pathname)) {
+		event.respondWith(
+		caches.match(request).then((cached) => cached ?? fetch(request)),
+		)
+		return
+	}
+
+	if (url.pathname.startsWith("/_nuxt/")) {
+		event.respondWith(
+			caches.open(ASSET_CACHE).then(async (cache) => {
+				const cached = await cache.match(request)
+				if (cached) return cached
+
+				const response = await fetch(request)
+				if (response.ok) {
+					await cache.put(request, response.clone())
+					const entries = await cache.keys()
+					if (entries.length > 100) await cache.delete(entries[0])
+				}
+				return response
+			}),
+		)
+	}
+})

scripts/copy-nitro-public-assets.ts

@@ -0,0 +1,13 @@
+import { cp, mkdir } from "node:fs/promises"
+import { resolve } from "node:path"
+
+const publicOutput = resolve(".output/public")
+const nitroAssetDirectory = resolve(".output/server/chunks/public")
+const nuxtAssetsDirectory = resolve(publicOutput, "_nuxt")
+
+await mkdir(nitroAssetDirectory, { recursive: true })
+await cp(publicOutput, nitroAssetDirectory, {
+	recursive: true,
+	force: true,
+	filter: (path) => path !== nuxtAssetsDirectory,
+})