chore: Prefetch consolidated api using service worker

app/client/craco.common.config.js

@@ -171,6 +171,7 @@ module.exports = {
         css: false,
       },
     },
+
     {
       // Prioritize the local src directory over node_modules.
       // This matters for cases where `src/<dirname>` and `node_modules/<dirname>` both exist –

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,32 @@ module.exports = merge(common, {
   experiments: {
     cacheUnaffected: true,
   },
+  webpack: {
+    plugins: [
+      new WorkboxPlugin.InjectManifest({
+        swSrc: "./src/serviceWorker.js",
+        mode: "development",
+        swDest: "./pageService.js",
+        maximumFileSizeToCacheInBytes: 11 * 1024 * 1024,
+        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$/,
+        ],
+        // Don’t cache-bust JS and CSS chunks
+        dontCacheBustURLsMatching: /\.[0-9a-zA-Z]{8}\.chunk\.(js|css)$/,
+      }),
+    ],
+  },
 });

app/client/src/serviceWorker.js

@@ -9,7 +9,7 @@ import {
 
 setCacheNameDetails({
   prefix: "appsmith",
-  suffix: undefined,
+  // suffix: "",
   precache: "precache-v1",
   runtime: "runtime",
   googleAnalytics: "appsmith-ga",
@@ -22,6 +22,8 @@ const regexMap = {
   ),
   shims: new RegExp(/shims\/.*.js/),
   profile: new RegExp(/v1\/(users\/profile|workspaces)/),
+  appEditUrl: new RegExp(/\/app\/[\w\d-]+\/[\w\d]+-[a-f0-9]+\/edit/),
+  appViewUrl: new RegExp(/\/app\/[\w\d-]+\/[\w\d]+-[a-f0-9]+(\/)?/),
 };
 
 /* eslint-disable no-restricted-globals */
@@ -34,6 +36,58 @@ self.__WB_DISABLE_DEV_DEBUG_LOGS = false;
 skipWaiting();
 clientsClaim();
 
+const CACHE_NAME = "api-cache";
+const API_CACHE_DURATION = 10000; // Cache duration in milliseconds (10 seconds)
+const pendingApiRequests = new Map();
+
+// Function to handle API requests with caching, deduplication, and expiration
+const handleApiRequest = async (apiUrl) => {
+  const cache = await caches.open(CACHE_NAME);
+  let cachedResponse = await cache.match(apiUrl);
+  let now = Date.now();
+
+  // Check if there is a valid cached response
+  if (
+    cachedResponse &&
+    new Date(cachedResponse.headers.get("sw-cache-expires")) > now
+  ) {
+    return cachedResponse; // Serve from cache
+  }
+
+  // Check for ongoing request
+  if (pendingApiRequests.has(apiUrl)) {
+    return pendingApiRequests.get(apiUrl); // Wait for the existing request to complete
+  }
+
+  const fetchPromise = fetch(apiUrl)
+    .then(async (response) => {
+      if (response.ok) {
+        const clonedResponse = response.clone();
+        // Store in cache with expiration header
+        const headers = new Headers(clonedResponse.headers);
+        headers.set(
+          "sw-cache-expires",
+          new Date(now + API_CACHE_DURATION).toString(),
+        );
+        await cache.put(
+          apiUrl,
+          new Response(clonedResponse.body, {
+            status: clonedResponse.status,
+            statusText: clonedResponse.statusText,
+            headers: headers,
+          }),
+        );
+      }
+      return response;
+    })
+    .finally(() => {
+      pendingApiRequests.delete(apiUrl);
+    });
+
+  pendingApiRequests.set(apiUrl, fetchPromise);
+  return fetchPromise;
+};
+
 // This route's caching seems too aggressive.
 // TODO(abhinav): Figure out if this is really necessary.
 // Maybe add the assets locally?
@@ -52,7 +106,32 @@ 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 }) => {
+      const isAppEditUrl = regexMap.appEditUrl.test(request.url);
+      const isAppViewUrl = regexMap.appViewUrl.test(request.url);
+
+      if (isAppEditUrl) {
+        const pageId = request.url.split("-").pop().split("/")[0];
+        const apiUrl = `/api/v1/consolidated-api/edit?defaultPageId=${pageId}`;
+        handleApiRequest(apiUrl);
+      } else if (isAppViewUrl) {
+        const pageId = request.url.split("-").pop().split("/")[0];
+        const apiUrl = `/api/v1/consolidated-api/view?defaultPageId=${pageId}`;
+        handleApiRequest(apiUrl);
+      }
+      const networkHandler = new NetworkOnly();
+      return networkHandler.handle({ event, request });
+    },
+  ),
+);
+
+// Route for fetching the API directly
+registerRoute(
+  new RegExp("/api/v1/consolidated-api/"),
+  async ({ url }) => handleApiRequest(url.href),
+  "GET",
 );