App manifest, plus icons

GoogleChrome · May 30, 2021 · 1be2247 · 1be2247
1 parent c9bea80
commit 1be2247
Show file tree

Hide file tree

Showing 21 changed files with 62 additions and 15 deletions.
diff --git a/public/images/apple-touch-icon.png b/public/images/apple-touch-icon.png
diff --git a/public/images/favicon-16x16.png b/public/images/favicon-16x16.png
diff --git a/public/images/favicon-32x32.png b/public/images/favicon-32x32.png
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
diff --git a/public/images/icon-128x128.png b/public/images/icon-128x128.png
diff --git a/public/images/icon-192x192.png b/public/images/icon-192x192.png
diff --git a/public/images/icon-256x256.png b/public/images/icon-256x256.png
diff --git a/public/images/icon-384x384.png b/public/images/icon-384x384.png
diff --git a/public/images/icon-512x512.png b/public/images/icon-512x512.png
diff --git a/public/images/icon-96x96.png b/public/images/icon-96x96.png
diff --git a/public/images/media-session/artwork-128x128.jpg b/public/images/media-session/artwork-128x128.jpg
diff --git a/public/images/media-session/artwork-192x192.jpg b/public/images/media-session/artwork-192x192.jpg
diff --git a/public/images/media-session/artwork-256x256.jpg b/public/images/media-session/artwork-256x256.jpg
diff --git a/public/images/media-session/artwork-384x384.jpg b/public/images/media-session/artwork-384x384.jpg
diff --git a/public/images/media-session/artwork-512x512.jpg b/public/images/media-session/artwork-512x512.jpg
diff --git a/public/images/media-session/artwork-96x96.jpg b/public/images/media-session/artwork-96x96.jpg
diff --git a/public/images/safari-pinned-tab.svg b/public/images/safari-pinned-tab.svg
diff --git a/public/index.html b/public/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>KINO</title>
+  <title>Kino</title>
+  <link rel="manifest" href="/manifest.json" />
   <link rel="shortcut icon" href="/images/favicon.ico">
   <link href=/images/favicon-32x32.png rel=icon sizes=32x32 type=image/png>
   <link href=/images/favicon-16x16.png rel=icon sizes=16x16 type=image/png>
   <link href=/images/apple-touch-icon.png rel=apple-touch-icon sizes=180x180>
-  <link href=/images/safari-pinned-tab.svg rel=mask-icon color=#0054ff>
+  <link href=/images/safari-pinned-tab.svg rel=mask-icon color=#141216>
   <link rel="stylesheet" href="/styles.css">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet">

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,42 @@
+{
+  "theme_color": "#141216",
+  "background_color": "#141216",
+  "display": "minimal-ui",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Kino",
+  "short_name": "Kino",
+  "description": "Sample Media (VOD) App",
+  "icons": [
+    {
+      "src": "/images/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/js/constants.js b/src/js/constants.js
@@ -62,12 +62,12 @@ export const IDB_CHUNK_INDEX = 'video-chunk';
  * Default artwork metadata used by Media Session API.
  */
 export const MEDIA_SESSION_DEFAULT_ARTWORK = [
-  { src: '/images/media-session/artwork-96x96.jpg', sizes: '96x96', type: 'image/jpeg' },
-  { src: '/images/media-session/artwork-128x128.jpg', sizes: '128x128', type: 'image/jpeg' },
-  { src: '/images/media-session/artwork-192x192.jpg', sizes: '192x192', type: 'image/jpeg' },
-  { src: '/images/media-session/artwork-256x256.jpg', sizes: '256x256', type: 'image/jpeg' },
-  { src: '/images/media-session/artwork-384x384.jpg', sizes: '384x384', type: 'image/jpeg' },
-  { src: '/images/media-session/artwork-512x512.jpg', sizes: '512x512', type: 'image/jpeg' },
+  { src: '/images/icon-96x96.png', sizes: '96x96', type: 'image/png' },
+  { src: '/images/icon-128x128.png', sizes: '128x128', type: 'image/png' },
+  { src: '/images/icon-192x192.png', sizes: '192x192', type: 'image/png' },
+  { src: '/images/icon-256x256.png', sizes: '256x256', type: 'image/png' },
+  { src: '/images/icon-384x384.png', sizes: '384x384', type: 'image/png' },
+  { src: '/images/icon-512x512.png', sizes: '512x512', type: 'image/png' },
 ];
 
 /**

diff --git a/src/js/sw/cache.js b/src/js/sw/cache.js
@@ -6,12 +6,12 @@ export default [
   '/images/favicon-16x16.png',
   '/images/favicon-32x32.png',
   '/images/favicon.ico',
-  '/images/media-session/artwork-128x128.jpg',
-  '/images/media-session/artwork-192x192.jpg',
-  '/images/media-session/artwork-256x256.jpg',
-  '/images/media-session/artwork-384x384.jpg',
-  '/images/media-session/artwork-512x512.jpg',
-  '/images/media-session/artwork-96x96.jpg',
+  '/images/icon-128x128.png',
+  '/images/icon-192x192.png',
+  '/images/icon-256x256.png',
+  '/images/icon-384x384.png',
+  '/images/icon-512x512.png',
+  '/images/icon-96x96.png',
   '/images/safari-pinned-tab.svg',
   '/index.html',
   '/styles.css',