Learn how ZDF created a progressive web app (PWA) with modern features like offline support, installability, and dark mode.
When broadcaster ZDF was considering redesigning their frontend technology stack, they decided to take a closer look at Progressive Web Apps for their streaming site ZDFmediathek. Development agency Cellular took on the challenge to build a web-based experience that is on par with ZDF’s platform-specific iOS and Android apps. The PWA offers installability, offline video playback, transition animations, and a dark mode.
Adding a service worker
A key feature of a PWA is offline support. For ZDF most of the heavy lifting is done by Workbox, a set of libraries and Node modules that make it easy to support different caching strategies. The ZDF PWA is built with TypeScript and React, so it uses the Workbox library already built into create-react-app to precache static assets. This lets the application focus on making the dynamic content available offline, in this case the videos and their metadata.
The basic idea is quite simple: fetch the video and store it as a blob in IndexedDB. Then during playback, listen for online/offline events, and switch to the downloaded version when the device goes offline.
Unfortunately things turned out to be a little more complex. One of the project requirements was to use the official ZDF web player which doesn’t provide any offline support. The player takes a content ID as input, talks to the ZDF API, and plays back the associated video.
This is where one of the web’s most powerful features comes to the rescue: service workers.
The service worker can intercept the various requests done by the player and respond with the data from IndexedDB. This transparently adds offline capabilities without having to change a single line of the player’s code.
Since offline videos tend to be quite large, a big question is how many of them can actually be stored on a device. With tje help of the StorageManager API the app can estimate the available space and inform the user when there is insufficient space before even starting the download. Unfortunately Safari isn’t on the list of browsers implementing this API and at the time of writing there wasn’t much up-to-date information about how other browsers applied quotas. Therefore, the team wrote a small utility to test the behavior on various devices. By now a comprehensive article exists that sums up all the details.
#pwa #web-development #programming #developer
