"Nutzern ist die Plattform egal!" – Interview mit dem PWA-Entwicklerteam von Zattoo

ÜberKreuz  –  14 Kommentare

Vergangene Woche hat der TV-Streaming-Dienstleister Zattoo seine neue Progressive Web App veröffentlicht, die nun den alten Web-Player ersetzt. ÜberKreuz konnte kurz nach Veröffentlichung bei Zattoo Deutschland in Berlin-Neukölln hinter die Kulissen blicken. Über die Entwicklung der PWA sprach Christian Liebel mit Bogdan Plieshka, Senior Frontend Engineer, und Jörg Schindler, Product Manager Core Platform.

ÜberKreuz: Woher kam die Idee, eine Progressive Web App zu entwickeln?

Jörg Schindler: Am Anfang stand die Entscheidung, unseren Web-Player neu zu entwickeln. Bei diesem Relaunch wollten wir unbedingt auch eine mobile Experience implementieren, die es zuvor nicht gab. Anwender mit einem Smartphone wurden vorher einfach abgewiesen.

Bogdan Plieshka: Bei einem internen Hackathon wurden die ersten Grundlagen für eine Neuentwicklung unseres Web-Clients gelegt. Im Verlauf des daraufhin startenden Relaunch-Projekts hatte ich die Gelegenheit, mich mit den PWA-Schnittstellen zu beschäftigen. Damit kann ja gerade auch auf mobilen Geräten eine sehr gute Benutzererfahrung erreicht werden. Daraufhin haben wir die PWA-Unterstützung einfach auf dem Weg mitgenommen.

Dank der PiP-API wird der Videoplayer in einem eigenen Fenster angezeigt

ÜberKreuz: Welche PWA-Features werden genutzt?

Plieshka: Ein Teil der Anwendung wird im Service-Worker-Cache abgelegt und kann von dort sehr schnell geladen werden. Offlinefähig sind wir als TV-Streaming-Plattform aber nicht. Auf Wunsch kann der Anwender die PWA auf seinem Gerät installieren. Außerdem nutzen wir neue Schnittstellen wie die Picture-in-Picture-API, um den Videoplayer in einem eigenen kleinen Fenster darstellen zu können.

ÜberKreuz: Bringt die Web-Plattform alle Schnittstellen mit, die Zattoo benötigt?

Plieshka: Im Webbrowser ist sehr viel möglich, aber leider nicht alles. Zum Beispiel sind die Chromecast-Schnittstellen eingeschränkt. Safari verhält sich außerdem sehr restriktiv, so ist Autoplay nicht ohne Weiteres erlaubt.

Schindler: Schön wäre es außerdem, wenn Entwickler auch App-Icon-Shortcuts hinterlegen könnten. Das ist momentan nicht möglich. Weil eben noch nicht alles geht, halten wir auch an den nativen Apps fest.

ÜberKreuz: Welche Bibliotheken werden eingesetzt?

Plieshka: Die Webanwendung selbst ist in React geschrieben und verwendet Redux für das State-Management. Es gibt aber auch viele Bereiche, die in Vanilla-JavaScript geschrieben sind, um Framework-unabhängig zu sein. Für die Generierung des Service Worker setzen wir Workbox ein.

Auf eine flüssige Bedienung wurde viel Wert gelegt, wie hier beim elektronischen Programmführer

ÜberKreuz: Was fiel bei der Entwicklung schwer?

Plieshka: Die PWA-Eigenschaft "app-like" setzt voraus, dass sich PWAs wie native Anwendungen anfühlen. Daher haben wir massiv in die Performance unserer Webanwendung investiert. Nutzerinteraktionen wie Scrollen und Gesten fühlen sich sehr flüssig an.

ÜberKreuz: Was fiel bei der Entwicklung leicht?

Plieshka: Zwei Architekturentscheidungen haben uns sehr geholfen. Durch die Implementierung des Webclients als Single-Page-Applikation war es sehr einfach, die PWA-Unterstützung zu realisieren. Im Gegensatz zum vorherigen Monolithen hilft uns Redux beim Bugfixing. Damit sind wir deutlich schneller geworden.

Schindler: Auch unsere Plattform kommt uns entgegen: Beim TV-Streaming gibt es rechtliche Rahmenbedingungen, die sich je nach Land unterscheiden. Diese Businesslogik wird in der Middleware implementiert, im Client gibt es also keine Weichen.

ÜberKreuz: Wie lange hat die Entwicklung gedauert und wie viele Entwickler waren beteiligt?

Schindler: Die Entwicklungszeit für die PWA betrug netto etwa eineinhalb Jahre mit durchschnittlich zwei Entwicklern, zuzüglich Designern und QA.

ÜberKreuz: Vor dem Rollout gab es eine mehrstufige Betaphase mit insgesamt über 10.000 Teilnehmern. Welches Feedback haben die Testkunden zurückgemeldet?

Plieshka: Das Feedback der Testkunden hat uns sehr überrascht. Es gab zwar einzelne Kritikpunkte, diese bezogen sich aber primär auf Änderungen im UX, die dem User, der den alten Web-Player gewohnt war, eine gewisse Umgewöhnung abverlangten. An etlichen Stellen konnten wir hier den Usern durch Anpassungen noch während der Betaphase entgegenkommen. Davon abgesehen war das Feedback fast durchgängig positiv. Manche Kunden haben sogar schon gefragt, wann diese Anwendung im App Store heruntergeladen werden kann oder wann manche der Funktionen auch in den nativen Apps landen. Das hat uns gezeigt, dass Nutzern die Plattform völlig egal ist. Zwischen nativer App und PWA merkt man praktisch keinen Unterschied.