next.config.mjs

// @type {import('next').NextConfig}
// @ts-ignore
import withPWAInit from '@ducanh2912/next-pwa';

const withPWA = withPWAInit({
  dest: 'public',
  cacheOnFrontEndNav: true,
  aggressiveFrontEndNavCaching: true,
  disable: process.env.NODE_ENV === 'development',
  workboxOptions: {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/sunoh-api\.vercel\.app/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          networkTimeoutSeconds: 10,
        },
      },
      {
        urlPattern: ({ url }) => {
          const patterns = [
            'c.saavncdn.com',
            'sunoh-api.vercel.app',
            'c.sop.saavncdn.com',
          ];
          return patterns.some((pattern) => url.host.includes(pattern));
        },
        handler: 'CacheFirst',
        options: {
          cacheName: 'music-images',
          expiration: {
            maxEntries: 500,
            maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      },
    ],
  },
  // workboxOptions: {
  //   disableDevLogs: true,
  //   maximumFileSizeToCacheInBytes: 4096 * 1024 * 1024, // 5MB
  //   runtimeCaching: [
  //     // Images from saavncdn and API
  //     {
  //       urlPattern: ({ url }) => {
  //         const patterns = [
  //           'c.saavncdn.com',
  //           'sunoh-api.vercel.app',
  //           'c.sop.saavncdn.com',
  //         ];
  //         return patterns.some((pattern) => url.host.includes(pattern));
  //       },
  //       handler: 'CacheFirst',
  //       options: {
  //         cacheName: 'music-images',
  //         expiration: {
  //           maxEntries: 500,
  //           maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
  //         },
  //         cacheableResponse: {
  //           statuses: [0, 200],
  //         },
  //       },
  //     },
  //     // API responses
  //     {
  //       urlPattern: /^https:\/\/sunoh-api\.vercel\.app/,
  //       handler: 'NetworkFirst',
  //       options: {
  //         cacheName: 'api-cache',
  //         expiration: {
  //           maxEntries: 200,
  //           maxAgeSeconds: 4 * 60 * 60, // 24 hours
  //         },
  //         networkTimeoutSeconds: 10,
  //         cacheableResponse: {
  //           statuses: [0, 200],
  //         },
  //       },
  //     },
  //     // Audio files
  //     {
  //       urlPattern: /\.(mp3|m4a)$/i,
  //       handler: 'CacheFirst',
  //       options: {
  //         cacheName: 'audio-cache',
  //         rangeRequests: true,
  //         expiration: {
  //           maxEntries: 100,
  //           maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
  //         },
  //         cacheableResponse: {
  //           statuses: [0, 200, 206],
  //         },
  //       },
  //     },
  //     // Static assets (JS, CSS, fonts)
  //     {
  //       urlPattern: /\.(?:js|css|woff2?|ttf|otf)$/i,
  //       handler: 'StaleWhileRevalidate',
  //       options: {
  //         cacheName: 'static-assets',
  //         expiration: {
  //           maxEntries: 200,
  //           maxAgeSeconds: 4 * 60 * 60, // 24 hours
  //         },
  //         cacheableResponse: {
  //           statuses: [0, 200],
  //         },
  //       },
  //     },
  //     // Data URLs from Next.js
  //     {
  //       urlPattern: ({ url }) => url.pathname.includes('/_next/data/'),
  //       handler: 'StaleWhileRevalidate',
  //       options: {
  //         cacheName: 'next-data',
  //         expiration: {
  //           maxEntries: 200,
  //           maxAgeSeconds: 4 * 60 * 60, // 24 hours
  //         },
  //         cacheableResponse: {
  //           statuses: [0, 200],
  //         },
  //       },
  //     },
  //     // Offline fallback
  //     {
  //       urlPattern: ({ request }) => request.mode === 'navigate',
  //       handler: 'NetworkFirst',
  //       options: {
  //         cacheName: 'pages-cache',
  //         expiration: {
  //           maxEntries: 100,
  //           maxAgeSeconds: 4 * 60 * 60, // 24 hours
  //         },
  //         networkTimeoutSeconds: 10,
  //         cacheableResponse: {
  //           statuses: [0, 200],
  //         },
  //       },
  //     },
  //   ],
  // },
});

const nextConfig = {
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'c.saavncdn.com',
      },
      {
        protocol: 'https',
        hostname: 'sunoh-api.vercel.app',
      },
      {
        protocol: 'http',
        hostname: 'c.saavncdn.com',
      },
      {
        protocol: 'https',
        hostname: 'c.sop.saavncdn.com',
      },
    ],
  },
};

// @ts-ignore
export default withPWA(nextConfig);