🏆 Zak – Multi-Purpose Mobile Web App Template (PWA) | Responsive, Offline-Ready, Installable
SEO Keywords: PWA template, mobile web app template, progressive web app starter, Zak PWA, responsive HTML5 template, service worker offline, add to home screen, GPL source code
🚀 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)
👨💻 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.
Değerlendirmeler
Henüz değerlendirme yapılmadı.