feat(project): favicons in different sizes

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

platforms/web/.depcheckrc.yaml

@@ -21,6 +21,7 @@ ignores: [
   '@babel/plugin-proposal-decorators', # Used to build with decorators for ioc resolution
   'babel-plugin-transform-typescript-metadata', # Used to build with decorators for ioc resolution
   '@babel/core', # Required peer dependency for babel plugins above
+  'sharp', # Requirement for @vite-pwa/assets-generator
 
   'eslint-plugin-react', # Installed by eslint config
   'eslint-plugin-react-hooks', # Installed by eslint config

platforms/web/index.html

@@ -9,9 +9,23 @@
   <meta name="twitter:card" content="summary" data-react-helmet="true"  />
   <meta property="og:title" content="JW OTT Webapp" data-react-helmet="true" >
   <meta property="og:description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true">
-  <meta property="og:image" content="/images/icon-256x256.png" data-react-helmet="true">
+  <meta property="og:image" content="/images/icons/app-icon.png" data-react-helmet="true">
 
-  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  <link rel="icon" href="/images/icons/favicon.ico" type="image/x-icon" sizes="any">
+  <link rel="icon" type="image/png" sizes="196x196" href="/images/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="160x160" href="/images/icons/favicon-64x64.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="64x64" href="/images/icons/favicon-64x64.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-60x60.png">
 
   <!-- Pre-connect JW Player origins -->
   <link rel="preconnect" href="https://content.jwplatform.com"/>
@@ -20,13 +34,9 @@
 
   <!-- Safari web app -->
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon.png">
 
   <!-- Chrome, Firefox OS and Opera -->
   <meta name="theme-color" content="#000000">
-  <!-- Windows Phone -->
-  <meta name="msapplication-navbutton-color" content="#000000">
-  <meta name="msapplication-config" content="/browserconfig.xml">
   <!-- iOS Safari -->
   <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
 

platforms/web/package.json

@@ -22,7 +22,8 @@
     "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
     "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
     "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
-    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types"
+    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types",
+    "generate-pwa-assets": "pwa-assets-generator"
   },
   "dependencies": {
     "@codeceptjs/allure-legacy": "^1.0.2",
@@ -50,6 +51,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.2",
     "@types/reflect-metadata": "^0.1.0",
+    "@vite-pwa/assets-generator": "^0.2.3",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "allure-commandline": "^2.17.2",
@@ -63,6 +65,7 @@
     "react-app-polyfill": "^3.0.0",
     "reflect-metadata": "^0.1.13",
     "sass": "^1.49.10",
+    "sharp": "^0.33.2",
     "stylelint": "^15.11.0",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
@@ -71,9 +74,9 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-pwa": "^0.14.0",
-    "vite-plugin-svgr": "4.2.0",
     "vite-plugin-static-copy": "^0.17.0",
     "vite-plugin-stylelint": "^4.3.0",
+    "vite-plugin-svgr": "4.2.0",
     "vitest": "^0.34.6",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"

platforms/web/public/manifest.json

@@ -11,7 +11,7 @@
   "prefer_related_applications": false,
   "icons": [
     {
-      "src": "images/android-chrome-144x144.png",
+      "src": "images/icons/pwa-144x144.png",
       "sizes": "144x144"
     }
   ]

platforms/web/pwa-assets.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, defaultAssetName, type Preset, type AssetType, type ResolvedAssetSize } from '@vite-pwa/assets-generator/config';
+
+export const ottPresetNoPadding: Preset = {
+  transparent: {
+    sizes: [196, 160, 144, 96, 64, 32],
+    favicons: [[48, 'favicon.ico']],
+    padding: 0,
+  },
+  maskable: {
+    sizes: [],
+    padding: 0,
+  },
+  apple: {
+    sizes: [180, 152, 144, 120, 114, 76, 72, 60],
+    padding: 0,
+  },
+};
+
+export default defineConfig({
+  images: './public/images/icons/app-icon.png', // Source image
+  preset: ottPresetNoPadding,
+  headLinkOptions: {
+    basePath: '/images/icons/',
+  },
+});