feat: implement pwa

manifest.json

@@ -0,0 +1,40 @@
+{
+    "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": "natural",
+    "theme_color": "#2a2843",
+    "background_color": "#161523"
+}

package.json

@@ -57,6 +57,7 @@
         "terser-webpack-plugin": "5.2.4",
         "webpack": "5.61.0",
         "webpack-cli": "4.9.1",
-        "webpack-dev-server": "4.7.4"
+        "webpack-dev-server": "4.7.4",
+        "workbox-webpack-plugin": "^6.5.3"
     }
 }

src/index.html

@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
     <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="#2a2843">
+    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.imagesPath %>/icon_x192.png">
     <title>Stremio - All you can watch!</title>
     <%= htmlWebpackPlugin.tags.headTags %>
 </head>

src/index.js

@@ -16,3 +16,12 @@ const ReactDOM = require('react-dom');
 const App = require('./App');
 
 ReactDOM.render(<App />, document.getElementById('app'));
+
+if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js')
+            .catch((registrationError) => {
+                console.error('SW registration failed: ', registrationError);
+            });
+    });
+}

webpack.config.js

@@ -6,6 +6,7 @@ const webpack = require('webpack');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 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 pachageJson = require('./package.json');
@@ -184,8 +185,18 @@ module.exports = (env, argv) => ({
         new CleanWebpackPlugin({
             cleanOnceBeforeBuildPatterns: ['*']
         }),
+        argv.mode === 'production' && 
+            new WorkboxPlugin.GenerateSW({
+                maximumFileSizeToCacheInBytes: 20000000,
+                clientsClaim: true,
+                skipWaiting: true
+            }),
         new CopyWebpackPlugin({
-            patterns: [{ from: 'favicons', to: `${COMMIT_HASH}/favicons` }]
+            patterns: [
+                { from: 'favicons', to: `${COMMIT_HASH}/favicons` },
+                { from: 'images', to: `${COMMIT_HASH}/images` },
+                { from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
+            ]
         }),
         new MiniCssExtractPlugin({
             filename: `${COMMIT_HASH}/styles/[name].css`
@@ -194,7 +205,9 @@ module.exports = (env, argv) => ({
             template: './src/index.html',
             inject: false,
             scriptLoading: 'blocking',
-            faviconsPath: `${COMMIT_HASH}/favicons`
+            faviconsPath: `${COMMIT_HASH}/favicons`,
+            imagesPath: `${COMMIT_HASH}/images`,
+            manifestPath: `${COMMIT_HASH}/manifest.json`,
         })
-    ]
+    ].filter(Boolean)
 });