![]() ![]() Until then, however, it remained an independent programme brand for music programmes within 3sat until the end of 1993. The ZDF Musikkanal remained on air as an independent programme until 31 December 1988, and from January 1989 it was broadcast as a programme window before the 3sat programme and was later fully integrated into 3sat. To take this into account the app measures the actual frame rate via requestAnimationFrame() while the application loads and disables all animations when the value drops below a certain threshold.Quick facts: Country, Broadcast area, Headquarters, Progra. On low-end devices such animations usually have the opposite effect and make the app feel sluggish and less responsive if they don't run at 60 frames per second. To offer a rich user experience the ZDF PWA includes some subtle transitions that happen when the user scrolls or navigates. Using frame loading rate for adaptive features # Offline page showing all content available for watching offline. This is a good point in time to prompt for install because the user has expressed a clear intention to use the app offline. ![]() The ZDF PWA offers a custom in-app installation flow and prompts users to install the app as soon as they want to download their first video. By now a comprehensive article exists that sums up all the details. Therefore, the team wrote a small utility to test the behavior on various devices. 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. With the 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. Since offline videos tend to be quite large, a big question is how many of them can actually be stored on a device. This transparently adds offline capabilities without having to change a single line of the player's code. The service worker can intercept the various requests done by the player and respond with the data from IndexedDB. This is where one of the web's most powerful features comes to the rescue: service workers. The player takes a content ID as input, talks to the ZDF API, and plays back the associated video. One of the project requirements was to use the official ZDF web player which doesn't provide any offline support. Unfortunately things turned out to be a little more complex. Then during playback, listen for online/offline events, and switch to the downloaded version when the device goes offline. The basic idea is quite simple: fetch the video and store it as a blob in IndexedDB. ![]() This lets the application focus on making the dynamic content available offline, in this case the videos and their metadata. 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. 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. Adding a service worker #Ī key feature of a PWA is offline support. The PWA offers installability, offline video playback, transition animations, and a dark mode. 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. 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. Using frame loading rate for adaptive features.Building an offline page to access downloads. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |