Add support for PWA (#1005)

* Add logic for dynamically generating web manifest * Make PWA icon get autogenerated * Make service worker work * Tweak things for PWA * Handle apple icons and refactor * Update prod dockerfile * Remove jimp * Remove unnecessary option * Use different function syntax
2024-12-22 09:18:19 +00:00 · 2023-05-12 01:07:59 +00:00 · 2023-05-12 01:07:59 +00:00 · b19b51c78c
parent c5fd084577
commit b19b51c78c
15 changed files with 1074 additions and 226 deletions
--- a/8
+++ b/8
@ -4,9 +4,13 @@ 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 install --production --ignore-scripts --prefer-offline --pure-lockfile
+RUN yarn --production --prefer-offline --pure-lockfile

 # Build
 COPY generate_translations.js \
@ -22,7 +26,7 @@ COPY .git .git
 # Set UI version 
 RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"

-RUN yarn install --production --ignore-scripts --prefer-offline
+RUN yarn --production --prefer-offline
 RUN yarn build:prod

 # Prune the image
--- a/dev.dockerfile
+++ b/dev.dockerfile
@ -3,9 +3,13 @@ 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 install --ignore-scripts --prefer-offline --pure-lockfile
+RUN yarn --prefer-offline --pure-lockfile

 # Build
 COPY generate_translations.js \
@ -20,7 +24,7 @@ COPY src src
 # Set UI version 
 RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"

-RUN yarn install --ignore-scripts --prefer-offline
+RUN yarn --prefer-offline
 RUN yarn build:dev

 FROM node:alpine as runner
@ -29,4 +33,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
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 3bb45c26cb54325c3d8d605f4334447b9b78293a
+Subproject commit 007e53683768aeba63e9e4c179c1d240217bcee2
--- a/package.json
+++ b/package.json
@ -44,6 +44,7 @@
    "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",
@ -76,6 +77,7 @@
    "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",
@ -113,7 +115,8 @@
    "style-loader": "^3.3.2",
    "terser": "^5.17.3",
    "typescript": "^5.0.4",
-    "webpack-dev-server": "4.15.0"
+    "webpack-dev-server": "4.15.0",
+    "service-worker-webpack": "^1.0.0"
  },
  "engines": {
    "node": ">=8.9.0"
--- a/src/assets/manifest.webmanifest
+++ b/src/assets/manifest.webmanifest
@ -1,49 +0,0 @@
-{
-  "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"
-    }
-  ]
-}
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@ -1,23 +1,25 @@
 import express from "express";
-import fs from "fs";
+import { existsSync } from "fs";
+import { readdir, readFile } from "fs/promises";
 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 } from "lemmy-js-client";
+import { GetSite, GetSiteResponse, LemmyHttp, Site } 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 { httpBaseInternal } from "../shared/env";
+import { getHttpBase, getHttpBaseInternal } from "../shared/env";
 import {
  ILemmyConfig,
  InitialFetchRequest,
  IsoData,
 } from "../shared/interfaces";
 import { routes } from "../shared/routes";
-import { initializeSite } from "../shared/utils";
+import { favIconPngUrl, favIconUrl, initializeSite } from "../shared/utils";

 const server = express();
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
@ -54,6 +56,11 @@ 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);
@ -67,13 +74,13 @@ server.get("/css/themes/:name", async (req, res) => {
  }

  const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
-  if (fs.existsSync(customTheme)) {
+  if (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 (fs.existsSync(internalTheme)) {
+    if (existsSync(internalTheme)) {
      res.sendFile(internalTheme);
    } else {
      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
@ -81,11 +88,11 @@ server.get("/css/themes/:name", async (req, res) => {
  }
 });

-function buildThemeList(): string[] {
-  let themes = ["darkly", "darkly-red", "litely", "litely-red"];
-  if (fs.existsSync(extraThemesFolder)) {
-    let dirThemes = fs.readdirSync(extraThemesFolder);
-    let cssThemes = dirThemes
+async function buildThemeList(): Promise<string[]> {
+  const themes = ["darkly", "darkly-red", "litely", "litely-red"];
+  if (existsSync(extraThemesFolder)) {
+    const dirThemes = await readdir(extraThemesFolder);
+    const cssThemes = dirThemes
      .filter(d => d.endsWith(".css"))
      .map(d => d.replace(".css", ""));
    themes.push(...cssThemes);
@ -95,7 +102,7 @@ function buildThemeList(): string[] {

 server.get("/css/themelist", async (_req, res) => {
  res.type("json");
-  res.send(JSON.stringify(buildThemeList()));
+  res.send(JSON.stringify(await buildThemeList()));
 });

 // server.use(cookieParser());
@ -110,7 +117,7 @@ server.get("/*", async (req, res) => {
    const promises: Promise<any>[] = [];

    const headers = setForwardedHeaders(req.headers);
-    const client = new LemmyHttp(httpBaseInternal, headers);
+    const client = new LemmyHttp(getHttpBaseInternal(), headers);

    // Get site data first
    // This bypasses errors, so that the client can hit the error on its own,
@ -180,6 +187,23 @@ server.get("/*", async (req, res) => {

    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">
@ -200,9 +224,19 @@ 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="/static/assets/manifest.webmanifest">
+           <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} />

           <!-- Styles -->
           <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
@ -267,3 +301,63 @@ 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());
+}
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@ -1,28 +0,0 @@
-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);
-  },
-});
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@ -1,10 +1,9 @@
 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 { favIconPngUrl, favIconUrl, setIsoData } from "../../utils";
+import { setIsoData } from "../../utils";
 import { Footer } from "./footer";
 import { Navbar } from "./navbar";
 import { NoMatch } from "./no-match";
@ -19,24 +18,12 @@ 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>
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -22,7 +22,7 @@ import {
  SavePost,
  TransferCommunity,
 } from "lemmy-js-client";
-import { externalHost } from "../../env";
+import { getExternalHost } from "../../env";
 import { i18n } from "../../i18next";
 import { BanType, PostFormParams, PurgeType } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
@ -350,7 +350,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          )}
        </li>
        <li className="list-inline-item">•</li>
-        {url && !(hostname(url) == externalHost) && (
+        {url && !(hostname(url) === getExternalHost()) && (
          <>
            <li className="list-inline-item">
              <a
--- a/src/shared/env.ts
+++ b/src/shared/env.ts
@ -2,49 +2,69 @@ import { isBrowser } from "./utils";

 const testHost = "0.0.0.0:8536";

-let internalHost =
-  (!isBrowser() && process.env.LEMMY_UI_LEMMY_INTERNAL_HOST) || testHost; // used for local dev
-export let externalHost: string;
-let host: string;
-let wsHost: string;
-let secure: string;
-
-if (isBrowser()) {
-  // browser
-  const lemmyConfig =
-    typeof window.lemmyConfig !== "undefined" ? window.lemmyConfig : {};
-
-  externalHost = `${window.location.hostname}${
-    ["1234", "1235"].includes(window.location.port)
-      ? ":8536"
-      : window.location.port == ""
-      ? ""
-      : `:${window.location.port}`
-  }`;
-
-  host = externalHost;
-  wsHost = lemmyConfig.wsHost || host;
-  secure = window.location.protocol == "https:" ? "s" : "";
-} else {
-  // server-side
-  externalHost = process.env.LEMMY_UI_LEMMY_EXTERNAL_HOST || testHost;
-  host = internalHost;
-  wsHost = process.env.LEMMY_UI_LEMMY_WS_HOST || externalHost;
-  secure = process.env.LEMMY_UI_HTTPS == "true" ? "s" : "";
+function getInternalHost() {
+  return !isBrowser()
+    ? process.env.LEMMY_UI_LEMMY_INTERNAL_HOST ?? testHost
+    : testHost; // used for local dev
 }

-export const httpBaseInternal = `http://${host}`; // Don't use secure here
-export const httpBase = `http${secure}://${host}`;
-export const wsUriBase = `ws${secure}://${wsHost}`;
-export const wsUri = `${wsUriBase}/api/v3/ws`;
-export const isHttps = secure.endsWith("s");
+export function getExternalHost() {
+  return isBrowser()
+    ? `${window.location.hostname}${
+        ["1234", "1235"].includes(window.location.port)
+          ? ":8536"
+          : window.location.port == ""
+          ? ""
+          : `:${window.location.port}`
+      }`
+    : process.env.LEMMY_UI_LEMMY_EXTERNAL_HOST || testHost;
+}

-console.log(`httpbase: ${httpBase}`);
-console.log(`wsUri: ${wsUri}`);
-console.log(`isHttps: ${isHttps}`);
+function getSecure() {
+  return (
+    isBrowser()
+      ? window.location.protocol.includes("https")
+      : process.env.LEMMY_UI_HTTPS === "true"
+  )
+    ? "s"
+    : "";
+}
+
+function getHost() {
+  return isBrowser() ? getExternalHost() : getInternalHost();
+}
+
+function getWsHost() {
+  return isBrowser()
+    ? window.lemmyConfig?.wsHost ?? getHost()
+    : process.env.LEMMY_UI_LEMMY_WS_HOST ?? getExternalHost();
+}
+
+function getBaseLocal(s = "") {
+  return `http${s}://${getHost()}`;
+}
+
+export function getHttpBaseInternal() {
+  return getBaseLocal(); // Don't use secure here
+}
+export function getHttpBase() {
+  return getBaseLocal(getSecure());
+}
+export function getWsUri() {
+  return `ws${getSecure()}://${getWsHost()}/api/v3/ws`;
+}
+export function isHttps() {
+  return getSecure() === "s";
+}
+
+console.log(`httpbase: ${getHttpBase()}`);
+console.log(`wsUri: ${getWsUri()}`);
+console.log(`isHttps: ${isHttps()}`);

 // This is for html tags, don't include port
-const httpExternalUri = `http${secure}://${externalHost.split(":")[0]}`;
 export function httpExternalPath(path: string) {
-  return `${httpExternalUri}${path}`;
+  return `http${getSecure()}://${getExternalHost().replace(
+    /:\d+/g,
+    ""
+  )}${path}`;
 }
--- a/src/shared/services/UserService.ts
+++ b/src/shared/services/UserService.ts
@ -38,7 +38,7 @@ export class UserService {
    expires.setDate(expires.getDate() + 365);
    if (res.jwt) {
      toast(i18n.t("logged_in"));
-      IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps });
+      IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps() });
      this.setJwtInfo();
    }
  }
--- a/src/shared/services/WebSocketService.ts
+++ b/src/shared/services/WebSocketService.ts
@ -6,7 +6,7 @@ import {
  Websocket as WS,
  WebsocketBuilder,
 } from "websocket-ts";
-import { wsUri } from "../env";
+import { getWsUri } from "../env";
 import { isBrowser } from "../utils";

 export class WebSocketService {
@ -18,7 +18,7 @@ export class WebSocketService {
    let firstConnect = true;

    this.subject = new Observable((obs: any) => {
-      this.ws = new WebsocketBuilder(wsUri)
+      this.ws = new WebsocketBuilder(getWsUri())
        .onMessage((_i, e) => {
          try {
            obs.next(JSON.parse(e.data.toString()));
@ -27,7 +27,7 @@ export class WebSocketService {
          }
        })
        .onOpen(() => {
-          console.log(`Connected to ${wsUri}`);
+          console.log(`Connected to ${getWsUri()}`);

          if (!firstConnect) {
            let res = {
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@ -41,12 +41,12 @@ import { Subscription } from "rxjs";
 import { delay, retryWhen, take } from "rxjs/operators";
 import tippy from "tippy.js";
 import Toastify from "toastify-js";
-import { httpBase } from "./env";
+import { getHttpBase } from "./env";
 import { i18n, languages } from "./i18next";
 import { CommentNodeI, DataType, IsoData } from "./interfaces";
 import { UserService, WebSocketService } from "./services";

-var Tribute: any;
+let Tribute: any;
 if (isBrowser()) {
  Tribute = require("tributejs");
 }
@ -344,7 +344,7 @@ export function capitalizeFirstLetter(str: string): string {

 export async function getSiteMetadata(url: string) {
  let form: GetSiteMetadata = { url };
-  let client = new LemmyHttp(httpBase);
+  let client = new LemmyHttp(getHttpBase());
  return client.getSiteMetadata(form);
 }

@ -1362,7 +1362,7 @@ export async function fetchCommunities(q: string) {
    limit: fetchLimit,
    auth: myAuth(false),
  };
-  let client = new LemmyHttp(httpBase);
+  let client = new LemmyHttp(getHttpBase());
  return client.search(form);
 }

@ -1376,7 +1376,7 @@ export async function fetchUsers(q: string) {
    limit: fetchLimit,
    auth: myAuth(false),
  };
-  let client = new LemmyHttp(httpBase);
+  let client = new LemmyHttp(getHttpBase());
  return client.search(form);
 }

@ -1540,7 +1540,7 @@ export function selectableLanguages(
 }

 export function uploadImage(image: File): Promise<UploadImageResponse> {
-  const client = new LemmyHttp(httpBase);
+  const client = new LemmyHttp(getHttpBase());

  return client.uploadImage({ image });
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -3,8 +3,8 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const nodeExternals = require("webpack-node-externals");
 const CopyPlugin = require("copy-webpack-plugin");
 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
-const { merge } = require("lodash");
-
+const merge = require("lodash/merge");
+const { ServiceWorkerPlugin } = require("service-worker-webpack");
 const banner = `
  hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
  Source code: https://github.com/LemmyNet/lemmy-ui
@ -83,6 +83,7 @@ const createServerConfig = (_env, mode) => {

  return config;
 };
+
 const createClientConfig = (_env, mode) => {
  const config = merge({}, base, {
    mode,
@ -90,6 +91,58 @@ const createClientConfig = (_env, mode) => {
    output: {
      filename: "js/client.js",
    },
+    plugins: [
+      ...base.plugins,
+      new ServiceWorkerPlugin({
+        enableInDevelopment: true,
+        workbox: {
+          modifyURLPrefix: {
+            "/": "/static/",
+          },
+          cacheId: "lemmy",
+          include: [/(assets|styles)\/.+\..+|client\.js$/g],
+          inlineWorkboxRuntime: true,
+          runtimeCaching: [
+            {
+              urlPattern: ({
+                sameOrigin,
+                url: { pathname, host },
+                request: { method },
+              }) =>
+                (sameOrigin || host.includes("localhost")) &&
+                (!(
+                  pathname.includes("pictrs") || pathname.includes("static")
+                ) ||
+                  method === "POST"),
+              handler: "NetworkFirst",
+              options: {
+                cacheName: "instance-cache",
+              },
+            },
+            {
+              urlPattern: ({ url: { pathname, host }, sameOrigin }) =>
+                (sameOrigin || host.includes("localhost")) &&
+                pathname.includes("static"),
+              handler: "CacheFirst",
+              options: {
+                cacheName: "static-cache",
+              },
+            },
+            {
+              urlPattern: ({ url: { pathname }, request: { method } }) =>
+                pathname.includes("pictrs") && method === "GET",
+              handler: "StaleWhileRevalidate",
+              options: {
+                cacheName: "image-cache",
+                expiration: {
+                  maxAgeSeconds: 60 * 60 * 24,
+                },
+              },
+            },
+          ],
+        },
+      }),
+    ],
  });

  if (mode === "development") {
--- a/yarn.lock
+++ b/yarn.lock