manifest builder

manifest.json

@@ -1,40 +0,0 @@
-{
-    "short_name": "Stremio",
-    "name": "Stremio Web",
-    "description": "Freedom To Stream",
-    "icons": [
-        {
-            "src": "favicons/favicon.ico",
-            "sizes": "64x64 32x32 24x24 16x16",
-            "type": "image/x-icon"
-        },
-        {
-            "src": "images/icon_x192.png",
-            "type": "image/png",
-            "sizes": "192x192"
-        },
-        {
-            "src": "images/icon_x512.png",
-            "type": "image/png",
-            "sizes": "512x512"
-        },
-        {
-            "src": "images/maskable_icon_x192.png",
-            "type": "image/png",
-            "sizes": "192x192",
-            "purpose": "maskable"
-        },
-        {
-            "src": "images/maskable_icon_x512.png",
-            "type": "image/png",
-            "sizes": "512x512",
-            "purpose": "maskable"
-        }
-    ],
-    "start_url": "https://web.stremio.com",
-    "scope": "https://web.stremio.com",
-    "display": "standalone",
-    "orientation": "any",
-    "theme_color": "#2a2843",
-    "background_color": "#161523"
-}

package.json

@@ -69,6 +69,7 @@
         "webpack": "5.61.0",
         "webpack-cli": "4.9.1",
         "webpack-dev-server": "^4.7.4",
+        "webpack-pwa-manifest": "^4.3.0",
         "workbox-webpack-plugin": "^6.5.3"
     }
 }

src/index.html

@@ -7,9 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Stremio">
     <link rel="icon" type="image/png" sizes="96x96" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png">
-    <link rel="manifest" href="<%= htmlWebpackPlugin.options.manifestPath %>" />
     <meta name="theme-color" content="<%= htmlWebpackPlugin.options.themeColor %>">
-    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.imagesPath %>/icon_x192.png">
     <title>Stremio - Freedom to Stream</title>
     <%= htmlWebpackPlugin.tags.headTags %>
 </head>

webpack.config.js

@@ -9,6 +9,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
 const colors = require('@stremio/stremio-colors');
 const pachageJson = require('./package.json');
 
@@ -199,7 +200,6 @@ module.exports = (env, argv) => ({
             patterns: [
                 { from: 'favicons', to: `${COMMIT_HASH}/favicons` },
                 { from: 'images', to: `${COMMIT_HASH}/images` },
-                { from: 'manifest.json', to: `manifest.json` },
             ]
         }),
         new MiniCssExtractPlugin({
@@ -212,7 +212,37 @@ module.exports = (env, argv) => ({
             themeColor: colors.background,
             faviconsPath: `${COMMIT_HASH}/favicons`,
             imagesPath: `${COMMIT_HASH}/images`,
-            manifestPath: `manifest.json`,
-        })
+        }),
+        new WebpackPwaManifest({
+            name: 'Stremio Web',
+            short_name: 'Stremio',
+            description: 'Freedom To Stream',
+            background_color: '#161523',
+            theme_color: '#2a2843',
+            orientation: 'any',
+            display: 'standalone',
+            start_url: './',
+            scope: './',
+            publicPath: './',
+            icons: [
+                {
+                    src: 'images/icon.png',
+                    sizes: [196, 512],
+                    ios: true
+                },
+                {
+                    src: 'images/maskable_icon.png',
+                    sizes: [196, 512],
+                    purpose: 'maskable',
+                    destination: path.join(COMMIT_HASH, 'images', 'maskable')
+                },
+                {
+                    src: 'favicons/favicon.ico',
+                    sizes: [64, 32, 24, 16]
+                }
+            ].map(icon => ({ ...icon, destination: icon.destination ?? path.join(COMMIT_HASH, 'images') })),
+            fingerprints: false,
+            ios: true
+        }),
     ].filter(Boolean)
 });