t-online News Mobile App

t-online ist eines der größten Nachrichtenportale Deutschlands mit Millionen täglicher Leser. Die Mobile-App bietet eine native Experience für Nachrichten, Live-Sport, Wetter und mehr.

Projektüberblick

Die t-online News-App von Grund auf mit React Native und Expo gebaut. Die App liefert t-online.de Inhalte über eine hybride WebView-Architektur mit nativer Navigation, Push Notifications und Werbemonetarisierung. Als hauptverantwortlicher Entwickler habe ich alle Kernfeatures umgesetzt und die technische Basis gelegt.

Wichtige Beiträge

Konfigurierbare Tab Bar

Eine benutzerkonfigurierbare Bottom Navigation umgesetzt, mit der Leser ihr Erlebnis personalisieren können. Nutzer wählen bis zu 3 Tabs aus (News, Sport, Wetter, Live Ticker, Themen) und ordnen sie via Drag-and- Drop. Einstellungen werden lokal gespeichert und bleiben erhalten.

Suche mit Auto-Suggestions

Performante Suche mit Echtzeit-Vorschlägen gebaut. Request Debouncing und Cancellation via AbortController implementiert, um Race Conditions zu vermeiden. Listen-Rendering mit @shopify/flash-list für smoothes Scrollen durch tausende Ergebnisse optimiert.

Multi-WebView Navigation

Architektur für mehrere WebView-Instanzen pro Tab entworfen und implementiert, inkl. sauberem Navigation Stack Management. Jeder Tab behält seine eigene History, was natürliches Back/Forward und das Beibehalten von Scroll-Positionen ermöglicht.

Dark Mode Support

Systemweiten Dark Mode umgesetzt und zwischen nativer App Shell und WebView synchronisiert. Custom Expo Modul gebaut, das iOS/Android Theme Detection an die WebView weiterreicht, um eine konsistente Darstellung zu sichern.

Push Notifications

Airship SDK für Push-Benachrichtigungen mit Deep Linking integriert. Notification Channels für Kategorien (Breaking News, Sport usw.) implementiert und Background/Foreground Routing umgesetzt.

Werbemonetarisierung

Google Mobile Ads SDK und Taboola Native Ads in den WebView-Kontext integriert. Ad Refresh Logik gebaut, die Ads beim Navigieren zwischen Artikeln aktualisiert, um Umsatz zu maximieren und Performance zu wahren.

Onboarding Tutorial

Erststart-Tutorial erstellt, das zentrale App-Features erklärt. Das Onboarding führt durch Permission Requests und Personalisierung, bevor Inhalte gezeigt werden.

Deep Linking

Universal Links (iOS) und App Links (Android) für t-online.de URLs implementiert. Externe Artikel-Links werden in der App geöffnet statt im Browser.

Analytics & Crash Reporting

Firebase Crashlytics für Crash Reporting und Firebase Analytics für User-Tracking integriert. Zudem INFOnline/IVW Tracking für deutsche Medienmessung implementiert.

CI/CD Pipeline

EAS Build für automatisierte iOS- und Android-Builds eingerichtet, inklusive App Store/Play Store Submission. GitHub Actions Workflows für Validierung, Tests und Deployments konfiguriert.

Weitere Beiträge

@stroeer/radio-custom-webview

Eine Custom React Native WebView Library erstellt, die auf die App- Anforderungen zugeschnitten ist. Features: native Taboola Integration, Pull-to-Refresh und Google Mobile Ads SDK Bridging für In-WebView Ads.

react-native-infoonline

React Native Wrapper für das INFOnline/IVW Measurement SDK entwickelt, um DSGVO-konformes Analytics Tracking für deutsche Medienpublisher zu ermöglichen. Unterstützt iOS und Android mit automatischem Session Management.