Added PWA

src/web/.gitignore

@@ -1,3 +1,6 @@
 # next.js specific
 .next/
 out
+
+**/public/sw*
+**/public/workbox*

src/web/next.config.js

@@ -8,6 +8,12 @@
  */
 const path = require('path');
 const dotenv = require('dotenv');
+const withPlugins = require('next-compose-plugins');
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/,
+});
+const withPWA = require('next-pwa');
+const runtimeCaching = require('next-pwa/cache');
 
 // Load an env file
 const loadApiUrlFromEnv = (envFile) => dotenv.config({ path: envFile });
@@ -55,16 +61,30 @@ envVarsToForward.forEach((envVar) =>
   console.info(`Using NEXT_PUBLIC_${envVar}=${process.env[`NEXT_PUBLIC_${envVar}`]}`)
 );
 
-const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
-});
-
-module.exports = withMDX({
+// Configs for Next
+const nextConfig = {
   pageExtensions: ['ts', 'tsx', 'md', 'mdx'],
   poweredByHeader: false,
   reactStrictMode: true,
   trailingSlash: true,
   future: {
     webpack5: true,
   },
-});
+};
+
+// Compose all plugins
+module.exports = withPlugins([
+  [withMDX],
+  [
+    withPWA,
+    {
+      pwa: {
+        disable: process.env.NODE_ENV === 'development',
+        dest: 'public',
+        publicExcludes: ['!google*.html'],
+        runtimeCaching,
+      },
+    },
+  ],
+  nextConfig,
+]);

src/web/package.json

@@ -12,7 +12,6 @@
     "@fontsource/spartan": "^4.2.2",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
-    "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^10.1.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/yup": "^0.29.11",
@@ -22,19 +21,23 @@
     "jwt-decode": "^3.1.2",
     "nanoid": "^3.1.22",
     "next": "^10.1.3",
+    "next-compose-plugins": "^2.2.1",
+    "next-pwa": "^5.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.1",
     "smoothscroll-polyfill": "^0.4.4",
     "swr": "^0.5.5",
-    "valid-url": "^1.0.9",
     "yup": "^0.32.9"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.6",
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/mdx": "^1.6.22",
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.3",
-    "eslint-plugin-jest": "^24.3.4",
+    "babel-loader": "^8.2.2",
+    "terser-webpack-plugin": "^5.1.1",
     "typescript": "^4.2.3"
   }
 }

src/web/public/manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "Telescope",
+  "short_name": "Telescope",
+  "theme_color": "#121D59",
+  "background_color": "#FFFFFF",
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "logoImages/manifest-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "logoImages/manifest-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}

src/web/src/pages/_document.tsx

@@ -20,6 +20,8 @@ class MyDocument extends Document {
           <link rel="icon" href={logoUrl} type="image/svg+xml" />
           <meta charSet="utf-8" />
           <meta name="theme-color" content={lightTheme.palette.primary.main} />
+          <link rel="manifest" href="/manifest.json" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/logoImages/apple-icon-180.png" />
 
           <meta name="description" content={description} />
           <meta name="author" content={author} />

src/web/webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mdx?$/,
+        use: ['babel-loader', '@mdx-js/loader'],
+      },
+    ],
+  },
+};