jellyfin · endrl · Apr 17, 2023 · Apr 17, 2023
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,11 +1,21 @@
 <!DOCTYPE html>
 <html lang="en" class="no-forced-scrollbar">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+    <title>Jellyfin Vue</title>
+    <meta name="description" content="The Free Software Media System" />
+    <!-- Recreate icons with: https://realfavicongenerator.net/. Don't include `site.manifest` -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/jellyfin.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#2b5797" />
+    <meta name="theme-color" content="#101010" />
     <style>
       @keyframes gradient {
         0% {
@@ -91,7 +101,6 @@
       }
     </style>
     <script type="module" src="src/main.ts"></script>
-    <title>Jellyfin Vue</title>
   </head>
   <body>
     <div class="splashBackground">

diff --git a/frontend/package.json b/frontend/package.json
@@ -88,6 +88,7 @@
     "unplugin-vue-router": "0.5.4",
     "vite": "4.2.1",
     "vite-plugin-pages": "0.29.0",
+    "vite-plugin-pwa": "0.14.7",
     "vite-plugin-vue-layouts": "0.8.0",
     "vue-eslint-parser": "9.1.1",
     "vue-i18n-extract": "2.0.7",

diff --git a/frontend/public/android-chrome-192x192.png b/frontend/public/android-chrome-192x192.png
diff --git a/frontend/public/android-chrome-512x512.png b/frontend/public/android-chrome-512x512.png
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
diff --git a/frontend/public/browserconfig.xml b/frontend/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/frontend/public/favicon-16x16.png b/frontend/public/favicon-16x16.png
diff --git a/frontend/public/favicon-32x32.png b/frontend/public/favicon-32x32.png
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/mstile-150x150.png b/frontend/public/mstile-150x150.png
diff --git a/frontend/public/safari-pinned-tab.svg b/frontend/public/safari-pinned-tab.svg
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -21,6 +21,7 @@ import visualizer from 'rollup-plugin-visualizer';
 import virtual from '@rollup/plugin-virtual';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import autoprefixer from 'autoprefixer';
+import { VitePWA } from 'vite-plugin-pwa';
 /**
  * We need to match our locales to the date-fns ones for proper localization of dates.
  * In order to reduce bundle size, we calculate here (at build time) only the locales that we
@@ -152,6 +153,40 @@ export default defineConfig(({ mode }): UserConfig => {
         fullInstall: false,
         forceStringify: true,
         include: localeFilesFolder
+      }),
+      VitePWA({
+        registerType: 'autoUpdate',
+        workbox: {
+          globPatterns: ['**/*.{js,css,html,json,wasm,woff,woff2,png,ico,svg}'],
+          maximumFileSizeToCacheInBytes: 6_000_000
+        },
+        manifestFilename: 'jellyfin.webmanifest',
+        manifest: {
+          name: 'Jellyfin Media Center',
+          short_name: 'Jellyfin',
+          description: 'The Free Software Media System',
+          lang: 'en-US',
+          theme_color: '#101010',
+          background_color: '#101010',
+          icons: [
+            {
+              src: 'android-chrome-192x192.png',
+              sizes: '192x192',
+              type: 'image/png'
+            },
+            {
+              src: 'android-chrome-512x512.png',
+              sizes: '512x512',
+              type: 'image/png'
+            },
+            {
+              src: 'android-chrome-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'any maskable'
+            }
+          ]
+        }
       })
     ],
     build: {