@djangocfg/layouts 2.1.45 → 2.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.45",
+  "version": "2.1.46",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.45",
-    "@djangocfg/centrifugo": "^2.1.45",
-    "@djangocfg/ui-nextjs": "^2.1.45",
+    "@djangocfg/api": "^2.1.46",
+    "@djangocfg/centrifugo": "^2.1.46",
+    "@djangocfg/ui-nextjs": "^2.1.46",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -115,7 +115,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.45",
+    "@djangocfg/typescript-config": "^2.1.46",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/snippets/PushNotifications/hooks/usePushNotifications.ts

@@ -10,6 +10,7 @@
 import { useEffect, useState } from 'react';
 
 import { pwaLogger } from '../utils/logger';
+import { checkBrowserPushSupport } from '../utils/platform';
 import { urlBase64ToUint8Array, VapidKeyError } from '../utils/vapid';
 
 import type { PushNotificationState, PushNotificationOptions } from '../types';
@@ -25,6 +26,20 @@ export function usePushNotifications(options?: PushNotificationOptions) {
   useEffect(() => {
     if (typeof window === 'undefined') return;
 
+    // Check browser-level support first (blocks unsupported browsers like Comet, Opera Mini, etc.)
+    const browserSupport = checkBrowserPushSupport();
+
+    if (!browserSupport.isSupported) {
+      pwaLogger.info(`[usePushNotifications] Browser does not support push: ${browserSupport.browserName} - ${browserSupport.reason}`);
+      setState((prev) => ({
+        ...prev,
+        isSupported: false,
+        permission: 'denied',
+      }));
+      return;
+    }
+
+    // Check API-level support
     const isSupported = 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window;
 
     setState((prev) => ({

package/src/snippets/PushNotifications/index.ts

@@ -80,6 +80,16 @@ export {
   clearAllPushData,
 } from './utils/localStorage';
 
+export {
+  checkBrowserPushSupport,
+  isBrowserPushSupported,
+  isStandalone,
+  isStandaloneReliable,
+  isMobileDevice,
+  getDisplayMode,
+  type BrowserPushSupport,
+} from './utils/platform';
+
 // Types - Configuration
 export type { PushNotificationsConfig } from './types';
 

package/src/snippets/PushNotifications/utils/platform.ts

@@ -5,6 +5,181 @@
  * Used by hooks to avoid code duplication.
  */
 
+// ============================================================================
+// Browser Push Support Detection
+// ============================================================================
+
+/**
+ * List of browsers/contexts known to NOT support Web Push Notifications
+ */
+export interface BrowserPushSupport {
+  isSupported: boolean;
+  browserName: string;
+  reason?: string;
+}
+
+/**
+ * Check if the current browser supports Web Push Notifications
+ *
+ * This checks for browsers that are known to NOT support push notifications:
+ * - Opera Mini (no service worker support)
+ * - Internet Explorer (deprecated, no Push API)
+ * - UC Browser (unreliable push support)
+ * - In-App browsers (Facebook, Instagram, TikTok, Snapchat, WeChat, etc.)
+ * - Generic WebViews
+ *
+ * Note: Comet (Perplexity) is Chromium-based and DOES support push notifications.
+ *
+ * @returns Object with isSupported flag, browserName, and optional reason
+ *
+ * @example
+ * ```typescript
+ * const { isSupported, browserName, reason } = checkBrowserPushSupport();
+ * if (!isSupported) {
+ *   console.log(`Push not supported in ${browserName}: ${reason}`);
+ * }
+ * ```
+ */
+export function checkBrowserPushSupport(): BrowserPushSupport {
+  if (typeof window === 'undefined') {
+    return { isSupported: false, browserName: 'unknown', reason: 'Server-side rendering' };
+  }
+
+  const ua = window.navigator.userAgent.toLowerCase();
+
+  // ============================================================================
+  // In-App Browsers (WebViews) - typically do NOT support push
+  // ============================================================================
+
+  // Facebook In-App Browser
+  if (ua.includes('fban') || ua.includes('fbav') || ua.includes('fb_iab')) {
+    return { isSupported: false, browserName: 'Facebook In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Instagram In-App Browser
+  if (ua.includes('instagram')) {
+    return { isSupported: false, browserName: 'Instagram In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // TikTok In-App Browser
+  if (ua.includes('tiktok') || ua.includes('bytedancewebview') || ua.includes('bytelocale')) {
+    return { isSupported: false, browserName: 'TikTok In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Snapchat In-App Browser
+  if (ua.includes('snapchat')) {
+    return { isSupported: false, browserName: 'Snapchat In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // WeChat In-App Browser
+  if (ua.includes('micromessenger')) {
+    return { isSupported: false, browserName: 'WeChat In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Threads In-App Browser (Meta's app - codename Barcelona)
+  if (ua.includes('barcelona')) {
+    return { isSupported: false, browserName: 'Threads In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Pinterest In-App Browser
+  if (ua.includes('pinterest')) {
+    return { isSupported: false, browserName: 'Pinterest In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Telegram In-App Browser
+  if (ua.includes('telegram')) {
+    return { isSupported: false, browserName: 'Telegram In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Line In-App Browser
+  if (ua.includes('line/')) {
+    return { isSupported: false, browserName: 'Line In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // KakaoTalk In-App Browser
+  if (ua.includes('kakaotalk')) {
+    return { isSupported: false, browserName: 'KakaoTalk In-App', reason: 'In-app browsers do not support push notifications' };
+  }
+
+  // Note: Twitter and LinkedIn In-App on Android use Chrome WebView and DO support push
+  // We don't block them here
+  const isIOSDevice = ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod');
+
+  // LinkedIn In-App on iOS - no push
+  if (ua.includes('linkedinapp') && isIOSDevice) {
+    return { isSupported: false, browserName: 'LinkedIn In-App', reason: 'LinkedIn In-App on iOS does not support push notifications' };
+  }
+
+  // Twitter In-App on iOS - no push
+  if (ua.includes('twitter') && isIOSDevice) {
+    return { isSupported: false, browserName: 'Twitter In-App', reason: 'Twitter In-App on iOS does not support push notifications' };
+  }
+
+  // ============================================================================
+  // Browsers without Push Support
+  // ============================================================================
+
+  // Note: Comet Browser (Perplexity) is Chromium-based and DOES support push
+
+  // Opera Mini
+  if (ua.includes('opera mini') || ua.includes('opios')) {
+    return { isSupported: false, browserName: 'Opera Mini', reason: 'Opera Mini does not support service workers' };
+  }
+
+  // Internet Explorer
+  if (ua.includes('msie') || ua.includes('trident/')) {
+    return { isSupported: false, browserName: 'Internet Explorer', reason: 'Internet Explorer does not support Push API' };
+  }
+
+  // UC Browser (unreliable support)
+  if (ua.includes('ucbrowser') || ua.includes('uc browser')) {
+    return { isSupported: false, browserName: 'UC Browser', reason: 'UC Browser has unreliable push notification support' };
+  }
+
+  // ============================================================================
+  // Generic WebView Detection
+  // ============================================================================
+
+  const isWebView = ua.includes('wv)') ||
+                   ua.includes('webview') ||
+                   ua.includes('; wv') ||
+                   (ua.includes('iphone') && !ua.includes('safari')) ||
+                   (ua.includes('ipad') && !ua.includes('safari'));
+
+  if (isWebView) {
+    return { isSupported: false, browserName: 'WebView', reason: 'WebViews do not support push notifications' };
+  }
+
+  // ============================================================================
+  // Determine Browser Name for supported browsers
+  // ============================================================================
+
+  let browserName = 'unknown';
+
+  if (ua.includes('comet') || ua.includes('perplexity')) browserName = 'Comet';
+  else if (ua.includes('edg/') || ua.includes('edge/')) browserName = 'Edge';
+  else if ((window.navigator as any).brave) browserName = 'Brave';
+  else if (ua.includes('arc/')) browserName = 'Arc';
+  else if (ua.includes('vivaldi')) browserName = 'Vivaldi';
+  else if (ua.includes('yabrowser')) browserName = 'Yandex';
+  else if (ua.includes('samsungbrowser')) browserName = 'Samsung Internet';
+  else if (ua.includes('opr/') || ua.includes('opera')) browserName = 'Opera';
+  else if (ua.includes('firefox')) browserName = 'Firefox';
+  else if (ua.includes('chrome')) browserName = 'Chrome';
+  else if (ua.includes('safari') && ua.includes('version/')) browserName = 'Safari';
+
+  return { isSupported: true, browserName };
+}
+
+/**
+ * Quick check if push notifications are supported by the browser
+ *
+ * @returns true if browser supports push notifications
+ */
+export function isBrowserPushSupported(): boolean {
+  return checkBrowserPushSupport().isSupported;
+}
+
 /**
  * Check if running as PWA (standalone mode)
  *