Go to the next level with Progressive Web Apps

There has been a lot of buzz about Progressive Web Apps (or PWAs) lately. At THEOplayer, we strongly believe in the future of PWAs to develop lighter applications across devices. After doing research and refining approaches for more than 18 months, with highlights such as the Google I/O presentation highlighting the research we have been doing in the field, we have come to a point where we are rolling out a dedicated SDK for PWAs. In this article, we will describe what PWAs are, and how they can be leveraged.

What are Progressive Web Apps?

Progressive Web Apps are often described as a new way to develop apps. To understand PWAs, let’s first have a look at the different approaches currently being used to distribute applications and content to different devices.

The first approach: develop native apps. Native apps have several advantages. First, they can make use of the device's hardware often resulting in the most performant solution since the app is able to make use of the device specific nature and features. They also benefit largely from being downloadable from an app store, which offers a one-stop-shop for apps per specific platform. However, native apps are often cumbersome to develop, as it might require different programming languages to be used. Once an app is developed, it needs to be published in the appropriate app store, and promoted so a user can find, download and install it. Native apps do tend to take up significant amount of space on your device, which is especially an issue in developing markets, or users which are using older or low-end devices. Unfortunately, once you want to publish an update of your app, you most probably have to go through the app store review processes which takes time and are not really compatible with software development approaches like agile/scrum, kanban or squads. Your end-users on the other hand, are often required to go again through some of the download and installation steps, making it possible some users are still on old versions of your application.

An alternative solution: use a mobile website instead of an application. Mobile websites became easy to develop through the increased popularity of javascript frameworks for mobile environments and apps like React and Angular. They offer the advantage that its not necessary to install an app and that the code can be used amongst all different devices with a limited amount of browser and device specific requirements and modifications. But, mobile environments still lack capabilities and options possible for native applications. Some obvious examples are working in offline environments and being installable to have icons on the device’s Home screen. The benefit here however is that the website is always up to date, and can be responsive towards the different platforms where it is being viewed, bringing an implement once, use everywhere type of solution.

Progressive Web Apps aim to bring a new approach to develop apps by combining the best of both worlds: having the allure and capabilities of a native app, while benefiting from the responsiveness and freshness of the web. Making a dramatic simplification, a PWA is nothing more than a web page with some additional capabilities and access to some more advanced APIs. While a PWA can be installed on a device and give the benefits of a native app, it lives within a modern browser environment, and can be updated automatically when the network is available.

But why should you use PWAs when you could build a native application or reach your users through the mobile web? Numbers from comScore indicate that users on mobile devices spend about 85% of their time within native apps, and only about 15% of their time within their mobile browser. This might seem strange as the internet is after all the most universal and biggest platform, independent of the OS your device is running on. The main reason appears to be the smoothness of native experiences. By using PWAs, this smoothness can be brought to the web, giving the native experience with the flexibility of the web.

10 characteristics of PWAs

PWAs are often described in ten characteristics, being:

Progressive: They work for every user, regardless of the browser or platform on which it is being operated. For this, it makes use of progressive enhancement and capability detection of the current environment.

Responsive: As with normal websites, PWAs can adopt to the form factor of the device, being mobile, tablet, desktop, smart-TV, or any other form yet to emerge.

Connectivity independent: PWAs can work offline or on low quality networks. This is done through the availability of service workers, which are explained in the next section.

App-like: PWAs feel like a native app, with options to have app-style interactions and navigation.

Fresh: Updating PWAs is easy as they can automatically update through the service worker’s update process.

Safe: As a security feature, PWAs run over HTTPS only to prevent snooping and ensure content hasn’t been tampered with.

Discoverable: Thanks to W3C Manifests, PWAs are identifiable as applications and as a result can be picked up by search engines indexing the web.

Re-engageable: Push notifications are a feature often used by native apps to re-engage with users. PWAs have access to advanced APIs to make these capabilities available.

Installable: PWAs can be installed on devices in order to allow users to quickly access these apps and place them on their home screens without having to go through an app store.

Linkable: In the end, a PWA is similar to a web page, meaning they can be linked to Easily shared via a URL and do not require complex installation.

Fig. 1 - Characteristics of PWAs

How do PWAs work?

Progressive Web Apps are built on top of a few basic components, being:

When a manifest is linked to a web page, browsers can load the metadata and potentially provide a notification to a user with the question if he wants to install the app. A user can then decide to install the application, which will trigger a download and installation of the service worker, and creation of an icon on the device’s home screen.

Service Workers

Service workers are the engine of progressive web apps. They can be installed to allow native executing code. Furthermore, service workers allow for mechanisms to lift restrictions originating from a lack of stable internet connection.

Implemented as JavaScript files, similar to Web Workers (which allow for threading on the web) a service worker can be compared to a program level thread, which stays active when navigating the different views and pages within the application. It is often the place where all application level code is running synchronization and update tasks.

When looking at the networking capabilities, service workers have capabilities comparable to a scriptable network proxy. They can manage network requests programmatically, allowing assets to be synchronized and cached, or network requests to be rerouted. As a result, a well implemented service worker allows a PWA to be completely independent from network connection by rerouting asset requests to (potentially older copies) of the assets stored offline.

As service workers are often very small, and (should) only cache the assets needed when working offline, as well as the ability of the service worker to run in a browser engine already available on the device, a PWA often has a significantly smaller memory footprint compared to a native application.

Service workers can be updated through a centralized system, which liberates app builders from passing through app stores to update their applications.

Application Shell Architecture

The application shell architecture is an optional feature of PWAs. It defines an architectural approach to build PWAs which allows to reliably and instantly load on users’ screens, similar to native applications.

As a basic set of HTML, CSS and JavaScript, it powers the base of the UI. When cached offline, it can be loaded instantaneously for recurring visitors and provide a “shell” or skeleton in which dynamic content can be loaded. This approach is often used within single-page applications to define the base components within the application. Most often, the shell contains the base building blocks for the app, without containing the actual data to populate these blocks.

Where can I use PWAs?

PWAs are at this point supported on the most popular browsers, spanning a wide range of devices and platforms. Contrary to popular belief, PWAs are not just a mobile thing. PWAs are also in use for desktop applications, other connected platforms, and even VR headsets such as Samsung’s Gear VR. Support for the different components of PWAs however differs. Service workers are supported across the board on all modern browsers. Web app manifests are supported on desktops through Edge, Chrome and Firefox and Safari (WebKit) is currently implementing support.

In practice, a quick overview for the most common platforms where PWAs are supported can be found below.

Device

Platform

Browser

Minimal version

Desktop

Windows

Chrome

39.0

Edge

17.0

Firefox

58.0

macOS

Chrome

39.0

Firefox

58.0

Safari

Under development

Linux

Chrome

39.0

Firefox

58.0

Mobile

iOS

Safari

11.3

Android

Chrome

39.0

Firefox

58.0

Progressive Web Apps and video

As with other apps, PWAs also offer significant value for video use cases. The general benefits of PWAs being the build once and distribute across platforms also hold true when handling video applications. As a PWA behaves and acts as a native application, while requiring only slightly more development effort from a website, it also provides an efficient approach to bring native app experiences to your viewers.

Another benefit is the ability to leverage PWA capabilities with service workers by caching and preloading content on your website. A good example of this was shown at NAB in 2017, and repeated at Google I/O in that year, showcasing how the startup time of videos could be reduced from multiple seconds to milliseconds for high bitrate 4k content.

Other options are of course the ability to bring offline playback to your apps and website. Leveraging PWAs, content can be stored within the PWA’s cache and played at a later point when the network connection is no longer available. Using advanced web capabilities, this can be done as well when using content protection mechanisms like DRM in combination with offline licenses.

At THEOplayer, we have launched a SDK dedicated to PWAs in order to better leverage the benefits of PWAs. Are you interested in developing PWAs and simplifying app delivery? Don’t hesitate to reach out, our experts are more than happy to discuss options.