Progressive Web Apps: What They Are and How to Get Started
Progressive web apps (PWAs) are browser-driven applications evolved from an older concept, progressive enhancement. Progressive enhancement refers to the layering of add-on technologies to provide the best experience possible based on the technology available in each viewing context. One example of progressive enhancement is providing multiple image or video formats and using the optimal format for the device or browser. YouTube will use VP9 if you’re using a browser that supports the codec, and only falls back to another codec if you’re on a browser that doesn’t support VP9.
With PWAs, there’s the hope that we can create web applications that run entirely with mobile browsers without the need to deploy multiple native applications to mobile operating systems. PWAs can install application icons on a mobile device home screen to launch full screen just like a regular native app. For business, a singular deployment path means a better return on investment. No more worries about submitting your native application to an app store for approval and deployment—just build your PWA into your existing website and away you go. In the past, I’ve written about the increased expense that burdens native application development in our current video distribution landscape. Prior to mobile, “write once, deploy everywhere” application development was not just a concept, but a norm made possible by Flash. Without a consistent technology to deliver apps, software development budgets increased exponentially to support functioning web applications on desktop browsers plus native applications written in entirely different languages for mobile devices.
PWAs are getting noticed. In September at IBC, India-based Voot was given the Innovation Award for Content Distribution for its new PWA. Voot, a Viacom18 media company, has nearly 35,000 hours of content available to its subscribers. Voot’s adoption of PWA technology has led to increased viewing time of video and over-all time spent in the application. One of the primary advantages of PWAs is the ability to engage your audience immediately in a mobile browser without the diversion of installing an application. You can read more about Voot’s PWA in the Google Developer Showcase.
PWA is more of a classification than it is a specific technology. In a streaming media context, a PWA enables a universal video experience in one codebase that performs just as well on mobile devices as it does on more powerful desktop computers. Here are some current PWA features that support an enriched and adaptable user experience:
- MediaSession API: This feature enables content that plays out of the context of the web application, such as a video or audio stream controlled from the locked screen overlay or notifications area or on devices like smart watches.
- Off line/cached content: Service workers act as a proxy between the web page and the site, allowing caching of images, code, and media that can be used while offline. This also speeds up repeat visits and makes the entire app more responsive. Lack of iOS support for this core PWA feature has concerned developers, but Apple is starting to develop service workers in WebKit.
- Background Fetch: Still in development, this API will allow media files to download in the background while users navigate to other areas of the application (or other sites).
- Full-screen mode: HTML5’s full-screen capabilities can be leveraged to allow easier takeovers of the entire screen of the device, giving the PWA the look and feel of a native application, especially with video playback.
- Media Capabilities API: While not yet available in current browser stacks, development is underway to enable configurations that determine the best media source to play for a given device’s processing power, bandwidth, and power consumption. HTML5 video APIs are being expanded to enable applications to test the display and codec capabilities of the device. This will allow HDR content to be delivered to supported devices.
Developers in all facets of web production can celebrate a return to more streamlined deployment pipelines. As a video solutions architect, I hope PWA technologies will also function to help meet the growing demand for smart TV apps. Business stakeholders and developers who aspire to build applications that have fewer obstacles to deploy to their audiences should be inspired by PWA technology.
[This article appears in the November/December 2017 issue of Streaming Media Magazine as "Progressive Web Apps: A New Hope."]
Related Articles
THEO Technologies CEO Pieter-Jan Speelmans discusses the drawbacks of progressive web apps (PWAs) in this clip from his presentation at Streaming Media West.
04 Jan 2019
THEO Technologies CEO Pieter-Jan Speelmans discusses the benefits of progressive web apps (PWAs) in this clip from his presentation at Streaming Media West.
02 Jan 2019
Progressive web apps combine the engagement of native apps with the discoverability, shareability, and flexibility of browser-based content, including fast video playback
16 May 2017