perf: cache all api responses using a webworker (#882)

eslint.config.js

@@ -85,6 +85,7 @@ module.exports = [
       'eslint.config.js',
       '.nx',
       'jest.config.ts',
+      'public',
     ],
   },
 ]

public/service-worker.js

@@ -0,0 +1,34 @@
+const CACHE_NAME = 'get-requests-cache-v1';
+const CACHE_URLS = [];
+
+const urlsToFetch = [
+    "open-bus-stride-api",
+    "fonts.googleapis.com"
+]
+
+// Install event: cache basic URLs (optional)
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => cache.addAll(CACHE_URLS))
+  );
+});
+
+// Fetch event: cache GET requests
+self.addEventListener('fetch', event => {
+  if (event.request.method === 'GET' && urlsToFetch.some(url => event.request.url.includes(url))) {
+    event.respondWith(
+      caches.match(event.request).then(cachedResponse => {
+        // Return cached response if available, else fetch from network
+        return cachedResponse || fetch(event.request).then(response => {
+          // Clone the response to save it in the cache
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then(cache => {
+            cache.put(event.request, responseClone);
+          });
+          console.log("cached ", event.request)
+          return response;
+        });
+      })
+    );
+  }
+});

src/App.tsx

@@ -11,6 +11,13 @@ import 'moment/dist/locale/he'
 moment.tz.setDefault('Asia/Jerusalem')
 moment.locale('he')
 
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('/service-worker.js')
+    .then((reg) => console.log('Service Worker Registered', reg))
+    .catch((err) => console.error('Service Worker Registration Failed', err))
+}
+
 export const RoutedApp = () => (
   <Suspense fallback={<Preloader />}>
     <RouterProvider router={router} />