Astro PWA Scaffolding Implementation

This document logs the scaffolding of the offline-capable Astro web application and IndexedDB database setup.

Implementation Steps

The Astro frontend application was initialized inside the new app/ directory:

1. Workspace Scaffolding

• Initialized package configuration in package.json.
• Installed astro, @vite-pwa/astro, and dexie dev dependencies.
• Added typecheck tools (@astrojs/check and typescript) for validation.

2. Service Worker Setup

Created astro.config.mjs configuring the PWA integration:

• registerType: Set to 'autoUpdate'.
• workbox.globPatterns: Set to ['**/*.{js,css,html,ico,png,svg}'] to aggressively cache static shell resources.
• Manifest: Created a full manifest file outlining application icons, theme colors, and standalone display configurations.

3. Client Storage Layer (IndexedDB)

Created db.ts using Dexie.js to declare schemas mirroring the backend data contracts:

this.version(1).stores({
  festivals: 'id, name',
  stages: 'id, festival_id, name',
  bands: 'id, stage_id, name',
  user_routes: 'id, band_id, sync_status',
});

4. Application Shell

Created the main entry page index.astro:

• Injected PWA worker registration logic via virtual:pwa-register.
• Included client-side connection status indicators and initialization scripts to verify IndexedDB connection loads.

---

Build Verification

• Syncing: Ran npx astro sync to successfully generate all schema type collections.
• Compilation: Ran npx astro build which successfully bundled the app shell and registered the offline service workers into static distribution folders.