The usage of Progressive Web Apps is on the rise. It makes sense: as explained in the previous article in this series, PWAs have plenty of advantages, improving user experience and bringing more flexibility for publishers. For media companies, this new way of connecting with your audience has plenty of benefits as well. In this article, we will discuss some of the advantages of PWA within the video industry.

PWAs for video

PWAs are made possible by a range of new technologies and APIs now available in the most prominent browsers on mobile and connected devices. They allow to enhance the web experience and upgrade it into a real app experience. Leveraging these capabilities significantly enhances viewer experience, and impacts media consumption on your platform.

PWAs allow users to get a real app experience without the need to go through device specific appstores and go through an installation procedure. PWAs often make use of “progressive enhancement”, which means they identify the capabilities, and enhance the experience as they see possible. This is the case even for users which did not install the PWA, but are simply browsing your mobile website. While there is added benefit for them to install the PWA to get a link on their home screen, it is not a requirement for them to access a next level of engagement with the content. Let’s have a deeper look into some of the APIs.

The MediaSession API allows to customise media notifications in the notification slider or lock screen of your device. Not only does it allow to add metadata to display in the notification, it also gives the capability to handle media related events such as seeking or track changes coming from notifications of media keys.

Comparison on Android of notifications with and without media session

Fig. 1 - Notifications with and without media session on Android

The Media Capabilities API identifies which streaming format to leverage, as it allows to identify if a certain format/codec can be supported and played out smooth, but also if this can be done in a power efficient way. In the past, native apps often had to query the device and determine playback capabilities to list the supported formats and codecs. This opens the door as well for PWAs to identify device capabilities such as HDR support.

The Notifications API, which allows for notifications to be shown in the lock screen and notification slider.

Combined with the Push API, which allows service workers to handle push messages coming from a server. Push notifications allow you to extend beyond the browser. They provide an incredibly powerful way to engage and re-engage users by showing alerts for important events or publications of new content and can include action buttons to interact with or open your application.

Push API

Fig. 2 - Push notifications on smart devices

Preloading and caching with PWAs

PWAs allow the viewer experience to become independent of the network quality. As PWAs allow for larger buffers to be maintained, this provides options to add resilience against network issues. These buffers can also be created before the user starts playback. When a user is browsing a media library and shows intent to play a certain piece of content, PWAs can preload the relevant assets and cache the first part of the video at high quality. As a result, viewers can get instant playback once they click play. This significantly increases viewer experience.

Reducing these startup times can bring a significant edge. Recently, a study conducted by Conviva indicated that roughly 27% of the online video viewers experience buffering, 43% have a low-quality video and about 5% of videos never start playing. Another study conducted by Akamai revealed that viewers abandon a video if it takes more than 2 seconds to startup. Viewers leaving your online video service may never come back.

Startup delays (secs)

Fig. 3 - Abandonment rate based in the amount of time (secs)

The improvement in startup time is not to be ignored. Studies have shown it dramatically reduces abandonment and increases overall user satisfaction and engagement, resulting in increased repeat viewership.

Leveraging preloading capabilities within PWAs doesn’t just allow you to reduce startup delays, it also allows you to load high quality immediately. In a test performed at THEO, we compared the PWA preloading experience with the normal experience by configuring the PWA to preload a high quality 4k video in one setup, and simply starting loading when a user hits play in the other setup.

The test results were quite baffling. Where the player without preloading would have a startup time of about 3 seconds for the 4k video, the usage of PWA technology, combined with THEOplayer’s preloading functionality reduced this time to 100 milliseconds, meaning a reduction of startup time with a factor 30.

THEOplayer with and without Progressive Web Apps

Fig. 4 - Comparison of THEOplayer Time Delay (secs) with and without PWAs

The first results of this project were demonstrated at Google’s booth during NAB Las Vegas 2017 and presented during a session on the Google’s I/O conference on the future of video on the web. Have a look at the video below to show a demo of the positive impact on the viewer experience as it was demonstrated during Google I/O.

Playing offline with PWAs

Preloading can of course be taken into an extreme, resulting in complete network independence. This brings the option of offline viewing to PWAs. PWAs enable you to make content available to viewers on the move: watching on the train or in an airplane, or in regions where no data connection is available.

Offline playback capabilities are made possible by advanced storage APIs. These APIs allow to download entire videos and store them on the device itself. These features are known as the download and go functions available in native applications.THEOplayer’s native SDKs storage APIs enable PWAs to offer the same capabilities.

The download and go capability simply allows users to express interest in content and download it. The PWA can then download the asset and store it on the device. When a user decides to play the asset, the PWA can transparently make the content available, and give a user experience similar to the one when a viewer would be watching online. When making use of an advanced player SDK, viewers can get access to the different subtitles, audio languages and other metadata such as thumbnails.

Next to playback of standard content, current APIs make it possible to store the content in secured containers. This opens the door to provide download and go capabilities even for premium content which has content protection requirements. By storing offline DRM licenses within a secure container, security can be guaranteed, even when stored on a user’s device.

PWAs in action

Even though PWAs have been around only for the last few years, adoption is still ongoing. Popular brands such as Twitter, The Washington Post and Pinterest have made PWAs available to their users. Within the media industry, the PWA approach is also proving fruitful. Voot, a Viacom owned media company in India, provided insights in their observations and numbers which back up the PWA claims.

Voot operates in a region where mobile usage is high, data usage being expensive. Network connections are often slow and flaky 2G or 3G connections, with 4G only becoming available more recently. This provides an ideal operating ground for PWAs, which provide capabilities to become independent of the network capabilities. Furthermore, in this market where mobile devices are often limited in storage capabilities, it is often unwanted to install large and bulky native apps, competing for device storage with the operating system, other apps, media and other assets.

By enhancing their website with PWA technology, Voot observed an 80% drop in page load times for first time viewers, and even an 85% improvement for returning viewers. As a result, viewers can access their content more easily, increasing their viewer engagement. They also noted a 19% reduction in abandonment, and 77% increase in conversions from visitors to video viewers.

Viewers also appeared to make use of their system more often, shown by a 39% increase in session time per user. On average, they measured viewers were also watching more videos, with an additional 15% rise in the average daily video views per user.

Besides the observations regarding speed and viewer engagement, Voot also measured a reduction in data transfers. Repeat visitors were observed to have an 86% decrease in data transfer, proving the enhanced network and caching capabilities of PWAs.

Should you use PWAs?

As shown above, PWAs are providing significant capabilities for media companies, which, when leveraged correctly can increase viewer experience and engagement. Considering the cost for developing a PWA is often only a small fraction of what developing a native application costs, these results may be even more enticing. Going forward, PWAs should likely be a part of every conversation a company has about mobile strategy.

At THEO, we strongly believe in the value of PWAs. Using our dedicated PWA SDK, you can leverage the full capabilities of PWAs. If you have questions, our experts are happy to help.

Get in contact with us