Optimize web config to be installed as PWA (#10405)

* Update values and add site manifest * Use appropriate icon types * Add purpose to all * Adjust dark theme color * Remove unused
blakeblackshear · Mar 13, 2024 · b8e4726 · b8e4726
1 parent 09cf54c
commit b8e4726
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 0 deletions.
diff --git a/web/index.html b/web/index.html
@@ -25,9 +25,12 @@
  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
  <link rel="manifest" href="/site.webmanifest" />
  <link rel="mask-icon" href="/images/favicon.svg" color="#3b82f7" />
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
  </head>
  <body>
  <div id="root"></div>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
  <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
diff --git a/web/public/images/android-chrome-192x192.png b/web/public/images/android-chrome-192x192.png
diff --git a/web/public/images/android-chrome-512x512.png b/web/public/images/android-chrome-512x512.png
diff --git a/web/public/images/apple-touch-icon.png b/web/public/images/apple-touch-icon.png
diff --git a/web/site.webmanifest b/web/site.webmanifest
@@ -0,0 +1,28 @@
+{
+ "name": "Frigate",
+ "short_name": "Frigate",
+ "start_url": "/",
+ "icons": [
+ {
+ "src": "/images/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "any"
+ },
+ {
+ "src": "/images/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "any"
+ },
+ {
+ "src": "/images/apple-touch-icon.png",
+ "sizes": "180x180",
+ "type": "image/png",
+ "purpose": "maskable"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}