Warum meine Cordova-App TYPO3 als Backend nutzt

Die Idee dahinter

TYPO3 ist ein mächtiges CMS – aber es kann mehr als nur Webseiten ausliefern. Mit einem eigenen Extbase-Controller lässt sich TYPO3 als schlankes REST-Backend nutzen, das JSON zurückgibt. Die Cordova-App auf der anderen Seite konsumiert diese Daten per Fetch API und stellt sie dem Nutzer dar.

Das Ergebnis: eine Hybrid-App mit einem zentralen, redaktionell pflegbaren Backend – kein separater Node-Server, kein zusätzliches System.

TYPO3-Seite: eigener API-Controller mit Extbase

Zuerst registrieren wir eine neue Route in der ext_localconf.php deiner Extension:

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
    'MeineExtension',
    'Api',
    // alle erlaubten Actions
    [
        \Vendor\MeineExtension\Controller\ApiController::class => 'list, show',
    ],
    // non-cacheable Actions (für eine API: alle)
    [
        \Vendor\MeineExtension\Controller\ApiController::class => 'list, show',
    ]
);

Dann der Controller selbst. Wichtig: wir deaktivieren das Fluid-Rendering und geben direkt JSON zurück:

namespace Vendor\MeineExtension\Controller;

use Psr\Http\Message\ResponseInterface;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;

class ApiController extends ActionController
{
    public function listAction(): ResponseInterface
    {
        $items = $this->itemRepository->findAll();

        $data = [];
        foreach ($items as $item) {
            $data[] = [
                'uid'   => $item->getUid(),
                'title' => $item->getTitle(),
                'text'  => $item->getText(),
            ];
        }

        return $this->jsonResponse(json_encode($data));
    }
}

jsonResponse() ist seit TYPO3 11 direkt im ActionController verfügbar und setzt automatisch den richtigen Content-Type-Header.

Die URL erreichbar machen per TypoScript

Die API-Action muss über eine öffentliche URL erreichbar sein. Am saubersten geht das mit einem eigenen pageType. Lege eine Seite im Seitenbaum an und weise ihr über TypoScript einen eigenen typeNum zu:

api = PAGE
api {
    typeNum = 1000

    config {
        disableAllHeaderCode = 1
        additionalHeaders.10.header = Content-Type: application/json
        additionalHeaders.10.replace = 1
    }

    10 < tt_content.meineextension_api.20
}

Das Plugin selbst musst du einmalig als Content-Element auf der API-Seite im Backend platzieren. Die API ist dann z. B. unter deinedomain.com/api/ erreichbar. Mit einem Route Enhancer kannst du die ?type=1000 noch sauber wegabstrahieren.

CORS konfigurieren

Damit die Cordova-App die API aufrufen darf, muss TYPO3 die richtigen CORS-Header senden. Das lässt sich im Controller direkt erledigen:

return $this->jsonResponse(json_encode($data))
    ->withHeader('Access-Control-Allow-Origin', '*')
    ->withHeader('Access-Control-Allow-Methods', 'GET, OPTIONS')
    ->withHeader('Access-Control-Allow-Headers', 'Content-Type');

Hinweis: Access-Control-Allow-Origin: * ist für die Entwicklung in Ordnung. In Produktion solltest du die Origin auf deine App-Domain oder einen festen Wert einschränken.

Cordova-Seite: Daten per Fetch API laden

Auf der App-Seite ist es dann erfreulich einfach. Ein simpler Fetch-Call reicht aus:

const API_URL = 'https://deinedomain.com/api/';

async function loadItems() {
    try {
        const response = await fetch(API_URL);

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const items = await response.json();
        renderItems(items);

    } catch (error) {
        console.error('API-Fehler:', error);
    }
}

function renderItems(items) {
    const list = document.getElementById('item-list');
    list.innerHTML = items.map(item => `
        <li>
            <h3>${item.title}</h3>
            <p>${item.text}</p>
        </li>
    `).join('');
}

document.addEventListener('deviceready', loadItems);

Das deviceready-Event ist wichtig – Cordova feuert es sobald alle nativen Plugins initialisiert sind. Netzwerk-Requests vor diesem Event können in manchen Umgebungen fehlschlagen.

Häufige Stolpersteine

• TYPO3 Cache – die API-Seite wird gecacht. Für dynamische Daten entweder den Cache deaktivieren (config.no_cache = 1) oder gezielt per Cache-Tags leeren
• Content Security Policy in der config.xml der Cordova-App – externe Domains müssen explizit erlaubt sein
• HTTP vs. HTTPS – Cordova-Apps blockieren auf iOS standardmäßig unverschlüsselte Verbindungen
• Fehlendes Repository – der Extbase-Controller braucht ein korrekt konfiguriertes Repository, sonst gibt findAll() nichts zurück

Kurz zusammengefasst

1. TYPO3 Extbase-Controller mit jsonResponse() gibt sauberes JSON zurück
2. Die Action über eine eigene TYPO3-Seite + TypoScript öffentlich erreichbar machen
3. CORS-Header direkt in der Response setzen
4. In Cordova per Fetch API konsumieren – erst nach deviceready
5. TYPO3-Cache und CSP in der Cordova config.xml nicht vergessen