Merge pull request #522 from edde746/move-manifest

Move manifest

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

@@ -6,10 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
     <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">
+    <link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">
     <title>Stremio - Freedom to Stream</title>
     <%= htmlWebpackPlugin.tags.headTags %>
 </head>

webpack.config.js

@@ -9,7 +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 colors = require('@stremio/stremio-colors');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
 const pachageJson = require('./package.json');
 
 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@@ -199,7 +199,7 @@ module.exports = (env, argv) => ({
             patterns: [
                 { from: 'favicons', to: `${COMMIT_HASH}/favicons` },
                 { from: 'images', to: `${COMMIT_HASH}/images` },
-                { from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
+                { from: 'screenshots/*.webp', to: `${COMMIT_HASH}` },
             ]
         }),
         new MiniCssExtractPlugin({
@@ -209,10 +209,59 @@ module.exports = (env, argv) => ({
             template: './src/index.html',
             inject: false,
             scriptLoading: 'blocking',
-            themeColor: colors.background,
             faviconsPath: `${COMMIT_HASH}/favicons`,
             imagesPath: `${COMMIT_HASH}/images`,
-            manifestPath: `${COMMIT_HASH}/manifest.json`,
-        })
+        }),
+        new WebpackPwaManifest({
+            name: 'Stremio Web',
+            short_name: 'Stremio',
+            description: 'Freedom To Stream',
+            background_color: '#161523',
+            theme_color: '#2a2843',
+            orientation: 'any',
+            display: 'standalone',
+            display_override: ['standalone'],
+            scope: './',
+            start_url: './',
+            publicPath: './',
+            icons: [
+                {
+                    src: 'images/icon.png',
+                    destination: `${COMMIT_HASH}/images`,
+                    sizes: [196, 512],
+                    purpose: 'any',
+                    ios: true,
+                },
+                {
+                    src: 'images/maskable_icon.png',
+                    destination: `${COMMIT_HASH}/images`,
+                    sizes: [196, 512],
+                    purpose: 'maskable',
+                },
+                {
+                    src: 'favicons/favicon.ico',
+                    destination: `${COMMIT_HASH}/favicons`,
+                    sizes: [256],
+                }
+            ],
+            screenshots : [
+                {
+                    src: `${COMMIT_HASH}/screenshots/board_wide.webp`,
+                    sizes: '1440x900',
+                    type: 'image/webp',
+                    form_factor: 'wide',
+                    label: 'Homescreen of Stremio'
+                },
+                {
+                    src: `${COMMIT_HASH}/screenshots/board_narrow.webp`,
+                    sizes: '414x896',
+                    type: 'image/webp',
+                    form_factor: 'narrow',
+                    label: 'Homescreen of Stremio'
+                }
+            ],
+            fingerprints: false,
+            ios: true
+        }),
     ].filter(Boolean)
 });