Skip to content

Feature: PWA — Add to Homescreen for native app feel #166

@mholzi

Description

@mholzi

Feature

Make the player UI a Progressive Web App so players can install it on their homescreen.

Concept

  • Add manifest.json with app name, icons, theme color
  • Service worker for offline shell caching
  • "Add to Homescreen" prompt on mobile browsers
  • Fullscreen mode when launched from homescreen
  • Beatify icon on phone — instant access next party

Why

  • Near-zero effort, huge UX improvement
  • Players return faster: tap icon instead of scanning QR again
  • Feels like a native app
  • Works on iOS and Android

Implementation Ideas

  • Create manifest.json in www/:
    {
      "name": "Beatify",
      "short_name": "Beatify",
      "start_url": "/beatify/",
      "display": "standalone",
      "theme_color": "#1a1a2e",
      "background_color": "#1a1a2e",
      "icons": [...]
    }
  • Add `" to player.html
  • Basic service worker for shell caching
  • Generate PWA icons from existing logo

Effort

~2-3h

Labels

enhancement

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions