Zak: Multi Purpose Mobile Web App template (PWA)

Açıklama

🏆 Zak – Çok Amaçlı Mobil Web Uygulaması Şablonu (PWA) | Duyarlı, Çevrimdışına Hazır, Yüklenebilir

SEO Anahtar Kelimeleri: PWA şablonu, mobil web uygulaması şablonu, aşamalı web uygulaması başlatıcı, Zak PWA, duyarlı HTML5 şablonu, çevrimdışı hizmet çalışanı, ana ekrana ekleme, GPL kaynak kodu

🚀 Genel Bakış

Zak – Çok Amaçlı Mobil Web Uygulaması (PWA), aşağıdakiler için tasarlanmış temiz, üretim odaklı bir Progresif Web Uygulaması şablonudur.
web teknolojileriyle kurulabilir, çevrimdışı özellikli mobil deneyimler oluşturmak. İster bir lansman başlatıyor olun
içerik uygulaması, mini e-Ticaret, rezervasyon akışı veya bir kontrol paneli ile Zak, duyarlı kullanıcı arayüzü blokları, rota iskelesi ve PWA ile birlikte gelir
sitenizin Android, iOS (Safari) ve masaüstü tarayıcılarda yerel bir uygulama gibi davranmasını sağlar.

Deneyim (E): Şehir rehberleri, mikro CRM'ler ve etkinlik uygulamaları gibi gerçek müşteri sunumlarından ilham alan Zak,
hızlı ilk boyama, çevrimdışı gezinme ve uygulama benzeri etkileşimler (açılış ekranı, ana ekran simgesi, tam ekran modu).
Bu, Lighthouse puanlarından veya erişilebilirliğinden ödün vermeden teslimatı hızlandırır.

✨ Temel Özellikler

📱 Yüklenebilir PWA: Simgeler, ad/kısa ad, tema/arka plan renkleri, bağımsız görüntüleme modu içeren Web Uygulaması Bildirimi.
🛰️ Çevrimdışı Destek: Ön önbellek + çalışma zamanı önbelleğe alma stratejilerine sahip üretim hizmeti çalışanı (Önce Önbellek / Ağ Önce).
⚡ Önce Performans: Geç yüklenen varlıklar, kod bölmeli satıcılar, görüntü optimizasyon kancaları, Lighthouse dostu varsayılanlar.
🎨 Mobil Öncelikli Kullanıcı Arayüzü: Karanlık/açık temalara sahip, dokunmaya hazır bileşenler (sekmeler, alt gezinme, kartlar, listeler, modeller, tostlar, formlar).
🧭 Yönlendirme: Sunucu rotalarına geri dönüş ile istemci tarafı navigasyonu; 404/Çevrimdışı sayfalar dahil.
🔔 Push-Ready: Etkileşim kampanyaları için isteğe bağlı Web Push standart metni (VAPID).
🌍 i18n ve RTL: Yerelleştirme yapısı, sayı/tarih biçimlendirmesi, RTL stil sayfası çeşidi.
🔐 Kimlik Doğrulama Taslakları: JWT/oturum kimlik doğrulaması, korumalı yollar ve rol bilinçli kullanıcı arayüzü durumları için hazır kancalar.
♿ Erişilebilirlik: Anlamsal HTML, ARIA yer işaretleri, odak durumları ve renk kontrastı açısından güvenli paletler.
🧩 Modüler Bölümler: Ana Sayfa, Profil, Özet Akışı, Katalog, Ürün, Ödeme, Ayarlar ve Yardım şablonları.
🛠️ Dev UX: Çalışırken yeniden yükleme dev sunucusu, ESLint/Prettier yapılandırması ve kaynak haritalarıyla üretim paketi.

⚙️ Teknik Yığın (Uzmanlık)

Çekirdek: HTML5, CSS3 (SCSS/Tailwind isteğe bağlı), JavaScript (ES2020+)
PWA: Web Uygulaması Bildirimi, Hizmet Çalışanı (Çalışma Kutusu veya özel), CacheStorage, IndexedDB kancaları
Oluşturma Araçları: Vite/Webpack, NPM/Yarn, PostCSS/Autoprefixer, Babel (eskiyi hedefliyorsa)
Kullanıcı Arayüzü Çerçevesi (isteğe bağlı): Vanilla CSS yardımcı programları veya Tailwind; Örneklere dahil edilen Bootstrap 5 çeşidi
API Katmanı: Yeniden deneme ve üstel geri alma yardımcı programlarıyla getirme/aksiyolar
Sunucu Gereksinimleri: Herhangi bir statik ana bilgisayar veya HTTPS'li Node/NGINX/Apache (PWA özellikleri için gereklidir)

🧩 Kurulum Kılavuzu

Klonla ve Yükle: bağımlılıkları getirmek için npm i (veya iplik).
Markalama: manifest.webmanifest'i (ad, renkler) düzenleyin ve /public/icons/ dosyasındaki simgeleri değiştirin.
Service Worker: Workbox-config.js dosyasında Workbox'ı yapılandırın (ön önbellek globları, çalışma zamanı kuralları).
Ortam: API temel URL'sini src/config.ts/.js dosyasında ayarlayın ve özellikleri değiştirin (push/i18n).
Run Dev: çalışırken yeniden yükleme için npm run dev; https://localhost:5173'ü açın (mkcert/HTTPS kullanın).
Derleyin ve Dağıtın: npm build'i çalıştırın → dist/'ı HTTPS barındırma hizmetine yükleyin veya sağlanan Docker/Nginx şablonunu kullanın.

📦 Teslimatlar

✅ Modüler sayfalar ve bileşenlerle tam PWA kaynağı (HTML/CSS/JS)
✅ manifest.webmanifest + simge seti (birden fazla boyut)
✅ Üretim hizmeti çalışanı (Çalışma kutusu/özel) + çevrimdışı/404 sayfa
✅ İşlem hattı (Vite/Webpack) ve Docker/Nginx örnek yapılandırması oluşturun
✅ ESLint/Prettier, i18n/RTL iskelesi ve örnek API katmanı
✅ Belgeler ve GPL v3 lisans dosyası

📱 Desteklenen Platformlar

Mobil Tarayıcılar: Android Chrome, Samsung Internet, iOS/ıpados Safari (A2HS desteklenir)
Masaüstü: Chrome, Edge, Firefox, Safari (Chromium tarayıcılara yüklenebilir)
Barındırma: Herhangi bir HTTPS ana bilgisayarı (Netlify, Vercel, S3+CloudFront, Nginx/Apache, Docker)

🧠 Notlar

Lisans: GPL v3 kapsamında dağıtılmaktadır; aynı koşullar altında kullanabilir, inceleyebilir, değiştirebilir ve yeniden dağıtabilirsiniz.
Özelleştirme İpuçları: Başsız CMS'ye (WP/Strapi) bağlanın, VAPID anahtarlarıyla Web Push'u etkinleştirin, API verileri için IndexedDB önbelleğe alma ekleyin ve CSS değişkenleri aracılığıyla tema ekleyin.
SEO Güvencesi: Anlamsal önemli noktalar (<header>, <main>, <nav>, <footer>), JSON-LD SoftwareSourceCode şeması ve taranabilir PWA'lar için ön oluşturma ipuçları.
Uyumluluk: HTTPS üzerinden sunum yapın, bir CSP ayarlayın, izleme durumunda çerez/izin bannerları sağlayın; iOS PWA'nın tuhaflıklarına saygı gösterin (splash meta, görünüm uyumu).

👨‍💻 Orijinal Geliştirici Kredisi (Yetkililik)

Bu liste orijinal ticari yazara atıfta bulunmaktadır. Lütfen onları pazar profillerinde destekleyin:
CodeCanyon – Orijinal Yazar.

🔒 Sorumluluk reddi beyanı (Güvenilirlik)

Bu kaynak, eğitim amaçlı ve yasal olarak yeniden kullanım amacıyla GPL v3 lisansı altında yeniden dağıtılmaktadır. Orijinal satıcıya bağlı değiliz.
Herhangi bir üçüncü taraf varlığının (simgeler, yazı tipleri, resimler) haklarına sahip olduğunuzdan/doğruladığınızdan emin olun. Her zaman HTTPS üzerinden dağıtım yapın, hizmet çalışanınızın önbelleğe alma kurallarınızı denetleyin,
ve yayına geçmeden önce erişilebilirliği doğrulayın.

Son Güncelleme: 5 Kasım 2025 • Tür: garantilisans.com için GPL Kaynak Kodu Açıklaması