🎵 Muzibu Offline Playback Sistemi

İnternet Kesintisinde Kesintisiz Müzik Deneyimi

Analiz Tarihi
17 Aralık 2025
Platform
Muzibu.com.tr
Mevcut Sistem
Şifreli HLS Streaming
Hedef
24 Saat Offline Cache

📝 Basit Anlatım (Herkes İçin)

Ne İstiyoruz?
Kullanıcılar Muzibu'da müzik dinlerken internet bağlantısı kesilirse, bir gün boyunca kesintisiz dinlemeye devam edebilsin.

Nasıl Çalışacak?
Kullanıcı müzik dinlerken, şarkılar arka planda bilgisayarına indirilecek (şifreli olarak). İnternet kesildiğinde, sistem otomatik olarak bilgisayardaki kopyadan çalmaya devam edecek.

Kullanıcı Fark Eder Mi?
Hayır! Kullanıcı hiçbir şey yapmayacak. Sistem tamamen arka planda çalışacak. İnternet varken online, yokken offline çalacak - otomatik geçiş.

💡 Örnek Senaryo:

  • 1️⃣ Kullanıcı evde WiFi ile albüm dinliyor → Şarkılar arka planda bilgisayara kaydediliyor (şifreli)
  • 2️⃣ Elektrik kesildi, WiFi gitti → Sistem otomatik olarak bilgisayardaki kopyadan çalmaya başladı
  • 3️⃣ Kullanıcı hiçbir şey fark etmeden dinlemeye devam ediyor - 24 saat boyunca kesintisiz!
  • 4️⃣ İnternet gelince sistem otomatik online moda döndü, yeni şarkılar indirmeye başladı

🔐 Güvenlik:

Müzikler bilgisayara şifreli olarak kaydedilir. Kullanıcı dosyaları bulamaz, kopyalayamaz. Premium üyelik bitince otomatik silinir. Sistem tamamen güvenli ve telif haklarını korur.

🔍 Mevcut Sistem Analizi

Zaten Var

  • HLS Streaming: Müzikler segment segment akıyor (playlist.m3u8)
  • AES-128 Şifreleme: Her şarkının encryption_key ve encryption_iv var
  • Key Serving: /api/muzibu/songs/{id}/key endpoint çalışıyor
  • Signed URLs: 60 dakika geçerli imzalı URL sistemi
  • Premium Check: isPremiumOrTrial() kontrolü var

Eksik Olan

  • Offline Cache: HLS segmentleri bilgisayara kaydedilmiyor
  • Service Worker: Offline fallback mekanizması yok
  • Encrypted Storage: Şifreli lokal depolama sistemi yok
  • Cache Management: 24 saatlik TTL, otomatik temizleme yok
  • Offline UI: Kullanıcıya offline mod göstergesi yok

🎯 4 Farklı Implementation Yaklaşımı

1️⃣ Progressive Web App (PWA) + Service Worker

✨ ÖNERİLEN

Mevcut web uygulamasına Service Worker ekleyerek offline cache sistemi kuruyoruz. En hızlı, en kolay ve en uyumlu çözüm.

✅ Artıları:

  • PRO Mevcut sisteme entegre (1-2 gün)
  • PRO Tüm browser'larda çalışır (Chrome, Firefox, Safari)
  • PRO Mobil + Desktop + Tablet uyumlu
  • PRO Cache API + IndexedDB güçlü depolama (GB'larca)
  • PRO Native install özelliği (masaüstü ikonu)
  • PRO Otomatik güncelleme (yeni versiyon yayınlayınca)
  • PRO Background sync (internet gelince senkronize)

❌ Eksileri:

  • CON Browser quota limitleri var (genelde 10-50GB)
  • CON Safari'de bazı kısıtlamalar olabilir (iOS 11.3+)
  • CON HTTPS zorunlu (zaten var)

🔧 Teknik Detaylar:

Service Worker: public/sw.js
Manifest: public/manifest.json
Cache Storage: Cache API (HLS segments)
Metadata: IndexedDB (song info, keys)

💻 Nasıl Kullanılır?

  • 1️⃣ Kullanıcı normal şekilde muzibu.com'yi ziyaret eder (browser)
  • 2️⃣ İlk girişte tarayıcı sorar: "Uygulamayı yüklemek ister misiniz?" (PWA install)
  • 3️⃣ Kullanıcı "Evet" derse → Masaüstünde uygulama ikonu oluşur
  • 4️⃣ Artık hem browser'dan hem ikona tıklayarak açabilir

2️⃣ Electron Desktop Application

DESKTOP

Ayrı bir masaüstü uygulaması geliştiriyoruz (Windows/Mac/Linux). Native kontrol ve güvenlik için en iyi çözüm.

✅ Artıları:

  • PRO Native dosya sistemi erişimi (tam kontrol)
  • PRO Sınırsız depolama (disk boyutu kadar)
  • PRO Node.js entegrasyonu (crypto, ffmpeg vb.)
  • PRO Background process (sistem tepsisi)
  • PRO Otomatik başlatma (PC açılınca)
  • PRO DRM desteği (Widevine)

❌ Eksileri:

  • CON Ayrı uygulama geliştirilmeli (4-6 hafta)
  • CON İndirme + kurulum gerekli (kullanıcı eylemi)
  • CON Windows/Mac/Linux için ayrı build
  • CON Uygulama boyutu büyük (~100MB)
  • CON Güncelleme mekanizması gerekli
  • CON Mobil için çalışmaz

🔧 Teknik Detaylar:

Framework: Electron.js (Chromium + Node.js)
Frontend: Mevcut Muzibu arayüzü (embed)
Storage: SQLite + encrypted file system
Distribution: Auto-updater (electron-updater)

3️⃣ Browser Extension (Chrome/Firefox)

EXTENSION

Chrome Web Store veya Firefox Add-ons'a extension yayınlıyoruz. Kullanıcı tarayıcıya kuruyor, arka planda çalışıyor.

✅ Artıları:

  • PRO Browser içinden yükleme (kolay)
  • PRO Background script çalışır (devamlı)
  • PRO Chrome + Firefox desteği
  • PRO Otomatik güncelleme (store)

❌ Eksileri:

  • CON Extension yükleme gerekli (kullanıcı eylemi)
  • CON Chrome/Firefox izin politikaları (kısıtlı)
  • CON Store onay süreci (1-2 hafta)
  • CON Depolama limiti (~10GB)
  • CON Safari/Edge için ayrı geliştirme

4️⃣ Hybrid (PWA + Capacitor)

CROSS-PLATFORM

PWA olarak başlayıp, Capacitor ile native iOS/Android/Desktop uygulamasına dönüştürüyoruz. Her platforma dağıtım için en iyi çözüm.

✅ Artıları:

  • PRO Tek kod tabanı → Web + iOS + Android + Desktop
  • PRO PWA olarak başla → Sonra native ekle
  • PRO Native plugin desteği (file system, background)
  • PRO App Store + Google Play dağıtımı

❌ Eksileri:

  • CON Daha kompleks setup (Capacitor + native tools)
  • CON Store onay süreci (iOS: 1-2 hafta, Android: 1-2 gün)
  • CON iOS için Mac + Xcode gerekli

📊 Karar Matrisi - Hangi Yaklaşımı Seçmeli?

Kriter PWA + SW
(ÖNERİLEN)
Electron
Desktop
Browser
Extension
Hybrid
Capacitor
Geliştirme Süresi 1-2 gün 4-6 hafta 2-3 hafta 3-4 hafta
Kullanıcı Deneyimi Mükemmel Mükemmel İyi Mükemmel
Platform Desteği Web/Mobile/Desktop Sadece Desktop Sadece Browser Tümü
Kurulum Gerekli Mi? İsteğe bağlı Evet (zorunlu) Evet (zorunlu) Store'dan
Depolama Limiti 10-50GB Sınırsız ~10GB Yüksek
Güvenlik Yüksek Çok Yüksek Orta Yüksek
Maliyet Düşük Yüksek Orta Orta-Yüksek
TOPLAM PUAN ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐

🎯 Öneri:

PWA + Service Worker ile başlayın. Hızlı implement edilir, tüm platformlarda çalışır, kullanıcı deneyimi mükemmel. İlerde ihtiyaç olursa Electron veya Capacitor'a geçiş yapabilirsiniz (aynı kod tabanını kullanarak).

🔐 Güvenlik & Şifreleme Stratejisi

⚠️ Kritik Güvenlik Gereksinimleri:

  • 🔒 DRM Koruması: Kullanıcı cache'lenmiş dosyaları kopyalayıp paylaşamaz
  • 🔒 Premium Kontrolü: Üyelik bitince cache otomatik silinir
  • 🔒 Cihaz Limiti: Aynı anda max X cihazda offline oynatma
  • 🔒 TTL Kontrolü: 24 saat sonra cache refresh zorunlu

🔑 Mevcut Şifreleme (HLS):

Method: AES-128-CBC
Key Storage: songs.encryption_key
IV Storage: songs.encryption_iv
Key Serving: /api/muzibu/songs/{id}/key

🆕 Offline Cache Şifreleme:

Method: Web Crypto API
Key Derivation: PBKDF2 (user_id + device_id)
Storage: IndexedDB (encrypted blobs)
Access Control: isPremiumOrTrial() check

🛡️ Offline Cache Güvenlik Akışı:

  1. 1️⃣ Kullanıcı şarkı oynatır → Service Worker HLS segmentlerini yakalar
  2. 2️⃣ Her segment Web Crypto API ile tekrar şifrelenir (double encryption)
  3. 3️⃣ Şifreli segment IndexedDB'ye kaydedilir (binary blob)
  4. 4️⃣ Metadata (song_id, cached_at, expires_at) ayrı tabloda saklanır
  5. 5️⃣ Offline oynatmada: Cache'ten çekilen segment önce decrypt edilir → HLS.js'e verilir
  6. 6️⃣ HLS.js kendi encryption key'i ile tekrar decrypt eder (original AES-128)
  7. 🚫 Premium biterse: Service Worker tüm cache'i otomatik siler (cleanup job)

🚀 Implementation Plan (PWA + Service Worker)

1

Service Worker Setup

~2 saat
  • public/sw.js dosyası oluştur
  • • Install, activate, fetch event listeners ekle
  • • Layout'a service worker registration script ekle
  • public/manifest.json oluştur (PWA metadata)
2

Cache Strategy Implementation

~4 saat
  • • HLS segment'leri için Cache-First stratejisi
  • • Playlist (.m3u8) için Network-First stratejisi
  • • Encryption key'leri için Cache-First stratejisi
  • • API response'ları için Network-First + Cache Fallback
3

IndexedDB Schema

~3 saat
  • muzibu_cache database oluştur
  • songs object store (metadata)
  • segments object store (binary blobs)
  • keys object store (encryption keys)
  • • TTL (expires_at) index ekle
4

Encryption Layer (Web Crypto API)

~4 saat
  • • User-specific encryption key generate et (PBKDF2)
  • • Segment cache'leme sırasında encrypt fonksiyonu
  • • Segment okuma sırasında decrypt fonksiyonu
  • • Key rotation mekanizması (24 saatte bir)
5

Premium & TTL Management

~3 saat
  • • Cache'leme sırasında isPremiumOrTrial() kontrolü
  • • Her cache item'a expires_at = now() + 24h ekle
  • • Background sync: Her saat expired items'ları temizle
  • • Premium bitişte: clearAllCache() event listener
6

Offline UI Indicators

~2 saat
  • • Online/offline status badge (header'da)
  • • Cached songs badge (şarkı listesinde yeşil işaret)
  • • Cache progress indicator (indirme sırasında)
  • • Toast notification: "Offline moda geçildi"
7

Testing & Debugging

~4 saat
  • • Chrome DevTools → Application → Service Workers test
  • • Offline checkbox ile gerçek offline test
  • • IndexedDB storage test (boyut, TTL)
  • • Premium/trial senaryoları test et

⏱️ Toplam Tahmini Süre:

~22 saat (yaklaşık 3 iş günü - tek developer)

🔧 Teknik Detaylar (Geliştiriciler İçin)

📁 Dosya Yapısı:

public/
├── sw.js                          # Service Worker (cache logic)
├── manifest.json                  # PWA manifest
└── js/
    └── sw-register.js             # SW registration script

resources/views/themes/muzibu/layouts/
└── app.blade.php                  # SW registration eklenecek

Modules/Muzibu/app/Services/
└── CacheService.php               # Backend cache management (yeni)

database/migrations/
└── muzibu_cache_analytics.php    # Cache analytics table (isteğe bağlı)

🗄️ IndexedDB Schema:

// Database: muzibu_cache
// Version: 1

// Object Store: songs
{
  song_id: number (keyPath),
  title: string,
  artist: string,
  album_id: number,
  cached_at: timestamp,
  expires_at: timestamp,
  size_bytes: number,
  segment_count: number
}

// Object Store: segments
{
  id: string (keyPath, format: "songId_segmentIndex"),
  song_id: number (index),
  segment_index: number,
  encrypted_blob: ArrayBuffer,
  cached_at: timestamp
}

// Object Store: keys
{
  song_id: number (keyPath),
  encryption_key: string (base64),
  iv: string (base64),
  cached_at: timestamp
}

⚙️ Service Worker Cache Stratejileri:

HLS Segments (.ts dosyaları): Cache-First

→ Önce cache'e bak, yoksa network'ten çek ve cache'le

Playlist (.m3u8 dosyaları): Network-First

→ Network'ten çek, offline ise cache'ten döndür

Encryption Keys (/api/.../key): Cache-First

→ Key'ler değişmez, aggressive cache

API Calls (/api/muzibu/*): Network-First + Stale-While-Revalidate

→ Cache'ten döndür ama arka planda güncelle

🔐 Web Crypto API Kullanımı:

// Encryption key generation (user + device specific)
const keyMaterial = await crypto.subtle.importKey(
  'raw',
  new TextEncoder().encode(userId + deviceId + salt),
  { name: 'PBKDF2' },
  false,
  ['deriveBits', 'deriveKey']
);

const encryptionKey = await crypto.subtle.deriveKey(
  { name: 'PBKDF2', salt: saltBuffer, iterations: 100000, hash: 'SHA-256' },
  keyMaterial,
  { name: 'AES-GCM', length: 256 },
  false,
  ['encrypt', 'decrypt']
);

// Segment encryption
const encryptedSegment = await crypto.subtle.encrypt(
  { name: 'AES-GCM', iv: ivBuffer },
  encryptionKey,
  segmentArrayBuffer
);

// Segment decryption (offline playback)
const decryptedSegment = await crypto.subtle.decrypt(
  { name: 'AES-GCM', iv: ivBuffer },
  encryptionKey,
  encryptedSegmentArrayBuffer
);

📊 İlgili Mevcut Dosyalar:

  • Modules/Muzibu/app/Http/Controllers/Api/SongStreamController.php

    → stream(), serveKey() fonksiyonları

  • Modules/Muzibu/app/Models/Song.php

    → encryption_key, encryption_iv fields

  • public/themes/muzibu/js/player/core/player-core.js

    → HLS.js implementation (44KB, büyük dosya)

  • App/Services/SignedUrlService.php

    → generateHlsUrl(), generateStreamUrl() (60 dk TTL)

🎯 Sonraki Adımlar - Karar Zamanı!

Bu raporda 4 farklı yaklaşım analiz ettik. Şimdi hangi yaklaşımla ilerleyeceğimize karar verme zamanı:

✅ Hızlı Başlangıç İstiyorsanız:

PWA + Service Worker ile başlayın. 1-2 gün içinde çalışır hale gelir, tüm platformlarda kullanılabilir.

🎯 Maksimum Kontrol İstiyorsanız:

Electron Desktop App geliştirin. Native kontrol, sınırsız depolama, gelişmiş güvenlik.

📱 Cross-Platform İstiyorsanız:

Hybrid (Capacitor) ile başlayın. Web + iOS + Android + Desktop tek kod tabanı.

🔧 Basit Extension İstiyorsanız:

Browser Extension geliştirin. Chrome/Firefox için hızlı çözüm.

💬 Bana Söyleyin:

  • • Hangi yaklaşımı tercih ediyorsunuz?
  • • Offline modu hangi cihazlarda kullanmak istiyorsunuz? (Desktop / Mobile / Her ikisi)
  • • Cache limiti ne olsun? (10GB / 50GB / Sınırsız)
  • • Offline cache süresi 24 saat uygun mu?

Karar verdiğinizde, hemen Implementation Plan hazırlayıp geliştirmeye başlayabiliriz! 🚀

🤖 Generated with Claude AI - Muzibu Offline Playback Analysis

Rapor Versiyonu: v1 | Tarih: 17 Aralık 2025