feat: move ThirdPartyScripts

Author: raminr77

public/service-worker.js

@@ -1,9 +1,105 @@
-function registerServiceWorker() {
-  if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/sw.js').then(() => {
-      console.log('Service Worker registration successful.');
-    });
+const VERSION = 'v4';
+const STATIC_CACHE = `static-${VERSION}`;
+const IMG_REGEX = /\/images\/.*\.(png|jpg|jpeg|gif|webp|svg)$/i;
+
+self.addEventListener('install', () => {
+  // event.waitUntil((async () => {})());
+  console.log('Service Worker installed.');
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  console.log('Service Worker activated.');
+  event.waitUntil(
+    (async () => {
+      // Clean
+      const keys = await caches.keys();
+      await Promise.all(
+        keys.map((k) =>
+          k.startsWith('static-') && k !== STATIC_CACHE ? caches.delete(k) : null
+        )
+      );
+
+      if ('navigationPreload' in self.registration) {
+        try {
+          await self.registration.navigationPreload.enable();
+        } catch {}
+      }
+      await self.clients.claim();
+    })()
+  );
+});
+
+const canCache = (req, res) => {
+  if (req.method !== 'GET') return false;
+  if (!res || !res.ok) return false;
+
+  const cacheControl = res.headers.get('Cache-Control') || '';
+
+  if (cacheControl.includes('no-store')) return false;
+  if (res.type === 'opaque') return false;
+  return true;
+};
+
+self.addEventListener('fetch', (event) => {
+  const req = event.request;
+
+  if (req.method !== 'GET') return;
+
+  const url = new URL(req.url);
+  const sameOrigin = url.origin === self.location.origin;
+
+  if (
+    url.searchParams.has('_rsc') ||
+    url.pathname.startsWith('/api') ||
+    url.pathname.startsWith('/_next/data') ||
+    url.pathname.startsWith('/_next/static') ||
+    url.pathname.startsWith('/_next/image')
+  ) {
+    return;
+  }
+
+  if (req.mode === 'navigate') {
+    return;
+  }
+
+  const isImage = sameOrigin && IMG_REGEX.test(url.pathname);
+  if (!isImage) {
+    return;
   }
-}
 
-registerServiceWorker();
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(STATIC_CACHE);
+      const cached = await cache.match(req);
+
+      if (cached) {
+        event.waitUntil(
+          (async () => {
+            try {
+              const net = await fetch(req, { cache: 'no-store' });
+              if (canCache(req, net)) await cache.put(req, net.clone());
+            } catch {}
+          })()
+        );
+        return cached;
+      }
+
+      try {
+        const preload = await event.preloadResponse;
+        if (preload && canCache(req, preload)) {
+          event.waitUntil(cache.put(req, preload.clone()));
+          return preload;
+        }
+      } catch {}
+
+      try {
+        const net = await fetch(req, { cache: 'no-store' });
+        if (canCache(req, net)) event.waitUntil(cache.put(req, net.clone()));
+        return net;
+      } catch {
+        return new Response('', { status: 504, statusText: 'Offline' });
+      }
+    })()
+  );
+});

public/sw.js

@@ -1,11 +1,11 @@
-import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
-import { SpeedInsights } from '@vercel/speed-insights/next';
 import { ToastContainer } from 'react-toastify';
 import React, { Suspense } from 'react';
 import type { Metadata } from 'next';
 import Script from 'next/script';
 import Image from 'next/image';
 
+import { ServiceWorkerRegistrar } from '@/layout/components/service-worker-registrar';
+import { ThirdPartyScripts } from '@/layout/components/third-party-scripts';
 import { ProgressBar } from '@/layout/components/progress-bar';
 import { ENV } from '@/shared/constants';
 import { textFont } from '@/app/fonts';
@@ -25,11 +25,6 @@ const CookiesModal = React.lazy(() =>
     default: module.CookiesModal
   }))
 );
-const PerformanceMonitor = React.lazy(() =>
-  import('@/shared/components/performance-monitor').then((module) => ({
-    default: module.PerformanceMonitor
-  }))
-);
 
 import './globals.scss';
 import 'animate.css';
@@ -75,7 +70,7 @@ export const metadata: Metadata = {
       {
         width: 1200,
         height: 630,
-        url: '/social-banner.png',
+        url: '/images/social-banner.png',
         alt: `${PERSONAL_DATA.fullName} | ${PERSONAL_DATA.title}`
       }
     ]
@@ -120,7 +115,9 @@ export default function RootLayout({
 
         {children}
 
-        <CookiesModal />
+        <Suspense fallback={null}>
+          <CookiesModal />
+        </Suspense>
 
         <ToastContainer
           limit={4}
@@ -131,27 +128,11 @@ export default function RootLayout({
           toastClassName="!bg-gray-800 !text-white"
         />
 
-        <SpeedInsights />
-
-        {ENV.ANALYZE_MODE && <PerformanceMonitor />}
-
         {/* Optimized script loading */}
         <Script src="/click-spark.js" strategy="lazyOnload" />
-        <Script src="/service-worker.js" strategy="afterInteractive" />
+        <ServiceWorkerRegistrar />
 
-        {!!ENV.GOOGLE_ADSENSE && (
-          <Script
-            async
-            crossOrigin="anonymous"
-            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ENV.GOOGLE_ADSENSE}`}
-          />
-        )}
-        {!!ENV.GOOGLE_ANALYTICS_CODE && (
-          <GoogleAnalytics gaId={ENV.GOOGLE_ANALYTICS_CODE} />
-        )}
-        {!!ENV.GOOGLE_TAG_MANAGER_CODE && (
-          <GoogleTagManager gtmId={ENV.GOOGLE_TAG_MANAGER_CODE} />
-        )}
+        <ThirdPartyScripts />
       </body>
     </html>
   );

src/app/layout.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { useEffect } from 'react';
+
+export function ServiceWorkerRegistrar() {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/service-worker.js').catch(() => {
+        console.log('Service Worker registration successful.');
+      });
+    }
+  }, []);
+  return null;
+}

src/layout/components/service-worker-registrar/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { useEffect, useState, Suspense } from 'react';
+import Script from 'next/script';
+
+import { getCookiesModalStatus, type CookiesModalStatus } from '@/shared/helpers';
+import { COOKIES_MODAL_STATUS, ENV } from '@/shared/constants';
+
+const PerformanceMonitor = () =>
+  import('@/shared/components/performance-monitor').then((module) => ({
+    default: module.PerformanceMonitor
+  }));
+
+export function ThirdPartyScripts() {
+  const [status, setStatus] = useState<CookiesModalStatus>(COOKIES_MODAL_STATUS.NONE);
+
+  useEffect(() => {
+    setStatus(getCookiesModalStatus());
+  }, []);
+
+  if (status !== COOKIES_MODAL_STATUS.ACCEPT) return null;
+
+  return (
+    <>
+      <SpeedInsights />
+
+      {ENV.ANALYZE_MODE && (
+        <Suspense fallback={null}>
+          {/* @ts-expect-error async component for lazy import */}
+          <PerformanceMonitor />
+        </Suspense>
+      )}
+
+      {!!ENV.GOOGLE_ADSENSE && (
+        <Script
+          async
+          crossOrigin="anonymous"
+          src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ENV.GOOGLE_ADSENSE}`}
+        />
+      )}
+
+      {!!ENV.GOOGLE_ANALYTICS_CODE && (
+        <GoogleAnalytics gaId={ENV.GOOGLE_ANALYTICS_CODE} />
+      )}
+
+      {!!ENV.GOOGLE_TAG_MANAGER_CODE && (
+        <GoogleTagManager gtmId={ENV.GOOGLE_TAG_MANAGER_CODE} />
+      )}
+    </>
+  );
+}

src/layout/components/third-party-scripts/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { useIsClient } from '@/shared/hooks';