Technical Documentation: Low Price Dito PWA v5.0.0 Architecture

1. Core Architectural Paradigm & Pedigree

The core philosophy of the Individuation codebase is absolute dependency elimination. By building exclusively on a vanilla stack, the application removes the overhead, security vectors, and layout-shifting penalties associated with modern third-party frameworks.

• Zero-Dependency Stack: Combined custom PHP backend, native server-side caching, and browser-native Service Worker proxies. No third-party plugins, scripts, or external libraries are permitted in the application shell.
• Architectural Pedigree: PWA v5.0.0 is rooted directly in the proven framework of its sister wholesale platform, wholesaledito.store (currently running PWA v4.1.5). Developed iteratively by Clickerwayne, v5.0.0 advances the core architecture by decoupling runtime payloads from static assets and introducing automated client-side document compilation.

2. Caching and Storage Schema

To isolate application concerns and prevent client-side data corruption, the storage layer is strictly partitioned across three isolated Cache Storage API buckets and three dedicated IndexedDB databases.

Cache Storage API (Assets & Document Payloads)

• lowpricedito-v5.0.0 (Static Cache): Permanently retains the critical application shell assets required for boot. This includes the root path, /offline.html, the Web App Manifest (/manifest.json), minified global stylesheets, primary scripts, and identity branding.
• lowpricedito-runtime-v5.0.0 (Runtime Cache): Caches ad-hoc UI graphics, standard navigation payloads, and transactional API responses. To safeguard user device storage, this bucket enforces a strict resource cap of 1,000 images (MAX_IMAGES_CACHE).
• lowpricedito-product-html-v5.0.0 (Product HTML Cache): An isolated cache zone exclusively reserved for fully rendered product pages. Cached markup is constrained by a strict lifecycle policy, expiring precisely 7 days from entry (PRODUCT_HTML_MAX_AGE).

IndexedDB (Structured Offline Storage)

• lowpricedito-api-v5.0.0: Houses the responses object store. Serves as the immutable fallback repository for raw JSON data fetched via API transactions.
• lowpricedito-catalog-v5.0.0: Houses the products object store. Holds structured, indexed product details parsed out during background catalog synchronizations.
• lowpricedito-meta-v5.0.0: Houses the meta object store. Dedicated exclusively to recording localized app performance metrics and telemetry states.

3. Request Processing and Routing Strategies

Every inbound HTTP GET request originating within the application scope is intercepted by the Service Worker's fetch lifecycle event. Requests are routed dynamically through dedicated evaluation strategies:

4. Dynamic Offline Product Rendering Engine

When a user requests a product page without an active network connection, and the pre-rendered HTML is missing from the lowpricedito-product-html-v5.0.0 bucket, the Service Worker bypasses the network completely to compile the page layout programmatically.

The script extracts the unique product URL slug from the request path, queries the products store inside the lowpricedito-catalog-v5.0.0 IndexedDB instance using the slug as the key, and compiles an HTML5 document in the worker thread via the following structural operations:

• Banner Injection: Prepends a top-anchored warning banner directly into the viewport markup: ⚡ Offline Mode - Showing Cached Details.
• Currency Formatting: Parses numerical pricing properties using parseFloat().toFixed(2) and prefixes the values with the Philippine Peso symbol (₱).
• Inventory State Processing: Evaluates live stock values to render localized, color-coded status elements:
  • Quantities greater than 10: Renders an In Stock success badge.
  • Quantities from 1 to 10: Renders a Low Stock warning badge.
  • Quantities at 0: Renders an Out of Stock danger badge.
• Deterministic Image Mapping: Reconstructs the image path pointing to localized backend directory structures matching the precise format: /img/webp/products/[slug]-small-[id]-2.webp.
• State and Checkout Mutated Guardrails: To protect transactional consistency and prevent offline checkout failures, the script locates purchasing elements and overwrites their classes to btn btn-secondary disabled, explicitly appending the HTML disabled attribute.

5. Background Catalog Synchronization (syncCatalog)

The offline-first product database is maintained through an automated synchronization process designed to minimize main-thread execution costs and protect server resources. The sync process operates inside a strict 10-minute throttle window.

1. Service Worker Trigger:Throttled every 10 mins. The service worker checks the throttle timestamp before establishing a network channel.
2. Targeted Data Fetch:9-Second Network Timeout. The worker calls /offline-catalog.php. If the network fails to resolve within 9 seconds, the request is aborted immediately to preserve device resources.
3. Payload Slicing:Memory Cap Optimization. The incoming data payload is immediately sliced, strictly limiting processing to a maximum of 2,000 high-priority records.
4. Non-Blocking Batch Commits:Batches of 20 - 10ms Intermission. Data is committed to the lowpricedito-catalog-v5.0.0 IndexedDB store in small batches of 20 products. The thread sleeps for 10ms between batches to keep the client UI fluid.
5. Critical Path Pre-Caching:Top 20 Priority Items. The routine isolates the top 20 high-priority products from the batch and downloads their complete HTML structures directly into the lowpricedito-product-html-v5.0.0 cache bucket.

6. System Telemetry and Memory Optimization

Real-time application health is monitored locally through an in-memory telemetry array tracking cache hits, cache misses, offline replacements, image fallbacks, and API transaction failures.

To completely prevent garbage collection overhead and rendering stutters during active user interactions, telemetry commits are buffered. The system marks telemetry states as dirty and flushes them to the lowpricedito-meta-v5.0.0 IndexedDB store only when the TELEMETRY_BATCH_INTERVAL (10-second delayed timeout) is achieved without active UI updates.

Old assets and deprecated application schemas are cleanly pruned during the Service Worker's activation event, matching major/minor build signatures to completely eliminate storage fragmentation.