Revert "Add support for PWA (LemmyNet#1005)"

hexbear-collective · May 22, 2023 · 8a92140 · 8a92140
1 parent 3778b11
commit 8a92140
Show file tree

Hide file tree

Showing 15 changed files with 179 additions and 444 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -4,13 +4,9 @@ RUN curl -sf https://gobinaries.com/tj/node-prune | sh
 
 WORKDIR /usr/src/app
 
-ENV npm_config_target_arch=x64
-ENV npm_config_target_platform=linux
-ENV npm_config_target_libc=musl
-
 # Cache deps
 COPY package.json yarn.lock ./
-RUN yarn --production --prefer-offline --pure-lockfile
+RUN yarn install --production --ignore-scripts --prefer-offline --pure-lockfile
 
 # Build
 COPY generate_translations.js \
@@ -26,7 +22,7 @@ COPY .git .git
 # Set UI version 
 RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"
 
-RUN yarn --production --prefer-offline
+RUN yarn install --production --ignore-scripts --prefer-offline
 RUN yarn build:prod
 
 # Prune the image

diff --git a/dev.dockerfile b/dev.dockerfile
@@ -3,13 +3,9 @@ RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
 
 WORKDIR /usr/src/app
 
-ENV npm_config_target_arch=x64
-ENV npm_config_target_platform=linux
-ENV npm_config_target_libc=musl
-
 # Cache deps
 COPY package.json yarn.lock ./
-RUN yarn --prefer-offline --pure-lockfile
+RUN yarn install --ignore-scripts --prefer-offline --pure-lockfile
 
 # Build
 COPY generate_translations.js \
@@ -24,7 +20,7 @@ COPY src src
 # Set UI version 
 RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"
 
-RUN yarn --prefer-offline
+RUN yarn install --ignore-scripts --prefer-offline
 RUN yarn build:dev
 
 FROM node:alpine as runner
@@ -33,4 +29,4 @@ COPY --from=builder /usr/src/app/node_modules /app/node_modules
 
 EXPOSE 1234
 WORKDIR /app
-CMD node dist/js/server.js
+CMD node dist/js/server.js
diff --git a/package.json b/package.json
@@ -44,7 +44,6 @@
     "classnames": "^2.3.1",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "cross-fetch": "^3.1.5",
     "css-loader": "^6.7.3",
     "emoji-mart": "^5.4.0",
     "emoji-short-name": "^2.0.0",
@@ -77,7 +76,6 @@
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "serialize-javascript": "^6.0.1",
-    "sharp": "^0.32.1",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
     "tributejs": "^5.1.3",

diff --git a/src/assets/manifest.webmanifest b/src/assets/manifest.webmanifest
@@ -0,0 +1,49 @@
+{
+  "name": "Lemmy",
+  "description": "A link aggregator for the fediverse",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#222222",
+  "icons": [
+    {
+      "src": "/static/assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/server/index.tsx b/src/server/index.tsx
@@ -1,25 +1,23 @@
 import express from "express";
-import { existsSync } from "fs";
-import { readdir, readFile } from "fs/promises";
+import fs from "fs";
 import { IncomingHttpHeaders } from "http";
 import { Helmet } from "inferno-helmet";
 import { matchPath, StaticRouter } from "inferno-router";
 import { renderToString } from "inferno-server";
 import IsomorphicCookie from "isomorphic-cookie";
-import { GetSite, GetSiteResponse, LemmyHttp, Site } from "lemmy-js-client";
+import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import path from "path";
 import process from "process";
 import serialize from "serialize-javascript";
-import sharp from "sharp";
 import { App } from "../shared/components/app/app";
-import { getHttpBase, getHttpBaseInternal } from "../shared/env";
+import { httpBaseInternal } from "../shared/env";
 import {
   ILemmyConfig,
   InitialFetchRequest,
   IsoData,
 } from "../shared/interfaces";
 import { routes } from "../shared/routes";
-import { favIconPngUrl, favIconUrl, initializeSite } from "../shared/utils";
+import { initializeSite } from "../shared/utils";
 
 const server = express();
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
@@ -56,11 +54,6 @@ Disallow: /password_change
 Disallow: /search/
 `;
 
-server.get("/service-worker.js", async (_req, res) => {
-  res.setHeader("Content-Type", "application/javascript");
-  res.sendFile(path.resolve("./dist/service-worker.js"));
-});
-
 server.get("/robots.txt", async (_req, res) => {
   res.setHeader("content-type", "text/plain; charset=utf-8");
   res.send(robotstxt);
@@ -74,25 +67,25 @@ server.get("/css/themes/:name", async (req, res) => {
   }
 
   const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
-  if (existsSync(customTheme)) {
+  if (fs.existsSync(customTheme)) {
     res.sendFile(customTheme);
   } else {
     const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
 
     // If the theme doesn't exist, just send litely
-    if (existsSync(internalTheme)) {
+    if (fs.existsSync(internalTheme)) {
       res.sendFile(internalTheme);
     } else {
       res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
     }
   }
 });
 
-async function buildThemeList(): Promise<string[]> {
-  const themes = ["darkly", "darkly-red", "litely", "litely-red"];
-  if (existsSync(extraThemesFolder)) {
-    const dirThemes = await readdir(extraThemesFolder);
-    const cssThemes = dirThemes
+function buildThemeList(): string[] {
+  let themes = ["darkly", "darkly-red", "litely", "litely-red"];
+  if (fs.existsSync(extraThemesFolder)) {
+    let dirThemes = fs.readdirSync(extraThemesFolder);
+    let cssThemes = dirThemes
       .filter(d => d.endsWith(".css"))
       .map(d => d.replace(".css", ""));
     themes.push(...cssThemes);
@@ -102,7 +95,7 @@ async function buildThemeList(): Promise<string[]> {
 
 server.get("/css/themelist", async (_req, res) => {
   res.type("json");
-  res.send(JSON.stringify(await buildThemeList()));
+  res.send(JSON.stringify(buildThemeList()));
 });
 
 // server.use(cookieParser());
@@ -117,7 +110,7 @@ server.get("/*", async (req, res) => {
     const promises: Promise<any>[] = [];
 
     const headers = setForwardedHeaders(req.headers);
-    const client = new LemmyHttp(getHttpBaseInternal(), headers);
+    const client = new LemmyHttp(httpBaseInternal, headers);
 
     // Get site data first
     // This bypasses errors, so that the client can hit the error on its own,
@@ -180,29 +173,13 @@ server.get("/*", async (req, res) => {
         <script>eruda.init();</script>
       </>
     );
-    const erudaStr = process.env.LEMMY_UI_DEBUG == "true" ? renderToString(eruda) : "";
+    const erudaStr =
+      process.env.LEMMY_UI_DEBUG == "true" ? renderToString(eruda) : "";
     const root = renderToString(wrapper);
     const helmet = Helmet.renderStatic();
 
     const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
 
-    const appleTouchIcon = site.site_view.site.icon
-      ? `data:image/png;base64,${sharp(
-          await fetchIconPng(site.site_view.site.icon)
-        )
-          .resize(180, 180)
-          .extend({
-            bottom: 20,
-            top: 20,
-            left: 20,
-            right: 20,
-            background: "#222222",
-          })
-          .png()
-          .toBuffer()
-          .then(buf => buf.toString("base64"))}`
-      : favIconPngUrl;
-
     res.send(`
            <!DOCTYPE html>
            <html ${helmet.htmlAttributes.toString()} lang="en">
@@ -223,19 +200,9 @@ server.get("/*", async (req, res) => {
            <meta name="Description" content="Lemmy">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-           <link
-              id="favicon"
-              rel="shortcut icon"
-              type="image/x-icon"
-              href=${site.site_view.site.icon ?? favIconUrl}
-            />
 
            <!-- Web app manifest -->
-           <link rel="manifest" href="data:application/manifest+json;base64,${await generateManifestBase64(
-             site.site_view.site
-           )}">
-           <link rel="apple-touch-icon" href=${appleTouchIcon} />
-           <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
+           <link rel="manifest" href="/static/assets/manifest.webmanifest">
 
            <!-- Styles -->
            <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
@@ -300,63 +267,3 @@ function removeParam(url: string, parameter: string): string {
     .replace(new RegExp("[?&]" + parameter + "=[^&#]*(#.*)?$"), "$1")
     .replace(new RegExp("([?&])" + parameter + "=[^&]*&"), "$1");
 }
-
-const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
-const defaultLogoPathDirectory = path.join(
-  process.cwd(),
-  "dist",
-  "assets",
-  "icons"
-);
-
-export async function generateManifestBase64(site: Site) {
-  const url = (
-    process.env.NODE_ENV === "development"
-      ? "http://localhost:1236/"
-      : getHttpBase()
-  ).replace(/\/$/g, "");
-  const icon = site.icon ? await fetchIconPng(site.icon) : null;
-
-  const manifest = {
-    name: site.name,
-    description: site.description ?? "A link aggregator for the fediverse",
-    start_url: url,
-    scope: url,
-    display: "standalone",
-    id: "/",
-    background_color: "#222222",
-    theme_color: "#222222",
-    icons: await Promise.all(
-      iconSizes.map(async size => {
-        let src = await readFile(
-          path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
-        ).then(buf => buf.toString("base64"));
-
-        if (icon) {
-          src = await sharp(icon)
-            .resize(size, size)
-            .png()
-            .toBuffer()
-            .then(buf => buf.toString("base64"));
-        }
-
-        return {
-          sizes: `${size}x${size}`,
-          type: "image/png",
-          src: `data:image/png;base64,${src}`,
-          purpose: "any maskable",
-        };
-      })
-    ),
-  };
-
-  return Buffer.from(JSON.stringify(manifest)).toString("base64");
-}
-
-async function fetchIconPng(iconUrl: string) {
-  return await fetch(
-    iconUrl.replace(/https?:\/\/localhost:\d+/g, getHttpBaseInternal())
-  )
-    .then(res => res.blob())
-    .then(blob => blob.arrayBuffer());
-}
diff --git a/src/service-worker.ts b/src/service-worker.ts
@@ -0,0 +1,28 @@
+import { register } from "register-service-worker";
+
+register("/service-worker.js", {
+  registrationOptions: { scope: "./" },
+  ready() {
+    console.log("Service worker is active.");
+  },
+  registered() {
+    console.log("Service worker has been registered.");
+  },
+  cached() {
+    console.log("Content has been cached for offline use.");
+  },
+  updatefound() {
+    console.log("New content is downloading.");
+  },
+  updated() {
+    console.log("New content is available; please refresh.");
+  },
+  offline() {
+    console.log(
+      "No internet connection found. App is running in offline mode."
+    );
+  },
+  error(error) {
+    console.error("Error during service worker registration:", error);
+  },
+});
diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
@@ -1,9 +1,10 @@
 import { Component } from "inferno";
+import { Helmet } from "inferno-helmet";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { i18n } from "../../i18next";
 import { routes } from "../../routes";
-import { setIsoData } from "../../utils";
+import { favIconPngUrl, favIconUrl, setIsoData } from "../../utils";
 import { Footer } from "./footer";
 import { Navbar } from "./navbar";
 import { NoMatch } from "./no-match";
@@ -18,12 +19,24 @@ export class App extends Component<any, any> {
   render() {
     let siteRes = this.isoData.site_res;
     let siteView = siteRes.site_view;
+    let icon = siteView.site.icon;
 
     return (
       <>
         <Provider i18next={i18n}>
           <div id="app">
             <Theme defaultTheme={siteView.local_site.default_theme} />
+            {icon && (
+              <Helmet>
+                <link
+                  id="favicon"
+                  rel="shortcut icon"
+                  type="image/x-icon"
+                  href={icon || favIconUrl}
+                />
+                <link rel="apple-touch-icon" href={icon || favIconPngUrl} />
+              </Helmet>
+            )}
             <Navbar siteRes={siteRes} />
             <div className="mt-4 p-0 fl-1">
               <Switch>