Astro PWA Template (Svelte + Tailwind + DaisyUI)

This is a production-ready starter template for building Progressive Web Apps (PWA) using Astro. It combines the performance of Astro with the interactivity of Svelte, styled with Tailwind CSS v4 and DaisyUI.

🚀 Tech Stack

• Framework: Astro
• UI Library: Svelte
• Styling: Tailwind CSS
• Components: DaisyUI
• PWA: Vite Plugin PWA
• Routing: Astro View Transitions

✨ Features

• 💯 Lighthouse Score: Optimized for speed and SEO.
• 📱 Installable: Fully configured manifest.webmanifest and Service Worker.
• 🔄 Auto-Update: Includes a DaisyUI "New Version Available" toast prompt.
• ⚡ View Transitions: Native app-like navigation animations.
• 🎨 Theming: Tailwind + DaisyUI plugin setup in global.css.

🛠️ Prerequisites

• Node.js v18.14.1+
• npm

📦 Start Develop

1. Clone the repository: Click the Use this template button in the GitHub repo page.
   Then choose Create a new repository.

2. Install dependencies:
   In the repo you create:

   npm install

3. Start dev server

   npm run dev

🧞 Commands

Command	Action
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally
npm run astro ...	Run CLI commands like astro add

✅ Develop Tips

Tip

You must add your icons to the public/ folder for the PWA to be installable:

• public/pwa-192x192.png
• public/pwa-512x512.png
• public/favicon.svg

Tip

The Reload prompt usually does not show up in npm run dev mode because the service worker behavior is different in development.

• you should build the project by: npm run build
• Then preview the build: npm run preview
• Open the preview URL (usually localhost:4321) in your browser.
• Go to your code and make a small visible change, then run npm run build again.
• Go back to the localhost:4321 page and refresh manually once.
• The Service Worker will detect the new hash in the background, and the Toast should pop up asking you to "Reload" to apply the new version.

Tip

For DaisyUI theme setup and advanced theme config, please refer to the official docs: https://daisyui.com/docs/themes/

📂 Project Structure

/
├── public/
│   ├── pwa-192x192.png      # Required for PWA
│   ├── pwa-512x512.png      # Required for PWA
│   └── manifest.webmanifest # Auto-generated by build
├── src/
│   ├── components/
│   │   ├── ReloadPrompt.svelte  # PWA Update Toast
│   │   └── Counter.svelte       # Example Svelte Component
│   ├── layouts/
│   │   └── Layout.astro         # Contains <ClientRouter> & PWA Logic
│   ├── pages/
│   │   └── index.astro          # Main Entry
│   └── styles/
│       └── global.css           # Tailwind @import & DaisyUI @plugin
├── astro.config.mjs             # Vite PWA & Tailwind Config
└── package.json