Mobil Micro Frontend'ler: Production'da Çok Kanallı Deneyimler

// Re.Pack çok kanallı kurulum// webpack.config.js (paylaşılan konfigürasyon)const { ModuleFederationPlugin } = require('@module-federation/nextjs-mf');
module.exports = {  plugins: [    new ModuleFederationPlugin({      name: 'host',      remotes: {        payment: 'payment@http://localhost:3001/remoteEntry.js',        booking: 'booking@http://localhost:3002/remoteEntry.js',      },      shared: {        react: { singleton: true },        'react-dom': { singleton: true },        '@shared/platform': { singleton: true }      }    })  ]};
// Platform abstraction katmanı// @shared/platform/index.tsexport interface PlatformAPI {  // Navigasyon  navigate(screen: string, params?: any): void;  goBack(): void;
  // Native özellikler  camera: {    takePhoto(): Promise<string>;    selectFromGallery(): Promise<string>;  };
  // Depolama  storage: {    get(key: string): Promise<any>;    set(key: string, value: any): Promise<void>;  };
  // Ağ  network: {    isOnline(): boolean;    onNetworkChange(callback: (online: boolean) => void): void;  };}
// Platform-specific implementasyonlarexport class ReactNativePlatform implements PlatformAPI {  // React Native implementasyonu}
export class WebPlatform implements PlatformAPI {  // Web implementasyonu}
export class ElectronPlatform implements PlatformAPI {  // Electron implementasyonu}

// rspack.config.mjs - Çok kanallı konfigürasyonexport default {  entry: './src/index.tsx',  target: ['web', 'electron-renderer'], // Birden fazla target  module: {    rules: [      {        test: /\.tsx$/,        use: {          loader: 'builtin:swc-loader',          options: {            jsc: {              parser: {                syntax: 'typescript',                tsx: true              },              transform: {                react: {                  runtime: 'automatic'                }              }            }          }        }      }    ]  },  plugins: [    new ModuleFederationPlugin({      name: 'micro-frontend',      filename: 'remoteEntry.js',      exposes: {        './App': './src/App.tsx'      }    })  ]};
// Platform tespiticonst platform = process.env.PLATFORM || 'web';
// Platform'a göre koşullu import'larconst platformAPI = platform === 'react-native'  ? require('./platforms/react-native')  : platform === 'electron'  ? require('./platforms/electron')  : require('./platforms/web');

// vite.config.ts - Çok kanallı kurulumimport { defineConfig } from 'vite';import react from '@vitejs/plugin-react';
export default defineConfig(({ mode }) => {  const platform = process.env.PLATFORM || 'web';
  return {    plugins: [react()],    build: {      rollupOptions: {        external: platform === 'electron' ? ['electron'] : [],        output: {          manualChunks: {            vendor: ['react', 'react-dom'],            platform: [`./src/platforms/${platform}`]          }        }      }    },    define: {      __PLATFORM__: JSON.stringify(platform)    }  };});
// Platform-specific giriş noktaları// src/platforms/web/index.tsexport class WebPlatform {  // Web-specific implementasyon}
// src/platforms/electron/index.tsexport class ElectronPlatform {  // Electron-specific implementasyon}

// Gerçekten çalışan platform tespitiexport enum Platform {  REACT_NATIVE_IOS = 'react-native-ios',  REACT_NATIVE_ANDROID = 'react-native-android',  WEB_BROWSER = 'web-browser',  ELECTRON_DESKTOP = 'electron-desktop',  UNKNOWN = 'unknown'}
class PlatformDetector {  private static _platform?: Platform;
  static get platform(): Platform {    if (this._platform) return this._platform;
    // Önce React Native'i kontrol et    if (typeof navigator !== 'undefined' &&        navigator.product === 'ReactNative') {      // React Native WebView'dayız      if (window.ReactNativeWebView) {        // User agent aracılığıyla iOS vs Android tespit et        const userAgent = navigator.userAgent;        this._platform = userAgent.includes('iPhone') || userAgent.includes('iPad')          ? Platform.REACT_NATIVE_IOS          : Platform.REACT_NATIVE_ANDROID;      } else {        this._platform = Platform.UNKNOWN;      }    }    // Electron'u kontrol et    else if (typeof window !== 'undefined' &&             window.process?.type === 'renderer') {      this._platform = Platform.ELECTRON_DESKTOP;    }    // Web tarayıcısı olmalı    else if (typeof window !== 'undefined') {      this._platform = Platform.WEB_BROWSER;    }    else {      this._platform = Platform.UNKNOWN;    }
    return this._platform;  }
  static isMobile(): boolean {    return this.platform === Platform.REACT_NATIVE_IOS ||           this.platform === Platform.REACT_NATIVE_ANDROID;  }
  static isWeb(): boolean {    return this.platform === Platform.WEB_BROWSER;  }
  static isDesktop(): boolean {    return this.platform === Platform.ELECTRON_DESKTOP;  }
  static hasNativeBridge(): boolean {    return this.isMobile() || this.isDesktop();  }}

// Evrensel bridge arayüzüexport interface UniversalBridge {  // Çekirdek mesajlaşma  request<T>(action: string, payload?: any): Promise<T>;  emit(action: string, payload?: any): void;  on(action: string, handler: (payload: any) => void): () => void;
  // Platform yetenekleri  getCapabilities(): PlatformCapabilities;  isSupported(feature: string): boolean;}
export interface PlatformCapabilities {  hasCamera: boolean;  hasBiometrics: boolean;  hasFileSystem: boolean;  hasNotifications: boolean;  canGoBack: boolean;  hasClipboard: boolean;  canDownload: boolean;  hasNativeNavigation: boolean;}
// Platform-specific implementasyonlarclass ReactNativeBridge implements UniversalBridge {  private bridge: WebViewBridge;
  constructor() {    this.bridge = window.bridge; // Kısım 2'den  }
  async request<T>(action: string, payload?: any): Promise<T> {    return this.bridge.request(action, payload);  }
  emit(action: string, payload?: any): void {    this.bridge.emit(action, payload);  }
  on(action: string, handler: (payload: any) => void): () => void {    return this.bridge.on(action, handler);  }
  getCapabilities(): PlatformCapabilities {    return {      hasCamera: true,      hasBiometrics: true,      hasFileSystem: true,      hasNotifications: true,      canGoBack: true,      hasClipboard: true,      canDownload: true,      hasNativeNavigation: true    };  }
  isSupported(feature: string): boolean {    return this.getCapabilities()[feature as keyof PlatformCapabilities] || false;  }}
class WebBridge implements UniversalBridge {  private eventEmitter = new EventTarget();
  async request<T>(action: string, payload?: any): Promise<T> {    // Web API'ları kullanarak native özellikleri simüle et    switch (action) {      case 'camera.takePhoto':        return this.handleWebCamera(payload) as Promise<T>;      case 'auth.getToken':        return this.handleWebAuth() as Promise<T>;      case 'navigation.goBack':        return this.handleWebNavigation() as Promise<T>;      default:        throw new Error(`Web'de desteklenmeyen eylem: ${action}`);    }  }
  emit(action: string, payload?: any): void {    this.eventEmitter.dispatchEvent(      new CustomEvent(action, { detail: payload })    );  }
  on(action: string, handler: (payload: any) => void): () => void {    const listener = (event: any) => handler(event.detail);    this.eventEmitter.addEventListener(action, listener);
    return () => {      this.eventEmitter.removeEventListener(action, listener);    };  }
  private async handleWebCamera(options: any): Promise<any> {    // HTML5 kamera API'sını kullan    const stream = await navigator.mediaDevices.getUserMedia({      video: {        width: { ideal: 1920 },        height: { ideal: 1080 }      }    });
    return new Promise((resolve, reject) => {      const video = document.createElement('video');      const canvas = document.createElement('canvas');      const ctx = canvas.getContext('2d')!;
      video.srcObject = stream;      video.play();
      video.onloadedmetadata = () => {        canvas.width = video.videoWidth;        canvas.height = video.videoHeight;
        // Kamera yakalama UI'sını simüle et        const captureButton = document.createElement('button');        captureButton.textContent = 'Yakala';        captureButton.onclick = () => {          ctx.drawImage(video, 0, 0);          const dataUri = canvas.toDataURL('image/jpeg', options?.quality || 0.8);
          stream.getTracks().forEach(track => track.stop());          document.body.removeChild(video);          document.body.removeChild(captureButton);
          resolve({            uri: dataUri,            width: canvas.width,            height: canvas.height          });        };
        document.body.appendChild(video);        document.body.appendChild(captureButton);      };    });  }
  private async handleWebAuth(): Promise<any> {    // Web kimlik doğrulaması için localStorage/sessionStorage kullan    const token = localStorage.getItem('auth_token');    if (!token) {      throw new Error('Kimlik doğrulama token'ı yok');    }
    return {      token,      expiresAt: Date.now() + 3600000 // 1 saat    };  }
  private async handleWebNavigation(): Promise<boolean> {    if (window.history.length > 1) {      window.history.back();      return true;    }    return false;  }
  getCapabilities(): PlatformCapabilities {    return {      hasCamera: !!navigator.mediaDevices?.getUserMedia,      hasBiometrics: false, // Tarayıcılarda mevcut değil      hasFileSystem: false, // Tarayıcılarda sınırlı      hasNotifications: 'Notification' in window,      canGoBack: true,      hasClipboard: !!navigator.clipboard,      canDownload: true,      hasNativeNavigation: false    };  }
  isSupported(feature: string): boolean {    return this.getCapabilities()[feature as keyof PlatformCapabilities] || false;  }}
class ElectronBridge implements UniversalBridge {  async request<T>(action: string, payload?: any): Promise<T> {    // Ana process ile iletişim için Electron'un IPC'sini kullan    return window.electronAPI.invoke(action, payload);  }
  emit(action: string, payload?: any): void {    window.electronAPI.send(action, payload);  }
  on(action: string, handler: (payload: any) => void): () => void {    const listener = (_: any, ...args: any[]) => handler(...args);    window.electronAPI.on(action, listener);
    return () => {      window.electronAPI.removeListener(action, listener);    };  }
  getCapabilities(): PlatformCapabilities {    return {      hasCamera: true,      hasBiometrics: false, // Native modül gerekir      hasFileSystem: true,      hasNotifications: true,      canGoBack: true,      hasClipboard: true,      canDownload: true,      hasNativeNavigation: true    };  }
  isSupported(feature: string): boolean {    return this.getCapabilities()[feature as keyof PlatformCapabilities] || false;  }}
// Bridge factoryexport class BridgeFactory {  static create(): UniversalBridge {    const platform = PlatformDetector.platform;
    switch (platform) {      case Platform.REACT_NATIVE_IOS:      case Platform.REACT_NATIVE_ANDROID:        return new ReactNativeBridge();
      case Platform.ELECTRON_DESKTOP:        return new ElectronBridge();
      case Platform.WEB_BROWSER:        return new WebBridge();
      default:        throw new Error(`Desteklenmeyen platform: ${platform}`);    }  }}

// Adaptif buton bileşeniinterface AdaptiveButtonProps {  title: string;  onPress: () => void;  variant?: 'primary' | 'secondary';  disabled?: boolean;}
export function AdaptiveButton({  title,  onPress,  variant = 'primary',  disabled = false}: AdaptiveButtonProps) {  const platform = PlatformDetector.platform;
  // Platform-specific stiller  const getButtonStyles = () => {    const baseStyles = 'px-4 py-2 rounded font-medium transition-colors';
    if (disabled) {      return `${baseStyles} bg-gray-300 text-gray-500 cursor-not-allowed`;    }
    const variantStyles = variant === 'primary'      ? 'bg-blue-600 text-white hover:bg-blue-700'      : 'bg-gray-200 text-gray-900 hover:bg-gray-300';
    // Platform-specific modifikasyonlar    switch (platform) {      case Platform.REACT_NATIVE_IOS:        // iOS tarzı buton        return `${baseStyles} ${variantStyles} shadow-sm`;
      case Platform.REACT_NATIVE_ANDROID:        // Material Design stili        return `${baseStyles} ${variantStyles} shadow-md elevation-2`;
      case Platform.WEB_BROWSER:        // Web'e optimize edilmiş        return `${baseStyles} ${variantStyles} focus:outline-none focus:ring-2 focus:ring-blue-500`;
      case Platform.ELECTRON_DESKTOP:        // Masaüstü uygulama stili        return `${baseStyles} ${variantStyles} text-sm`;
      default:        return `${baseStyles} ${variantStyles}`;    }  };
  const handleClick = () => {    if (disabled) return;
    // Mobile'da haptik geri bildirim ekle    if (PlatformDetector.isMobile()) {      bridge.emit('haptic.impact', { style: 'medium' });    }
    onPress();  };
  return (    <button      className={getButtonStyles()}      onClick={handleClick}      disabled={disabled}      // Erişilebilirlik      role="button"      aria-label={title}    >      {title}    </button>  );}
// Adaptif layout bileşenleriexport function AdaptiveLayout({ children }: { children: React.ReactNode }) {  const platform = PlatformDetector.platform;
  const getLayoutClass = () => {    switch (platform) {      case Platform.REACT_NATIVE_IOS:      case Platform.REACT_NATIVE_ANDROID:        // Mobile: tam yükseklik, güvenli alanlar        return 'min-h-screen pt-safe pb-safe px-4';
      case Platform.WEB_BROWSER:        // Web: responsive, maksimum genişlik        return 'min-h-screen max-w-4xl mx-auto px-4 py-8';
      case Platform.ELECTRON_DESKTOP:        // Masaüstü: kompakt, pencere-farkında        return 'h-screen p-6 overflow-auto';
      default:        return 'min-h-screen p-4';    }  };
  return (    <div className={getLayoutClass()}>      {children}    </div>  );}

// Platform-farkın dinamik import'larclass PlatformModuleLoader {  private moduleCache = new Map<string, any>();
  async loadPlatformModule<T>(moduleName: string): Promise<T> {    const cacheKey = `${moduleName}-${PlatformDetector.platform}`;
    if (this.moduleCache.has(cacheKey)) {      return this.moduleCache.get(cacheKey);    }
    let module: T;
    try {      // Önce platform-specific modülü dene      const platformModule = await this.loadPlatformSpecific<T>(moduleName);      module = platformModule;    } catch (error) {      // Generic modüle geri dön      console.warn(`Platform modülü ${moduleName} bulunamadı, generic kullanılıyor`);      module = await this.loadGeneric<T>(moduleName);    }
    this.moduleCache.set(cacheKey, module);    return module;  }
  private async loadPlatformSpecific<T>(moduleName: string): Promise<T> {    const platform = PlatformDetector.platform;
    switch (platform) {      case Platform.REACT_NATIVE_IOS:        return import(`./modules/${moduleName}/ios`);      case Platform.REACT_NATIVE_ANDROID:        return import(`./modules/${moduleName}/android`);      case Platform.WEB_BROWSER:        return import(`./modules/${moduleName}/web`);      case Platform.ELECTRON_DESKTOP:        return import(`./modules/${moduleName}/electron`);      default:        throw new Error(`${platform} için platform-specific modül yok`);    }  }
  private async loadGeneric<T>(moduleName: string): Promise<T> {    return import(`./modules/${moduleName}/index`);  }}
// Kullanımconst moduleLoader = new PlatformModuleLoader();
async function initializeApp() {  // Platform-optimize edilmiş modülleri yükle  const analytics = await moduleLoader.loadPlatformModule('analytics');  const storage = await moduleLoader.loadPlatformModule('storage');  const networking = await moduleLoader.loadPlatformModule('networking');
  // Platform-specific implementasyonlarla başlat  await analytics.initialize();  await storage.initialize();  await networking.initialize();}

// Adaptif bellek yönetimiclass MemoryManager {  private memoryLimit: number;  private memoryWarningThreshold: number;  private cache = new Map<string, { data: any; timestamp: number; size: number }>();  private totalCacheSize = 0;
  constructor() {    // Platform'a göre limitleri ayarla    const platform = PlatformDetector.platform;
    switch (platform) {      case Platform.REACT_NATIVE_IOS:      case Platform.REACT_NATIVE_ANDROID:        // Mobile: muhafazakar limitler        this.memoryLimit = 50 * 1024 * 1024; // 50MB        this.memoryWarningThreshold = 40 * 1024 * 1024; // 40MB        break;
      case Platform.WEB_BROWSER:        // Web: orta limitler        this.memoryLimit = 100 * 1024 * 1024; // 100MB        this.memoryWarningThreshold = 80 * 1024 * 1024; // 80MB        break;
      case Platform.ELECTRON_DESKTOP:        // Masaüstü: cömert limitler        this.memoryLimit = 200 * 1024 * 1024; // 200MB        this.memoryWarningThreshold = 150 * 1024 * 1024; // 150MB        break;
      default:        this.memoryLimit = 50 * 1024 * 1024;        this.memoryWarningThreshold = 40 * 1024 * 1024;    }
    // Bellek baskısı izlemeyi kur    this.setupMemoryMonitoring();  }
  set(key: string, data: any): void {    const serialized = JSON.stringify(data);    const size = new Blob([serialized]).size;
    // Önce bellek boşaltmamız gerekip gerekmediğini kontrol et    if (this.totalCacheSize + size > this.memoryLimit) {      this.freeMemory(size);    }
    this.cache.set(key, {      data,      timestamp: Date.now(),      size    });
    this.totalCacheSize += size;  }
  get(key: string): any {    const item = this.cache.get(key);    if (!item) return null;
    // LRU için timestamp'ı güncelle    item.timestamp = Date.now();    return item.data;  }
  private freeMemory(requiredSize: number): void {    // Timestamp'a göre sırala (LRU)    const entries = Array.from(this.cache.entries())      .sort(([, a], [, b]) => a.timestamp - b.timestamp);
    let freed = 0;
    for (const [key, item] of entries) {      this.cache.delete(key);      this.totalCacheSize -= item.size;      freed += item.size;
      if (freed >= requiredSize || this.totalCacheSize < this.memoryWarningThreshold) {        break;      }    }
    console.log(`[MemoryManager] ${freed} byte boşaltıldı`);  }
  private setupMemoryMonitoring(): void {    // Her 30 saniyede bellek kullanımını izle    setInterval(() => {      if (this.totalCacheSize > this.memoryWarningThreshold) {        console.warn(`[MemoryManager] Bellek kullanımı yüksek: ${this.totalCacheSize} byte`);
        // Cache'in 25%'ini boşalt        this.freeMemory(this.totalCacheSize * 0.25);      }    }, 30000);
    // Platform-specific bellek uyarılarına tepki ver    if (PlatformDetector.isMobile()) {      // Mobil uygulamalar bellek uyarıları alabilir      bridge.on('memory.warning', () => {        console.warn('[MemoryManager] Bellek uyarısı alındı, cache temizleniyor');        this.clearAll();      });    }  }
  clearAll(): void {    this.cache.clear();    this.totalCacheSize = 0;  }
  getStats(): {    totalSize: number;    itemCount: number;    limit: number;    utilizationPercent: number;  } {    return {      totalSize: this.totalCacheSize,      itemCount: this.cache.size,      limit: this.memoryLimit,      utilizationPercent: (this.totalCacheSize / this.memoryLimit) * 100    };  }}

// Adaptif ağ stratejisiclass NetworkManager {  private retryDelays: number[];  private timeoutMs: number;  private maxConcurrentRequests: number;  private activeRequests = new Set<string>();  private requestQueue: Array<() => Promise<any>> = [];
  constructor() {    const platform = PlatformDetector.platform;
    switch (platform) {      case Platform.REACT_NATIVE_IOS:      case Platform.REACT_NATIVE_ANDROID:        // Mobile: muhafazakar ayarlar        this.retryDelays = [1000, 2000, 5000];        this.timeoutMs = 15000;        this.maxConcurrentRequests = 3;        break;
      case Platform.WEB_BROWSER:        // Web: orta ayarlar        this.retryDelays = [500, 1000, 2000];        this.timeoutMs = 10000;        this.maxConcurrentRequests = 6;        break;
      case Platform.ELECTRON_DESKTOP:        // Masaüstü: agresif ayarlar        this.retryDelays = [200, 500, 1000];        this.timeoutMs = 5000;        this.maxConcurrentRequests = 10;        break;
      default:        this.retryDelays = [1000, 2000, 5000];        this.timeoutMs = 10000;        this.maxConcurrentRequests = 3;    }  }
  async request(url: string, options: RequestInit = {}): Promise<Response> {    // Mobile için request kuyruğu uygula    if (PlatformDetector.isMobile() &&        this.activeRequests.size >= this.maxConcurrentRequests) {      return this.queueRequest(() => this.executeRequest(url, options));    }
    return this.executeRequest(url, options);  }
  private async executeRequest(url: string, options: RequestInit): Promise<Response> {    const requestId = `${url}-${Date.now()}`;    this.activeRequests.add(requestId);
    try {      return await this.retryRequest(url, options);    } finally {      this.activeRequests.delete(requestId);      this.processQueue();    }  }
  private async retryRequest(url: string, options: RequestInit): Promise<Response> {    let lastError: Error;
    for (let attempt = 0; attempt <= this.retryDelays.length; attempt++) {      try {        // Request'e timeout ekle        const controller = new AbortController();        const timeoutId = setTimeout(() => controller.abort(), this.timeoutMs);
        const response = await fetch(url, {          ...options,          signal: controller.signal        });
        clearTimeout(timeoutId);
        // 4xx hatalarında tekrar deneme (429 hariç)        if (response.status >= 400 && response.status < 500 && response.status !== 429) {          return response;        }
        if (response.ok || response.status === 429) {          return response;        }
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      } catch (error) {        lastError = error as Error;
        // Abort'ta tekrar deneme        if (error.name === 'AbortError') {          throw error;        }
        // Tekrar denemeden önce bekle        if (attempt < this.retryDelays.length) {          console.warn(`Request denemesi ${attempt + 1} başarısız, ${this.retryDelays[attempt]}ms içinde tekrar deneniyor`);          await this.delay(this.retryDelays[attempt]);        }      }    }
    throw lastError!;  }
  private async queueRequest<T>(requestFn: () => Promise<T>): Promise<T> {    return new Promise((resolve, reject) => {      this.requestQueue.push(async () => {        try {          const result = await requestFn();          resolve(result);        } catch (error) {          reject(error);        }      });    });  }
  private processQueue(): void {    while (this.requestQueue.length > 0 &&           this.activeRequests.size < this.maxConcurrentRequests) {      const nextRequest = this.requestQueue.shift();      nextRequest?.();    }  }
  private delay(ms: number): Promise<void> {    return new Promise(resolve => setTimeout(resolve, ms));  }}

// Evrensel offline destekclass OfflineManager {  private isOnline = navigator.onLine;  private syncQueue: Array<{    id: string;    action: string;    payload: any;    timestamp: number;    attempts: number;  }> = [];  private storage: Storage;  private maxRetries = 5;
  constructor() {    // Platform-uygun storage kullan    this.storage = PlatformDetector.isMobile()      ? this.createMobileStorage()      : localStorage;
    this.setupNetworkMonitoring();    this.loadQueueFromStorage();  }
  private createMobileStorage(): Storage {    // React Native WebView'da, kalıcı storage için bridge kullanmamız gerekiyor    return {      getItem: async (key: string): Promise<string | null> => {        try {          return await bridge.request('storage.getItem', { key });        } catch {          return null;        }      },      setItem: async (key: string, value: string): Promise<void> => {        await bridge.request('storage.setItem', { key, value });      },      removeItem: async (key: string): Promise<void> => {        await bridge.request('storage.removeItem', { key });      },      clear: async (): Promise<void> => {        await bridge.request('storage.clear');      }    } as any;  }
  private setupNetworkMonitoring(): void {    // Web/Masaüstü ağ izleme    if (typeof window !== 'undefined') {      window.addEventListener('online', () => {        this.isOnline = true;        this.processSyncQueue();      });
      window.addEventListener('offline', () => {        this.isOnline = false;      });    }
    // Bridge aracılığıyla mobil ağ izleme    if (PlatformDetector.isMobile()) {      bridge.on('network.statusChanged', ({ isOnline }: { isOnline: boolean }) => {        this.isOnline = isOnline;        if (isOnline) {          this.processSyncQueue();        }      });    }  }
  async queueForSync(action: string, payload: any): Promise<void> {    const queueItem = {      id: this.generateId(),      action,      payload,      timestamp: Date.now(),      attempts: 0    };
    this.syncQueue.push(queueItem);    await this.saveQueueToStorage();
    // Online'sa hemen senkronize etmeye çalış    if (this.isOnline) {      this.processSyncQueue();    }  }
  private async processSyncQueue(): Promise<void> {    if (!this.isOnline || this.syncQueue.length === 0) {      return;    }
    const itemsToProcess = [...this.syncQueue];
    for (const item of itemsToProcess) {      try {        await this.syncItem(item);
        // Başarıda kuyruktan çıkar        this.syncQueue = this.syncQueue.filter(q => q.id !== item.id);
      } catch (error) {        console.error(`${item.action} için sync başarısız:`, error);
        item.attempts++;
        // Maksimum deneme aşılırsa çıkar        if (item.attempts >= this.maxRetries) {          console.error(`${item.action} için maksimum deneme aşıldı, kuyruktan çıkarılıyor`);          this.syncQueue = this.syncQueue.filter(q => q.id !== item.id);        }      }    }
    await this.saveQueueToStorage();  }
  private async syncItem(item: any): Promise<void> {    // Kuyruktaki eylemi sunucuya gönder    const response = await fetch('/api/sync', {      method: 'POST',      headers: {        'Content-Type': 'application/json',        'Authorization': `Bearer ${await this.getAuthToken()}`      },      body: JSON.stringify({        action: item.action,        payload: item.payload,        timestamp: item.timestamp      })    });
    if (!response.ok) {      throw new Error(`Sync başarısız: ${response.status}`);    }  }
  private async getAuthToken(): Promise<string> {    if (PlatformDetector.hasNativeBridge()) {      const { token } = await bridge.request('auth.getToken');      return token;    } else {      return localStorage.getItem('auth_token') || '';    }  }
  private async saveQueueToStorage(): Promise<void> {    const serialized = JSON.stringify(this.syncQueue);    await this.storage.setItem('sync_queue', serialized);  }
  private async loadQueueFromStorage(): Promise<void> {    try {      const serialized = await this.storage.getItem('sync_queue');      if (serialized) {        this.syncQueue = JSON.parse(serialized);      }    } catch (error) {      console.error('Sync kuyruğu yüklenemedi:', error);      this.syncQueue = [];    }  }
  private generateId(): string {    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;  }
  // Public API  isOnlineState(): boolean {    return this.isOnline;  }
  getPendingActions(): number {    return this.syncQueue.length;  }
  async forcSync(): Promise<void> {    await this.processSyncQueue();  }}

// Evrensel analitik sistemiclass UniversalAnalytics {  private sessionId: string;  private userId?: string;  private deviceInfo: DeviceInfo;  private performanceBuffer: PerformanceEntry[] = [];
  constructor() {    this.sessionId = this.generateSessionId();    this.deviceInfo = this.collectDeviceInfo();    this.setupPerformanceMonitoring();  }
  private collectDeviceInfo(): DeviceInfo {    const platform = PlatformDetector.platform;
    return {      platform,      userAgent: navigator.userAgent,      screenWidth: window.screen?.width || 0,      screenHeight: window.screen?.height || 0,      devicePixelRatio: window.devicePixelRatio || 1,      // Platform-specific bilgi      ...this.getPlatformSpecificInfo()    };  }
  private getPlatformSpecificInfo(): Partial<DeviceInfo> {    const platform = PlatformDetector.platform;
    if (PlatformDetector.isMobile()) {      // Native bridge'den cihaz bilgisi al      return {        deviceModel: 'mobile-device', // Bridge'den gelecek        osVersion: 'unknown', // Bridge'den gelecek        appVersion: '1.0.0' // Bridge'den gelecek      };    }
    return {      browserName: this.getBrowserName(),      browserVersion: this.getBrowserVersion()    };  }
  private setupPerformanceMonitoring(): void {    // Web Vitals'ı izle    this.observeWebVitals();
    // Özel performans metriklerini izle    this.observeCustomMetrics();
    // Platform-specific izleme    if (PlatformDetector.isMobile()) {      this.setupMobileMonitoring();    }  }
  private observeWebVitals(): void {    // Core Web Vitals    if ('PerformanceObserver' in window) {      const observer = new PerformanceObserver((list) => {        list.getEntries().forEach((entry) => {          this.trackPerformance(entry.name, entry.duration, {            type: entry.entryType,            startTime: entry.startTime          });        });      });
      try {        observer.observe({ entryTypes: ['measure', 'navigation', 'paint'] });      } catch (error) {        console.warn('Performance observer desteklenmiyor:', error);      }    }  }
  private observeCustomMetrics(): void {    // Micro frontend yükleme zamanlarını takip et    this.trackMicroFrontendLoads();
    // Bridge mesaj performansını takip et    this.trackBridgePerformance();
    // Bellek kullanımını takip et    this.trackMemoryUsage();  }
  private trackMicroFrontendLoads(): void {    // Micro frontend'ler ne zaman görünür hale geldiğini izle    const observer = new IntersectionObserver((entries) => {      entries.forEach((entry) => {        if (entry.isIntersecting) {          const loadTime = performance.now();
          this.track('micro_frontend_visible', {            microFrontendId: entry.target.id,            loadTime,            visibilityRatio: entry.intersectionRatio          });        }      });    });
    // Tüm micro frontend container'larını gözlemle    document.querySelectorAll('[data-micro-frontend]').forEach((element) => {      observer.observe(element);    });  }
  private trackBridgePerformance(): void {    // Performansı takip etmek için bridge request'lerini sarla    const originalRequest = bridge.request;
    bridge.request = async (action: string, payload: any) => {      const startTime = performance.now();
      try {        const result = await originalRequest.call(bridge, action, payload);        const duration = performance.now() - startTime;
        this.trackPerformance('bridge_request', duration, {          action,          success: true,          payloadSize: JSON.stringify(payload).length        });
        return result;      } catch (error) {        const duration = performance.now() - startTime;
        this.trackPerformance('bridge_request', duration, {          action,          success: false,          error: error.message        });
        throw error;      }    };  }
  private trackMemoryUsage(): void {    if ('memory' in performance) {      setInterval(() => {        const memInfo = (performance as any).memory;
        this.track('memory_usage', {          usedJSHeapSize: memInfo.usedJSHeapSize,          totalJSHeapSize: memInfo.totalJSHeapSize,          jsHeapSizeLimit: memInfo.jsHeapSizeLimit,          utilizationPercent: (memInfo.usedJSHeapSize / memInfo.jsHeapSizeLimit) * 100        });      }, 30000); // Her 30 saniye    }  }
  private setupMobileMonitoring(): void {    // Native bridge hatalarını takip et    bridge.on('error', (error: any) => {      this.track('bridge_error', {        error: error.message,        code: error.code,        platform: PlatformDetector.platform      });    });
    // Uygulama durum değişikliklerini takip et    bridge.on('app_state_change', (state: string) => {      this.track('app_state_change', {        state,        sessionDuration: Date.now() - this.getSessionStartTime()      });    });  }
  // Public API  track(event: string, properties: Record<string, any> = {}): void {    const eventData = {      event,      properties: {        ...properties,        sessionId: this.sessionId,        userId: this.userId,        platform: this.deviceInfo.platform,        timestamp: Date.now()      },      deviceInfo: this.deviceInfo    };
    // Analitik servisine gönder    this.sendAnalytics(eventData);  }
  trackPerformance(metric: string, value: number, properties: Record<string, any> = {}): void {    this.track('performance_metric', {      metric,      value,      ...properties    });  }
  setUserId(userId: string): void {    this.userId = userId;  }
  private async sendAnalytics(data: any): Promise<void> {    try {      // Güvenilir teslimat için offline manager kullan      await offlineManager.queueForSync('analytics', data);    } catch (error) {      console.error('Analitik gönderme başarısız:', error);    }  }
  private generateSessionId(): string {    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;  }
  private getSessionStartTime(): number {    return parseInt(this.sessionId.split('-')[0]);  }
  private getBrowserName(): string {    const userAgent = navigator.userAgent;    if (userAgent.includes('Chrome')) return 'Chrome';    if (userAgent.includes('Firefox')) return 'Firefox';    if (userAgent.includes('Safari')) return 'Safari';    if (userAgent.includes('Edge')) return 'Edge';    return 'Unknown';  }
  private getBrowserVersion(): string {    // Basitleştirilmiş versiyon tespiti    const userAgent = navigator.userAgent;    const match = userAgent.match(/(?:Chrome|Firefox|Safari|Edge)\/([0-9.]+)/);    return match ? match[1] : 'Unknown';  }}
interface DeviceInfo {  platform: Platform;  userAgent: string;  screenWidth: number;  screenHeight: number;  devicePixelRatio: number;  deviceModel?: string;  osVersion?: string;  appVersion?: string;  browserName?: string;  browserVersion?: string;}
interface PerformanceEntry {  name: string;  duration: number;  startTime: number;  type: string;}