导读：2016年，Google提出了PWA，志在增强Web体验。可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息……等等这些特性可使Web应用渐进式地变成App，甚至与APP相匹敌。这一系列特性背后有哪些核心关键技术支撑，本文将为您一一分析，解开它的神秘面纱。 下一代 Web 应用？近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。 包括但不限于基于 Node.js 的前端工程化方案；诸如 Webpack、Rollup 这样的打包工具；Babel、PostCSS 这样的转译工具；TypeScript、Elm 这样转译至 JavaScript 的编程语言；React、Angular、Vue 这样面向现代 Web 应用需求的前端框架及其生态，也涌现出了像同构 JavaScript与通用 JavaScript 应用这样将服务器端渲染（Server-side Rendering）与单页面应用模型（Single-page App）结合的 Web 应用架构方式，可以说是百花齐放。 但是，Web 应用在移动时代并没有达到其在桌面设备上流行的程度。究其原因，尽管上述的各种方案已经充分利用了现有的 JavaScript 计算能力、CSS 布局能力、HTTP 缓存与浏览器 API 对当代基于Ajax与响应式设计的 Web 应用模型的性能与体验带来了工程角度的巨大突破，我们仍然无法在不借助原生程序辅助浏览器的前提下突破 Web 平台本身对 Web 应用固有的桎梏：客户端软件（即网页）需要下载所带来的网络延迟；与 Web 应用依赖浏览器作为入口所带来的体验问题。 图1 Web与原生应用在移动平台上的使用时长对比（图片来源：Google） 在桌面设备上，由于网络条件稳定，屏幕尺寸充分，交互方式趋向于多任务，这两点造成的负面影响对比 Web 应用免于安装、随叫随到、无需更新等优点，瑕不掩瑜。但是在移动时代，脆弱的网络连接与全新的人机交互方式使得这两个问题被无限放大，严重制约了 Web 应用在移动平台的发展。在用户眼里，原生应用不会出现「白屏」，清一色都摆在主屏幕上；而 Web 应用则是浏览器这个应用中的应用，使用起来并不方便，而且加载也比原生应用要慢。 Progressive Web Apps（以下简称 PWA）以及构成 PWA 的一系列关键技术的出现，终于让我们看到了彻底解决这两个平台级别问题的曙光：能够显著提高应用加载速度、甚至让 Web 应用可以在离线环境使用的 Service Worker 与 Cache Storage；用于描述 Web 应用元数据（metadata）、让 Web 应用能够像原生应用一样被添加到主屏、全屏执行的 Web App Manifest；以及进一步提高 Web 应用与操作系统集成能力，让 Web 应用能在未被激活时发起推送通知的 Push API 与 Notification API 等等。 将这些技术组合在一起会是怎样的效果呢？「印度阿里巴巴」 Flipkart在 2015 年一度关闭了自己的移动端网站，却在年底发布了现在最为人津津乐道的 PWA 案例FlipKart Lite，成为世界上第一个支撑大规模业务的 PWA。发布的一周后它就亮相于Chrome Dev Summit 2015上，我当时就被惊艳到了。为了方便各媒介上的读者观看，我做了几幅图方便给大家介绍： 图2 PWA案例FlipKart Lite展示（图片来源：Hux |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
