Premium-Plugin Mobile-App-Builder ← zurueck zum Hub

Mobile-App-Builder

White-Label-Webradio-App für dein Smartphone

Mobile-App-Builder ist ein Premium-Plugin für RadioCMS Community Edition. Damit verwandelst du deine Webradio-Webseite mit einem Klick in eine echte App (PWA, Progressive Web App). Hörer legen ein Icon auf den Smartphone-Homescreen, öffnen es wie eine normale App, sehen deinen Brand-Splash-Screen, können offline auf gecachte Inhalte zugreifen und kriegen Push-Benachrichtigungen (wenn du chat-mobile-push dazu hast).

Bonus: Anleitung im Plugin erklärt dir wie du daraus eine native App für Google Play Store und Apple App Store machst via pwabuilder.com (Microsoft-Service, kostenlos für die PWA-Konvertierung, Apple-Dev-Account 99 USD/Jahr separat).

Was du konkret damit machen kannst

Eigene Webradio-App ohne App-Store-Aufwand

Hörer scannen einen QR-Code oder klicken auf der Webseite auf "App installieren". Innerhalb von 5 Sekunden ist deine Webradio-App auf dem Smartphone-Homescreen, mit eigenem Icon, deinem Sender-Namen, deinem Splash-Screen. Beim Öffnen sieht das aus wie eine native App (kein Browser-UI sichtbar).

Offline-Streaming-Modus

Standard-Player + Webradio-Stream funktionieren weiter wenn der Browser zu ist. Statische Seiten (About, Programm, DJs) werden im Service-Worker gecacht, öffnen sich auch ohne Internet (bis zum nächsten Refresh).

Install-Tracking

Plugin trackt wie viele Hörer die App "installiert" haben (PWA-Install-Prompt accepted). Du siehst eine kleine Conversion-Rate-Statistik im Admin: wie viele Besucher haben den Install-Prompt gesehen, wie viele haben ihn akzeptiert.

App-Store-Konvertierung (optional)

Wenn du wirklich in die App-Stores willst (Google Play + Apple App Store), nutzt du pwabuilder.com (Microsoft-Service). Du lädst dort dein Manifest hoch, kriegst eine .apk (Android) bzw. .ipa (iOS) als Download. Apple braucht zusätzlich einen Apple-Dev-Account (99 USD/Jahr). Plugin erklärt den genauen Workflow Schritt für Schritt.

White-Label für Hoster

Jedes Webradio das du als Hoster betreust kriegt seine eigene App ohne dass du PWA-Knowledge brauchst. Plugin generiert pro Sender ein eigenes Manifest mit dessen Icon/Farben/Name.

Installation und Aktivierung

  1. Admin -> Plugins -> Tab Marketplace
  2. Mobile-App-Builder finden, lila „PRO"-Badge
  3. Plugin laden + Lizenz klicken
  4. Lizenzschlüssel im Format RCMS-XXXX-XXXX-XXXX-XXXX einfügen
  5. Speichern und prüfen -> Plugin wird automatisch installiert
  6. In der Plugin-Liste auf Aktivieren klicken
  7. Sidebar-Link „Mobile-App" erscheint im Admin-Bereich unter "System & Tools"

So nutzt du es, Schritt für Schritt

Schritt 1: App-Manifest konfigurieren

  1. Admin -> Mobile-App -> Tab Manifest
  2. Felder ausfüllen:
    • App-Name (z.B. "Radio Schausteller"), wird auf dem Smartphone-Icon angezeigt
    • Short Name (max 12 Zeichen, z.B. "RadioS"), Fallback wenn Icon-Text zu lang ist
    • Beschreibung (1-2 Sätze)
    • Theme-Color (Statusbar-Farbe im Smartphone), z.B. #a78bfa
    • Background-Color (Splash-Screen-Hintergrund), z.B. #0a0e1a
    • Display-Modus: standalone (= sieht aus wie App, kein Browser-UI) ist Default
  3. Icon-Sets hochladen:
    • 192x192 px (Pflicht, Android-Default-Icon)
    • 512x512 px (Pflicht, hochauflösendes Icon)
    • 180x180 px (Apple-Touch-Icon, optional aber empfohlen)
  4. Speichern

Schritt 2: Service-Worker aktivieren

  1. Tab Service-Worker -> Schalter Cache aktiv umlegen
  2. Cache-Strategien (Default-Werte sind sinnvoll):
    • Statische Assets (CSS/JS/Bilder): Cache-First (loadet erst aus Cache, fallback Network)
    • HTML-Seiten: Network-First (loadet erst aus Internet, fallback Cache)
    • Stream-URL: NIE cachen (Live-Audio braucht Network)
  3. Speichern -> Service-Worker wird auf /sw.js deployt

Schritt 3: Install-Prompt aktivieren

  1. Tab Install-Prompt
  2. Anzeige-Strategie:
    • Smart: Plugin entscheidet selbst wann (Default, empfohlen)
    • Sofort beim ersten Besuch: aggressiv
    • Nach X Sekunden Listening: nur wenn Hörer aktiv ist
  3. Position: unten rechts (mobile-friendly), oben rechts, oder als Hero-Banner
  4. Button-Text: "Als App installieren" / "Auf Homescreen ablegen" / eigener Text
  5. Speichern

Schritt 4: Testen

  1. Im Smartphone-Browser (Chrome/Safari) deine Webradio-URL öffnen
  2. Install-Prompt erscheint nach paar Sekunden
  3. Klicken -> Icon ist auf Homescreen, App öffnet im Standalone-Modus

Schritt 5 (optional): App-Store-Konvertierung

  1. Admin -> Mobile-App -> Tab PWA-Builder-Export
  2. Manifest-JSON anzeigen lassen + kopieren
  3. Auf https://pwabuilder.com gehen, Manifest reinkopieren, "Build" klicken
  4. .apk (Android) bzw. .ipa (iOS) herunterladen
  5. Android-Upload im Google-Play-Console (Dev-Account 25 USD einmalig)
  6. iOS-Upload im Apple App Store Connect (Dev-Account 99 USD/Jahr)
  7. Prüfung Apple: 1-3 Tage, Google: meistens noch am gleichen Tag

Tipps für den Alltag

Was das Plugin NICHT macht

Beispiele zum Inspirieren

Beispiel 1: Schausteller-Radio mit Festival-Saison

Der Sender hat 100+ Festivals pro Jahr. Hörer wollen unterwegs zugreifen. App auf den Homescreen, Splash-Screen mit Logo, beim Öffnen direkt der Live-Player + Festival-Kalender. Service-Worker cacht den Kalender, sodass die nächsten 7 Tage Veranstaltungen auch offline sichtbar sind.

Beispiel 2: Internet-Webradio mit Treuekarte

Hörer installieren die App, registrieren sich als Listener, sehen ihre Treue-Punkte (von listener-loyalty-Plugin) im Profil-Tab. Die App fühlt sich an wie eine kleine Mitglieder-App, der Hörer kommt deutlich oefter wieder.

Beispiel 3: Hosting-Modell mit 20 Sendern

Du bist Hoster, jeder deiner 20 Sender hat eigene Webseite + eigenes Icon + eigenen Splash. Pro Sender 5 Minuten Setup, dann hat jeder seine eigene "App". Verkaufsargument für Premium-Hosting-Tarif.

Lizenz und Aktivierung