chore: Prefetch consolidated api using service worker

app/client/craco.dev.config.js

@@ -1,5 +1,5 @@
 const { merge } = require("webpack-merge");
-
+const WorkboxPlugin = require("workbox-webpack-plugin");
 const common = require("./craco.common.config.js");
 
 module.exports = merge(common, {
@@ -21,4 +21,30 @@ module.exports = merge(common, {
   experiments: {
     cacheUnaffected: true,
   },
+  webpack: {
+    plugins: [
+      new WorkboxPlugin.InjectManifest({
+        swSrc: "./src/serviceWorker.js",
+        mode: "development",
+        swDest: "./pageService.js",
+        exclude: [
+          // Don’t cache source maps and PWA manifests.
+          // (These are the default values of the `exclude` option: https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-WebpackPartial,
+          // so we need to specify them explicitly if we’re extending this array.)
+          /\.map$/,
+          /^manifest.*\.js$/,
+          // Don’t cache the root html file
+          /index\.html/,
+          // Don’t cache LICENSE.txt files emitted by CRA
+          // when a chunk includes some license comments
+          /LICENSE\.txt/,
+          // Don’t cache static icons as there are hundreds of them, and caching them all
+          // one by one (as the service worker does it) keeps the network busy for a long time
+          // and delays the service worker installation
+          /\/*\.svg$/,
+          /\.(js|css|html|png|jpg|jpeg|gif)$/, // Exclude JS, CSS, HTML, and image files
+        ],
+      }),
+    ],
+  },
 });

app/client/package.json

@@ -99,6 +99,7 @@
     "appsmith-icons": "workspace:^",
     "assert-never": "^1.2.1",
     "astring": "^1.7.5",
+    "async-mutex": "^0.5.0",
     "axios": "^1.6.0",
     "classnames": "^2.3.1",
     "clsx": "^1.2.1",

app/client/src/serviceWorker.js

@@ -6,10 +6,14 @@ import {
   NetworkOnly,
   StaleWhileRevalidate,
 } from "workbox-strategies";
+import {
+  getPrefetchConsolidatedApiRequest,
+  ConsolidatedApiCacheStrategy,
+} from "utils/serviceWorkerUtils";
 
 setCacheNameDetails({
   prefix: "appsmith",
-  suffix: undefined,
+  suffix: "",
   precache: "precache-v1",
   runtime: "runtime",
   googleAnalytics: "appsmith-ga",
@@ -34,6 +38,31 @@ self.__WB_DISABLE_DEV_DEBUG_LOGS = false;
 skipWaiting();
 clientsClaim();
 
+const consolidatedApiCacheStrategy = new ConsolidatedApiCacheStrategy();
+
+/**
+ *
+ * @param {ExtendableEvent} event
+ * @param {Request} request
+ * @param {URL} url
+ * @returns
+ */
+const handleFetchHtml = async (event, request, url) => {
+  // Get the prefetch consolidated api request if the url matches the builder or viewer path
+  const prefetchConsolidatedApiRequest = getPrefetchConsolidatedApiRequest(url);
+
+  if (prefetchConsolidatedApiRequest) {
+    consolidatedApiCacheStrategy
+      .cacheConsolidatedApi(prefetchConsolidatedApiRequest)
+      .catch(() => {
+        // Silently fail
+      });
+  }
+
+  const networkHandler = new NetworkOnly();
+  return networkHandler.handle({ event, request });
+};
+
 // This route's caching seems too aggressive.
 // TODO(abhinav): Figure out if this is really necessary.
 // Maybe add the assets locally?
@@ -52,7 +81,30 @@ registerRoute(({ url }) => {
 }, new StaleWhileRevalidate());
 
 registerRoute(
-  new Route(({ request, sameOrigin }) => {
-    return sameOrigin && request.destination === "document";
-  }, new NetworkOnly()),
+  new Route(
+    ({ request, sameOrigin }) => {
+      return sameOrigin && request.destination === "document";
+    },
+    async ({ event, request, url }) => handleFetchHtml(event, request, url),
+  ),
+);
+
+// Route for fetching the API directly
+registerRoute(
+  new RegExp("/api/v1/consolidated-api/"),
+  async ({ event, request }) => {
+    // Check for cached response
+    const cachedResponse =
+      await consolidatedApiCacheStrategy.getCachedResponse(request);
+
+    // If the response is cached, return the response
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+
+    // If the response is not cached, fetch the response
+    const networkHandler = new NetworkOnly();
+    return networkHandler.handle({ event, request });
+  },
+  "GET",
 );

app/client/src/utils/serviceWorkerUtils.js

@@ -0,0 +1,177 @@
+/* eslint-disable no-console */
+import { match } from "path-to-regexp";
+import { Mutex } from "async-mutex";
+
+export const BUILDER_PATH = `/app/:applicationSlug/:pageSlug(.*\-):pageId/edit`;
+export const BUILDER_CUSTOM_PATH = `/app/:customSlug(.*\-):pageId/edit`;
+export const VIEWER_PATH = `/app/:applicationSlug/:pageSlug(.*\-):pageId`;
+export const VIEWER_CUSTOM_PATH = `/app/:customSlug(.*\-):pageId`;
+export const BUILDER_PATH_DEPRECATED = `/applications/:applicationId/pages/:pageId/edit`;
+export const VIEWER_PATH_DEPRECATED = `/applications/:applicationId/pages/:pageId`;
+
+/**
+ * Function to get the search query from the URL
+ * @param {string} search
+ * @param {string} key
+ * @returns {string | null}
+ */
+export const getSearchQuery = (search = "", key) => {
+  const params = new URLSearchParams(search);
+  return decodeURIComponent(params.get(key) || "");
+};
+
+/**
+ * Function to match the path with the builder path
+ * @param {string} pathName
+ * @param {Object} options
+ * @param {boolean} options.end
+ * @returns {Match<object> | boolean}
+ */
+export const matchBuilderPath = (pathName, options) =>
+  match(BUILDER_PATH, options)(pathName) ||
+  match(BUILDER_PATH_DEPRECATED, options)(pathName) ||
+  match(BUILDER_CUSTOM_PATH, options)(pathName);
+
+/**
+ * Function to match the path with the viewer path
+ * @param {string} pathName
+ * @returns {Match<object> | boolean}
+ */
+export const matchViewerPath = (pathName) =>
+  match(VIEWER_PATH)(pathName) ||
+  match(VIEWER_PATH_DEPRECATED)(pathName) ||
+  match(VIEWER_CUSTOM_PATH)(pathName);
+
+/**
+ * Function to get the consolidated API search params
+ * @param {Match<object>} params
+ * @returns
+ */
+export const getConsolidatedAPISearchParams = (params = {}) => {
+  if (!params || !params?.pageId) {
+    return "";
+  }
+
+  const { applicationId, pageId } = params;
+  const searchParams = new URLSearchParams();
+
+  searchParams.append("defaultPageId", pageId);
+
+  if (applicationId) {
+    searchParams.append("applicationId", applicationId);
+  }
+
+  return searchParams.toString();
+};
+
+/**
+ * Function to get the prefetch request for consolidated api
+ * @param {URL} url
+ * @returns {Request | null}
+ */
+export const getPrefetchConsolidatedApiRequest = (url) => {
+  if (!url) {
+    return null;
+  }
+
+  // Match the URL with the builder and viewer paths
+  const matchedBuilder = matchBuilderPath(url.pathname, { end: false });
+  const matchedViewer = matchViewerPath(url.pathname, { end: false });
+
+  // Get the branch name from the search query
+  const branchName = getSearchQuery(url.search, "branch");
+
+  let headers = new Headers();
+
+  // Add the branch name to the headers
+  if (branchName) {
+    headers.append("Branchname", branchName);
+  }
+
+  // If the URL matches the builder path
+  if (matchedBuilder && matchedBuilder.params?.pageId) {
+    const searchParams = getConsolidatedAPISearchParams(matchedBuilder.params);
+    const requestUrl = `${url.origin}/api/v1/consolidated-api/edit?${searchParams}`;
+    const request = new Request(requestUrl, { method: "GET", headers });
+    return request;
+  }
+
+  // If the URL matches the viewer path
+  if (matchedViewer && matchedViewer.params?.pageId) {
+    const searchParams = getConsolidatedAPISearchParams(matchedViewer.params);
+    const requestUrl = `${url.origin}/api/v1/consolidated-api/view?${searchParams}`;
+    const request = new Request(requestUrl, { method: "GET", headers });
+    return request;
+  }
+
+  // Return null if the URL does not match the builder or viewer path
+  return null;
+};
+
+/**
+ * Cache strategy for Appsmith API
+ */
+export class ConsolidatedApiCacheStrategy {
+  cacheName = "prefetch-cache-v1";
+  cacheMaxAge = 2 * 60 * 1000; // 2 minutes in milliseconds
+
+  constructor() {
+    // Mutex to lock the fetch and cache operation
+    this.consolidatedApiFetchmutex = new Mutex();
+  }
+
+  /**
+   * Function to fetch and cache the consolidated API
+   * @param {Request} request
+   * @returns
+   */
+  async cacheConsolidatedApi(request) {
+    // Acquire the lock
+    await this.consolidatedApiFetchmutex.acquire();
+    const prefetchApiCache = await caches.open(this.cacheName);
+    try {
+      const response = await fetch(request);
+
+      if (response.ok) {
+        // Clone the response as the response can be consumed only once
+        const clonedResponse = response.clone();
+        // Put the response in the cache
+        await prefetchApiCache.put(request, clonedResponse);
+      }
+    } catch (error) {
+      // Delete the existing cache if the fetch fails
+      await prefetchApiCache.delete(request);
+    } finally {
+      // Release the lock
+      this.consolidatedApiFetchmutex.release();
+    }
+  }
+
+  async getCachedResponse(request) {
+    // Wait for the lock to be released
+    await this.consolidatedApiFetchmutex.waitForUnlock();
+    const prefetchApiCache = await caches.open(this.cacheName);
+    // Check if the response is already in cache
+    const cachedResponse = await prefetchApiCache.match(request);
+
+    if (cachedResponse) {
+      const dateHeader = cachedResponse.headers.get("date");
+      const cachedTime = new Date(dateHeader).getTime();
+      const currentTime = Date.now();
+
+      const isCacheValid = currentTime - cachedTime < this.cacheMaxAge;
+
+      if (isCacheValid) {
+        // Delete the cache as this is a one-time cache
+        await prefetchApiCache.delete(request);
+        // Return the cached response
+        return cachedResponse;
+      }
+
+      // If the cache is not valid, delete the cache
+      await prefetchApiCache.delete(request);
+    }
+
+    return null;
+  }
+}