feat(plus/offline): add offline mode using yari client

.github/workflows/_deploy.yml

@@ -136,6 +136,7 @@ jobs:
           REACT_APP_MDN_PLUS_10Y_SP3_ID: mdnsupporter10ystage
           REACT_APP_GLEAN_CHANNEL: review
           REACT_APP_GLEAN_ENABLED: true
+          REACT_APP_UPDATES_BASE_URL: https://updates.developer.allizom.org
         run: npm run build
 
       - name: Build (rari)
@@ -236,6 +237,7 @@ jobs:
         run: |
           npm run ssr
           cp -r dist $BUILD_OUT_ROOT/static
+          cp dist/service-worker/service-worker.js* $BUILD_OUT_ROOT/
 
       - name: Authenticate with GCP
         uses: google-github-actions/auth@v2

package.json

@@ -85,8 +85,11 @@
     "@types/prismjs": "^1.26.5",
     "@types/webpack-hot-middleware": "^2.25.10",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@zip.js/zip.js": "^2.7.72",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
+    "dexie": "^4.0.11",
+    "downshift": "^9.0.10",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.31.0",
@@ -103,6 +106,7 @@
     "postcss-preset-env": "^10.1.5",
     "prettier": "^3.5.3",
     "resolve-url-loader": "^5.0.0",
+    "rspack-manifest-plugin": "^5.0.3",
     "sass-embedded": "^1.90.0",
     "sass-loader": "^16.0.5",
     "source-map-support": "^0.5.21",

rspack.config.js

@@ -1,3 +1,4 @@
+import { execSync } from "node:child_process";
 import path from "node:path";
 
 import { fileURLToPath } from "node:url";
@@ -6,6 +7,7 @@ import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
 import { rspack } from "@rspack/core";
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import { fdir } from "fdir";
+import { RspackManifestPlugin } from "rspack-manifest-plugin";
 import { merge } from "webpack-merge";
 // @ts-expect-error
 import { StatsWriterPlugin } from "webpack-stats-plugin";
@@ -15,6 +17,7 @@ import { GenerateElementMapPlugin } from "./build/plugins/generate-element-map.j
 import { override as svgoOverride } from "./svgo.config.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const commitHash = execSync("git rev-parse --short HEAD").toString().trim();
 
 const isProd = process.env.NODE_ENV === "production";
 const buildLegacy = Boolean(
@@ -360,13 +363,21 @@ const legacyConfig = merge(common, clientAndLegacyCommon, {
   name: "legacy",
   entry: {
     index: "./legacy/index.tsx",
+    yari: "./node_modules/@mdn/yari/client/src/index.tsx",
   },
   output: {
+    filename: "[name].[contenthash].js",
     path: path.resolve(__dirname, "dist/legacy"),
     publicPath: "/static/legacy/",
   },
   resolve: {
     extensions: ["...", ".tsx", ".ts", ".jsx"],
+    alias: {
+      [path.resolve(
+        __dirname,
+        "node_modules/@mdn/yari/client/src/document/toolbar/index.tsx",
+      )]: false,
+    },
   },
   plugins: [
     new rspack.DefinePlugin({
@@ -377,16 +388,29 @@ const legacyConfig = merge(common, clientAndLegacyCommon, {
           ),
         ),
         REACT_APP_FRED: "true",
+        REACT_APP_WRITER_MODE: "false",
+        REACT_APP_DEV_MODE: "false",
+        REACT_APP_ENABLE_PLUS: "true",
       }),
     }),
     new rspack.ProvidePlugin({
       React: "react",
     }),
     new rspack.CssExtractRspackPlugin({
-      filename: isProd ? "[name].[contenthash].css" : "[name].css",
-      // chunkFilename: "[name].[contenthash].css",
+      filename: "[name].[contenthash].css",
       runtime: true,
     }),
+    new rspack.HtmlRspackPlugin({
+      inject: true,
+      chunks: ["yari"],
+      filename: "index.[contenthash].html",
+      template: "node_modules/@mdn/yari/client/public/index.html",
+    }),
+    new RspackManifestPlugin({
+      fileName: "asset-manifest.json",
+      generate: (_seed, files) =>
+        files.map((file) => file.path).filter((path) => !path.endsWith(".map")),
+    }),
   ],
   module: {
     rules: [
@@ -508,9 +532,55 @@ const legacyConfig = merge(common, clientAndLegacyCommon, {
   },
 });
 
+const serviceWorkerConfig = merge(common, {
+  name: "service-worker",
+  entry: {
+    "service-worker": "./vendor/yari/client/pwa/src/service-worker.ts",
+  },
+  output: {
+    filename: "[name].js",
+    path: path.resolve(__dirname, "dist/service-worker"),
+    publicPath: "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".json"],
+    extensionAlias: {
+      ".js": [".ts", ".js"],
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]s$/,
+        use: {
+          loader: "builtin:swc-loader",
+          options: {
+            jsc: {
+              parser: {
+                syntax: "typescript",
+                tsx: false,
+              },
+            },
+          },
+        },
+        type: "javascript/auto",
+      },
+    ],
+  },
+  plugins: [
+    new rspack.DefinePlugin({
+      __COMMIT_HASH__: JSON.stringify(commitHash),
+      __UPDATES_BASE_URL__: JSON.stringify(
+        process.env.REACT_APP_UPDATES_BASE_URL,
+      ),
+    }),
+  ],
+});
+
 /** @type {import("@rspack/core").MultiRspackOptions} */
 export default [
   ssrConfig,
   clientConfig,
-  ...(buildLegacy ? [legacyConfig] : []),
+  ...(buildLegacy ? [legacyConfig, serviceWorkerConfig] : []),
 ];

server.js

@@ -109,6 +109,11 @@ const streamToBuffer = (stream) =>
 export async function startServer() {
   let app = express();
 
+  const sw = fileURLToPath(
+    import.meta.resolve("./dist/service-worker/index.js"),
+  );
+  app.use("/service-worker.js", express.static(sw));
+
   if (devMode) {
     const { rspack } = await import("@rspack/core");
     const { default: rspackConfig } = await import("./rspack.config.js");

vendor/yari/client/pwa/README.md

@@ -0,0 +1,6 @@
+# MDN Offline
+
+This is MDN's ServiceWorker that powers MDN Offline. It's not being build by
+default for local development. And for now it requires a running instance of
+[kuma](https://github.com/mdn/kuma) to work. We might add support for local
+development and update this README.

vendor/yari/client/pwa/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "mdn-worker",
+  "version": "1.0.0",
+  "description": "MDN Offline service worker",
+  "license": "MPL-2.0",
+  "author": "MDN Web Docs",
+  "type": "module",
+  "main": "service-worker.ts",
+  "scripts": {
+    "build": "webpack",
+    "build:prod": "NODE_ENV=production webpack --config ./webpack.production.config.js",
+    "dev": "webpack-cli --watch"
+  },
+  "dependencies": {
+    "@zip.js/zip.js": "2.7.71",
+    "dexie": "4.0.11"
+  },
+  "devDependencies": {
+    "@types/dexie": "1.3.35",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.0",
+    "webpack-cli": "^6.0.1",
+    "workers-preview": "^1.0.6"
+  }
+}

vendor/yari/client/pwa/src/caches.ts

@@ -0,0 +1,12 @@
+declare var __COMMIT_HASH__: string;
+
+export const cacheName = `mdn-app-${__COMMIT_HASH__}`;
+export const contentCache = "mdn-content-v1";
+
+export function openCache(): Promise<Cache> {
+  return caches.open(cacheName);
+}
+
+export function openContentCache(): Promise<Cache> {
+  return caches.open(contentCache);
+}