@djangocfg/nextjs 2.1.35 → 2.1.37

package/src/pwa/worker/index.ts

@@ -0,0 +1,174 @@
+/**
+ * Service Worker Utilities
+ *
+ * Ready-to-use Serwist configuration for Next.js PWA
+ */
+
+/// <reference lib="webworker" />
+
+import { defaultCache } from '@serwist/next/worker';
+import { Serwist } from 'serwist';
+
+export interface ServiceWorkerOptions {
+  /**
+   * Offline fallback URL
+   * @default '/_offline'
+   */
+  offlineFallback?: string;
+
+  /**
+   * Skip waiting - activate new SW immediately
+   * @default true
+   */
+  skipWaiting?: boolean;
+
+  /**
+   * Take control of all clients immediately
+   * @default true
+   */
+  clientsClaim?: boolean;
+
+  /**
+   * Enable navigation preload for faster loads
+   * @default true
+   */
+  navigationPreload?: boolean;
+
+  /**
+   * Enable push notifications
+   * @default false
+   */
+  enablePushNotifications?: boolean;
+
+  /**
+   * Default notification icon
+   */
+  notificationIcon?: string;
+
+  /**
+   * Default notification badge
+   */
+  notificationBadge?: string;
+}
+
+/**
+ * Create and initialize Serwist service worker
+ *
+ * @example
+ * ```ts
+ * // app/sw.ts
+ * import { createServiceWorker } from '@djangocfg/nextjs/worker';
+ *
+ * createServiceWorker({
+ *   offlineFallback: '/_offline',
+ * });
+ * ```
+ */
+export function createServiceWorker(options: ServiceWorkerOptions = {}) {
+  const {
+    offlineFallback = '/_offline',
+    skipWaiting = true,
+    clientsClaim = true,
+    navigationPreload = true,
+    enablePushNotifications = false,
+    notificationIcon,
+    notificationBadge,
+  } = options;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const self = globalThis as any;
+  console.log('SW: Worker Initialized 🚀');
+
+  const serwist = new Serwist({
+    // Precache entries injected by Serwist build plugin
+    precacheEntries: self.__SW_MANIFEST,
+
+    // Skip waiting - activate new SW immediately
+    skipWaiting,
+
+    // Take control of all clients immediately
+    clientsClaim,
+
+    // Enable navigation preload for faster loads
+    navigationPreload,
+
+    // Use default Next.js runtime caching strategies
+    runtimeCaching: defaultCache,
+
+    // Fallback pages for offline
+    fallbacks: {
+      entries: [
+        {
+          url: offlineFallback,
+          matcher({ request }) {
+            return request.destination === 'document';
+          },
+        },
+      ],
+    },
+  });
+
+  serwist.addEventListeners();
+
+  // Push notification support
+  if (enablePushNotifications) {
+    // Handle push events
+    self.addEventListener('push', (event: PushEvent) => {
+      let data;
+      try {
+        data = event.data?.json() || {};
+        console.log('SW: Push Received (JSON)', data);
+      } catch (err) {
+        console.log('SW: Push Received (Raw)', event.data?.text());
+        data = {};
+      }
+
+      const {
+        title = 'Notification',
+        body = '',
+        icon = notificationIcon,
+        badge = notificationBadge,
+        data: notificationData = {},
+        tag,
+        requireInteraction = false,
+        vibrate = [200, 100, 200], // Default vibration pattern
+        silent = false,            // Default to playing sound
+      } = data;
+
+      event.waitUntil(
+        self.registration.showNotification(title, {
+          body,
+          icon,
+          badge,
+          data: notificationData,
+          tag,
+          requireInteraction,
+          vibrate,
+          silent,
+        })
+      );
+    });
+
+    // Handle notification clicks
+    self.addEventListener('notificationclick', (event: NotificationEvent) => {
+      event.notification.close();
+
+      const urlToOpen = event.notification.data?.url || '/';
+
+      event.waitUntil(
+        self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList: readonly WindowClient[]) => {
+          // Check if there's already a window open with the URL
+          for (const client of clientList) {
+            if (client.url === urlToOpen && 'focus' in client) {
+              return client.focus();
+            }
+          }
+          // If not, open a new window
+          if (self.clients.openWindow) {
+            return self.clients.openWindow(urlToOpen);
+          }
+        })
+      );
+    });
+  }
+}

package/src/pwa/worker/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/bin/dev-with-browser.js

@@ -1,114 +0,0 @@
-#!/usr/bin/env node
-/**
- * Next.js Dev Server with Auto Browser Opening
- *
- * Cross-platform solution that works with both Turbopack and webpack
- * Opens browser automatically when server is ready
- *
- * Usage:
- *   "dev": "dev-with-browser"
- *   "dev": "dev-with-browser --port 3000"
- *   "dev": "dev-with-browser --webpack"
- */
-
-const { spawn } = require('child_process');
-const { exec } = require('child_process');
-const consola = require('consola');
-
-// Parse arguments
-const args = process.argv.slice(2);
-
-// Extract port
-let PORT = process.env.PORT || '3000';
-const portIndex = args.findIndex(arg => arg === '-p' || arg === '--port');
-if (portIndex !== -1 && args[portIndex + 1]) {
-  PORT = args[portIndex + 1];
-}
-
-// Build next dev command
-const nextArgs = ['dev', '-p', PORT];
-
-// Check if --webpack flag is present
-const hasWebpackFlag = args.includes('--webpack');
-
-// Add --turbopack by default (unless --webpack is specified)
-// This silences the "webpack config with no turbopack config" warning
-if (!hasWebpackFlag) {
-  nextArgs.push('--turbopack');
-}
-
-// Pass through other flags, excluding port arguments
-args.forEach((arg, i) => {
-  const isPreviousPort = i > 0 && (args[i - 1] === '-p' || args[i - 1] === '--port');
-  const isPortFlag = arg === '-p' || arg === '--port';
-
-  if (!isPortFlag && !isPreviousPort) {
-    nextArgs.push(arg);
-  }
-});
-
-const URL = `http://localhost:${PORT}`;
-
-consola.info(`Starting Next.js dev server on port ${PORT}...`);
-
-// Start Next.js dev server
-const devServer = spawn('next', nextArgs, {
-  stdio: 'inherit',
-  shell: true,
-});
-
-// Wait for server to be ready, then open browser
-let serverReady = false;
-let attempts = 0;
-const maxAttempts = 60; // 30 seconds max
-
-const checkInterval = setInterval(async () => {
-  if (serverReady || attempts >= maxAttempts) {
-    if (attempts >= maxAttempts) {
-      consola.warn('Server took too long to start, skipping browser open');
-    }
-    clearInterval(checkInterval);
-    return;
-  }
-
-  attempts++;
-
-  try {
-    const response = await fetch(URL);
-    if (response.ok) {
-      serverReady = true;
-      clearInterval(checkInterval);
-
-      consola.success(`Server ready! Opening browser at ${URL}`);
-
-      // Open browser (cross-platform)
-      const command = process.platform === 'darwin'
-        ? 'open'
-        : process.platform === 'win32'
-        ? 'start'
-        : 'xdg-open';
-
-      exec(`${command} ${URL}`, (error) => {
-        if (error) {
-          consola.warn(`Failed to open browser: ${error.message}`);
-          consola.info(`Please open manually: ${URL}`);
-        }
-      });
-    }
-  } catch (err) {
-    // Server not ready yet, continue checking
-  }
-}, 500);
-
-// Cleanup on exit
-process.on('SIGINT', () => {
-  clearInterval(checkInterval);
-  devServer.kill();
-  process.exit();
-});
-
-process.on('SIGTERM', () => {
-  clearInterval(checkInterval);
-  devServer.kill();
-  process.exit();
-});