Added PWA & Updated README

README.md

@@ -1,7 +1,13 @@
-# Still in development!
+<div align="center">
+  <img src="previews/header.png" />
+  <quote>
+  Modern material design for Invidious.
+  </quote>
+</div>
 
-# Materialious
-Modern material design for Invidious
+&nbsp;
+
+-------
 
 ![Preview of homepage](./previews/home-preview.png)
 
@@ -21,7 +27,6 @@ Modern material design for Invidious
 
 ## Todo
 - Playlist support.
-- PWA support.
 
 ## Previews
 ![Preview of player](./previews/player-preview.png)

materialious/package.json

@@ -29,7 +29,8 @@
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+		"vite-plugin-pwa": "^0.19.7"
 	},
 	"type": "module",
 	"dependencies": {
@@ -40,4 +41,4 @@
 		"svelte-persisted-store": "^0.9.1",
 		"vidstack": "^1.11.1"
 	}
-}
+}

materialious/src/app.html

@@ -6,6 +6,9 @@
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link rel="stylesheet" href="%sveltekit.assets%/style.css">
+	<meta name="description" content="Modern material design for Invidious.">
+	<meta name="keywords" content="invidious,materialious,proxy,youtube,yt,theme,interface,modern">
+	<title>Materialious</title>
 	%sveltekit.head%
 </head>
 

materialious/vite.config.ts

@@ -1,9 +1,29 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { vite as vidstack } from 'vidstack/plugins';
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
 	plugins: [
+		VitePWA({
+			manifest: {
+				description: "Modern material design for Invidious.",
+				icons: [
+					{
+						src: "/android-chrome-512x512.png",
+						sizes: "512x512",
+						type: "image/png",
+					},
+					{
+						src: "/android-icon-192x192.png",
+						sizes: "192x192",
+						type: "image/png",
+					}
+				],
+				background_color: "#22005d",
+				theme_color: "#efb0ff"
+			}
+		}),
 		vidstack(),
 		sveltekit()
 	],