Merge pull request #293 from Stremio/pwa

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

@@ -14,7 +14,7 @@
     "dependencies": {
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
-        "@stremio/stremio-colors": "4.0.1",
+        "@stremio/stremio-colors": "5.0.1",
         "@stremio/stremio-core-web": "0.44.6",
         "@stremio/stremio-icons": "3.0.5",
         "@stremio/stremio-video": "0.0.24",
@@ -62,6 +62,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

@@ -7,7 +7,9 @@
     <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="apple-touch-icon" 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 - All you can watch!</title>
     <%= htmlWebpackPlugin.tags.headTags %>
 </head>

src/index.js

@@ -17,3 +17,12 @@ const App = require('./App');
 
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(<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,8 +6,10 @@ 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 colors = require('@stremio/stremio-colors');
 const pachageJson = require('./package.json');
 
 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@@ -187,8 +189,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`
@@ -197,7 +209,10 @@ module.exports = (env, argv) => ({
             template: './src/index.html',
             inject: false,
             scriptLoading: 'blocking',
-            faviconsPath: `${COMMIT_HASH}/favicons`
+            themeColor: colors.background,
+            faviconsPath: `${COMMIT_HASH}/favicons`,
+            imagesPath: `${COMMIT_HASH}/images`,
+            manifestPath: `${COMMIT_HASH}/manifest.json`,
         })
-    ]
+    ].filter(Boolean)
 });