PWA + Shared Systems
PWA & Mobile-Exclusive Features
Service Worker offline caching, installable PWA, bottom navigation bar, haptic feedback, splash screen, update notifier, and restricted admin security integration.
এই section-এ mobile-exclusive system গুলো আছে — PWA install, haptic feedback, bottom nav, offline cache, এবং restricted admin security integration।
mobile/shared/ + Optimization/
Service Worker
PWA Install
Haptic API
Offline System
Service Worker Cache
Mobile-এ internet না থাকলেও website পুরোপুরি কাজ করে। Service Worker সব assets cache করে রাখে।
Install Event
All HTML, CSS, JS, images, fonts, JSON — cache-first strategy। App shell cached।
Fetch Event
Network request → cache hit? Serve instantly। Miss? Fetch network → cache → serve।
Activate Event
Old cache version purge। CACHE_VERSION bump করলে auto-update।
| File | Role |
|---|
mobile/service-worker.js | Mobile SW — caches all mobile pages + shared assets |
Optimization/service-worker.js | Desktop SW — caches desktop pages + optimization assets |
mobile/pwa-init.js | Registers SW, listens for updates, triggers notifier |
Optimization/pwa-init.js | Desktop version of same init script |
mobile/manifest.json | PWA manifest — app name, icon, theme_color, display: standalone |
Optimization/update-notifier.js | Shows "Update available" toast when new SW version detected |
Navigation
Bottom Navigation Bar
Mobile-এ top navbar নেই — সব navigation নিচে। Thumb-zone-এ থাকায় one-hand use সহজ।
page content
Home
About
Projects
Content
Contact
Thumb Zone Design
Bottom nav always visible. position: fixed; bottom: 0. 60px height. Safe area inset for iPhone notch: padding-bottom: env(safe-area-inset-bottom).
Bottom fixed। iPhone-এ notch safe area automatically handle হয়।
Active State
Current page item highlighted red. JS reads window.location.pathname → adds .active class to matching nav item on page load.
Current page icon লাল হয়। Auto-detect করে pathname থেকে।
Touch Feedback
Haptic Feedback
Button tap করলে ফোন vibrate করে — physical feedback। Android-এ কাজ করে, iPhone-এ না।
function haptic(type = 'light') {
if (!navigator.vibrate) return;
const patterns = {
light: [20], medium: [40], heavy: [80],
success: [30, 20, 30], error: [80, 40, 80]
};
navigator.vibrate(patterns[type]);
}
Admin Security
Restricted Admin Access
Admin access trigger and routing logic are intentionally redacted in public guide. Only trusted internal documentation includes operational details.
Restricted Trigger Policy
Trigger thresholds, internal pathing, and response logic are deliberately withheld from public-facing documentation to reduce traceability and attack surface.
Installation
PWA Install Prompt
Website-কে phone-এর home screen-এ app হিসেবে install করা যায়।
Install Banner
On first visit: beforeinstallprompt event captured → custom banner shown after 3s. "Install App" button triggers native install dialog.
Custom install banner নিজে design করা। Browser-এর default prompt-এর বদলে।
Standalone Mode
After install: display: standalone in manifest. No browser chrome. Status bar matches theme_color: #000000. Splash screen auto-generated from manifest icons.
Install হলে full app feel। Browser bar নেই, splash screen আছে।
Update Notifier
New SW version detected → toast: "New version available — Tap to update". Tap → skipWaiting() → page reload with latest assets.
Website update হলে notification দেখায়। Tap করলে auto refresh।
Offline Fallback
No internet → all cached pages still work. Dynamic content (JSON) shows last-fetched data. Offline indicator badge shown in nav.
Offline হলেও সব page দেখা যায়। Last cached data show করে।
All Mobile Pages Complete
Mobile guide-এর সব ৬টি section শেষ হয়েছে — Home, About, Projects, Content Studio, Contact, এবং PWA & Shared Systems। Desktop guide-এর সব ৭টি page-ও complete।
Mobile Guide — Complete
A3KM Studio-র সব desktop এবং mobile pages-এর visual guide তৈরি হয়েছে। Desktop Guide-এ যেতে নিচের বোতাম ব্যবহার করুন।