fix: pwa issues

components/core/WebsitePrototypeWrapper.js

@@ -33,6 +33,9 @@ export default class WebsitePrototypeWrapper extends React.Component {
           <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
 
           <link rel="shortcut icon" href="/static/favicon.ico" />
+
+          <link rel="manifest" href="/manifest.json" />
+          <link rel="apple-touch-icon" href="/static/icon-96x96.png" />
         </Head>
         {this.props.children}
       </React.Fragment>

next.config.js

@@ -0,0 +1,5 @@
+const withOffline = require("next-offline");
+
+const nextConfig = {};
+
+module.exports = withOffline(nextConfig);

package.json

@@ -58,6 +58,7 @@
     "moment": "^2.29.1",
     "morgan": "^1.10.0",
     "next": "^10.0.7",
+    "next-offline": "^5.0.5",
     "pg": "^8.5.1",
     "prism-react-renderer": "^1.2.0",
     "prismjs": "^1.23.0",

public/manifest.json

@@ -0,0 +1,51 @@
+{  "name": "Slate",  
+    "short_name": "Slate",  
+    "theme_color": "#ffffff",  
+    "background_color": "#ffffff",  
+    "display": "standalone",  
+    "orientation": "portrait",  
+    "scope": "/_",  
+    "start_url": "/_", 
+    "icons": [
+        {
+        "src": "/static/icon-72x72.png",
+        "type": "image/png",
+        "sizes": "72x72"
+        },
+        {
+        "src": "/static/icon-96x96.png",
+        "type": "image/png",
+        "sizes": "96x96"
+        },
+        {
+        "src": "/static/icon-128x128.png",
+        "type": "image/png",
+        "sizes": "128x128"
+        },
+        {
+        "src": "/static/icon-144x144.png",
+        "type": "image/png",
+        "sizes": "144x144"
+        },
+        {
+        "src": "/static/icon-152x152.png",
+        "type": "image/png",
+        "sizes": "152x152"
+        },
+        {
+        "src": "/static/icon-192x192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+        },
+        {
+        "src": "/static/icon-384x384.png",
+        "type": "image/png",
+        "sizes": "384x384"
+        },
+        {
+        "src": "/static/icon-512x512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+        }
+    ]
+}

server.js

@@ -15,6 +15,7 @@ import next from "next";
 import compression from "compression";
 import cors from "cors";
 import morgan from "morgan";
+import path from "path";
 
 import { FilecoinNumber, Converter } from "@glif/filecoin-number";
 
@@ -124,6 +125,7 @@ app.prepare().then(async () => {
   }
 
   server.use("/public", express.static("public"));
+  server.get("/service-worker.js", express.static(path.join(__dirname, ".next")));
   server.get("/system", async (r, s) => s.redirect("/_/system"));
   server.get("/experiences", async (r, s) => s.redirect("/_/system"));
   server.get("/_/experiences", async (r, s) => s.redirect("/_/system"));