Dioxus PWA Development

Dioxus PWA Development

Overview

Dioxus is a React-like UI framework for Rust that compiles to WebAssembly. This skill covers building Progressive Web Apps (PWAs) with Dioxus, including component development, state management, and PWA configuration.

Core Concepts

Dioxus Framework

Dioxus provides a React-like component system for Rust:

• Components: Reusable UI building blocks
• Signals: Reactive state management with use_signal()
• Event Handlers: User interaction handling
• RSX: JSX-like syntax for UI definition

PWA Features

Progressive Web Apps include:

• Manifest: App metadata and installation configuration
• Service Worker: Offline support and caching
• Responsive Design: Mobile-first approach
• Installability: Users can install as native apps

Component Development

Basic Component Pattern

use dioxus::prelude::*;

#[component]
fn App() -> Element {
    let mut count = use_signal(|| 0);
    
    rsx! {
        div {
            h1 { "Count: {count()}" }
            button {
                onclick: move |_| count.set(count() + 1),
                "Increment"
            }
        }
    }
}

Component with Props

#[component]
fn ReminderCard(
    reminder: Reminder,
    on_toggle: EventHandler<String>,
    on_delete: EventHandler<String>,
) -> Element {
    rsx! {
        div {
            class: "reminder-card",
            h3 { "{reminder.title}" }
            button {
                onclick: move |_| on_toggle.call(reminder.id.clone()),
                "Toggle"
            }
        }
    }
}

State Management

Signal Usage

// Initialize signal
let mut reminders = use_signal(|| load_reminders());

// Read signal
let current = reminders();

// Update signal
reminders.set(new_reminders);

Event Handlers

// Inline handler
onclick: move |_| {
    reminders.set(new_reminders);
}

// Handler with parameter
onclick: move |e| {
    title.set(e.value())
}

Conditional and List Rendering

Conditional Rendering

rsx! {
    if show_form() {
        AddReminderForm { on_add: move |r| { /​* ... */ } }
    }
    
    if reminders().is_empty() {
        div { "No reminders yet" }
    }
}

List Rendering

rsx! {
    for reminder in reminders().iter().filter(|r| !r.completed) {
        ReminderCard {
            reminder: reminder.clone(),
            on_toggle: move |id| { /​* ... */ },
        }
    }
}

PWA Configuration

Manifest.json

{
  "name": "Remind Me PWA",
  "short_name": "RemindMe",
  "start_url": "/​remind-me-pwa/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/​remind-me-pwa/​assets/​icon-192.png",
      "sizes": "192x192",
      "type": "image/​png"
    }
  ]
}

Service Worker

Basic service worker for caching:

const CACHE_NAME = 'remind-me-pwa-v1';
const urlsToCache = [
  '/​remind-me-pwa/',
  '/​remind-me-pwa/​index.html',
  '/​remind-me-pwa/​assets/​style.css'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

Dioxus.toml Configuration

[web.app]
base_path = "/​remind-me-pwa"  # For GitHub Pages deployment

[web.pwa]
enabled = true
manifest = "assets/​manifest.json"
service_worker = "assets/​sw.js"

Build and Deployment

Development

# Install Dioxus CLI
cargo install dioxus-cli --locked

# Start development server
dx serve

Production Build

# Build for production
dx build --release --platform web

# Output in target/​dx/​{package}/​release/​web/​public

GitHub Pages Deployment

1. Set base_path in Dioxus.toml
2. Build output to docs/ directory
3. Configure GitHub Pages to serve from docs/
4. Create 404.html for client-side routing

Best Practices

DO:

• ✅ Use use_signal() for reactive state
• ✅ Keep components small and focused
• ✅ Use EventHandler for parent-child communication
• ✅ Configure PWA manifest properly
• ✅ Test offline functionality
• ✅ Use base_path for subdirectory deployment

DON'T:

• ❌ Don't mutate state directly (use .set())
• ❌ Don't create signals in render loops
• ❌ Don't skip PWA configuration
• ❌ Don't hardcode paths (use base_path)
• ❌ Don't forget to update cache versions

Common Patterns

Form Input Pattern

#[component]
fn AddReminderForm(on_add: EventHandler<Reminder>) -> Element {
    let mut title = use_signal(|| String::new());
    
    rsx! {
        input {
            value: "{title()}",
            oninput: move |e| title.set(e.value())
        }
        button {
            disabled: title().is_empty(),
            onclick: move |_| {
                if !title().is_empty() {
                    on_add.call(Reminder { /​* ... */ });
                    title.set(String::new());
                }
            },
            "Add"
        }
    }
}

Filter Pattern

let mut filter = use_signal(|| "all".to_string());

rsx! {
    for reminder in reminders().iter().filter(|r| {
        match filter().as_str() {
            "active" => !r.completed,
            "completed" => r.completed,
            _ => true,
        }
    }) {
        ReminderCard { reminder: reminder.clone() }
    }
}

Resources

• Dioxus Documentation
• Dioxus Web Guide
• PWA Best Practices