渐进式Web应用程序:它们是什么以及如何开始

Progressive web apps (PWAs) are browser-driven applications evolved from an older concept, 渐进增强. 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 渐进增强 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.

与静脉, 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. 在过去, I’ve written about the increased expense that burdens native application development in our current video distribution landscape. 移动之前, “一次编写, deploy everywhere” application development was not just a concept, 而是一种因Flash而成为可能的规范. 没有一致的技术来交付应用程序, software development budgets increased exponentially to support functioning web applications on desktop browsers plus native applications written in entirely different languages for mobile devices.

pwa正在受到关注. 9月在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. 你可以阅读更多关于Voot的PWA 谷歌开发者展示会.

PWA is more of a classification than it is a specific technology. 在流媒体环境中, 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.
离线/缓存内容: Service workers act as a proxy between the web page and the site, 允许缓存图像, code, 以及离线时可以使用的媒体. 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, 但苹果开始在WebKit中开发服务工作者.
背景获取: 仍在开发中, this API will allow media files to download in the background while users navigate to other areas of the application (or other sites).
全屏模式: HTML5’s full-screen capabilities can be leveraged to allow easier takeovers of the entire screen of the device, 使PWA具有本机应用程序的外观和感觉, 尤其是视频回放.
媒体功能API: 但在当前浏览器栈中还不可用, development is underway to enable configurations that determine the best media source to play for a given device’s processing power, 带宽, 还有电力消耗. 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. 作为视频解决方案架构师, 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 流媒体杂志 “渐进式网络应用:新希望”."]