PWA 为什么说是互联网的下一个风口?

PWA 是 Progressive Web Apps 的缩写。从2015年 Frances Berriman 和 Alex Russell 提出 PWA 这个概念到现在,PWA 似乎也没有一个合适的中文名字来对应它(即使像下面翻译成“渐进式网络应用程序”)。原因是 progressive 这个词有很多意思,例如:“进取,渐进,改革,先进”这样的意思,并且有趣的是,PWA 里的 P 是有所有这些中文意思在里面的,所以,很难还能想出一个比 PWA 还简洁的中文词汇来称呼它,于是 PWA 就是 PWA,无论在英文还是中文世界。

我们来看看维基百科是怎么说的。

渐进式网络应用程序(英语:Progressive Web Apps,简称:PWA)是一种普通网页或网站架构起来的网络应用程序(移动APP),但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。- 渐进式网络应用程序

简单说,因为技术进步了,使得原来对移动端支持不友好的网页,也终于可以像是移动APP那样,在手机、平板这些小屏幕移动终端上得以找到重新赢回市场的机会。

我们知道任何在这个世界上能存在并且发展的事物,总是有其具体且实际的用处的,否则我们人类何以自称为理性生物呢?PWA之所以被提出、能存在并在发展,核心是其相较原生(Native)或混合(Hybrid)App而言,有其独到的特点为人所看重。

PWA 核心特点

  • 简洁之美:一个网页,自适应所有终端,不需重复开发建设,符合“奥卡姆剃刀原则” – 如无必要,勿增实体;
  • 经济性:无论是Native App还是Hybrid App,重新造轮子之繁复,提交审核之折磨,日常管理之纷杂,App推广之患得患失…我们都知道APP的成功率是多少。而PWA?你只需在原有网站或在新设计网页上把相应的功能加上去就可以了。网页还是那个网页,但APP早已不是那个APP了;
  • 实用性:PWA对开发平台没特别要求,也就是说,网站是用什么语言开发的没关系,因为PWA只是利用JavaScript和JSON操作了一下前端,任何帮你开发网站的人,只要把PWA的功能添加到程序里就可以了,你没有必要为了移动端而重新组建开发团队;
  • 该有的都有:APP的核心特质PWA都有,例如连接独立性,可被发现性,安全性,发送通知等等。

PWA 的核心技术

  1. Service Worker:PWA 功能的核心部件,主要APP功能的控制、承载者;
  2. App Manifest:一个负责将 PWA 像是 APP 一样安装到移动端的JSON格式文件;
  3. Push API:允许 Web 应用拥有接收服务器并推送消息的能力(Web App 内部的消息推送);
  4. Notifications API:允许 Web 应用向用户显示系统通知;
  5. Background Sync:可延迟发送用户行为,直到用户网络连接稳定。

几段代码演示

// register service worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js").then(function() {
    console.log("SW registered");
  });
}

// Manifest JSON
{
  "name": "Eloquence Training APP",
  "short_name": "Eloquence APP",
  "theme_color": "#f3bf21",
  "background_color": "#007bff",
  "display": "standalone",
  "Scope": "/",
  "start_url": ".",
  "icons": [
    {
      "src": "./images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

PWA 的应用

PWA 自概念的提出到目前不过两三年时间,但国际上已经有不少知名企业已经纷纷加入到 PWA 的阵营中来,它们中有:

小可最近也利用 PWA 技术开发了一款应用,是“54张扑克牌训练口才”的网上版本(移动端触发事件待改进):

小结

PWA 是谷歌倾全力打造的,旨在利用网页的特殊优势,并使之在移动互联中继续发挥功用的一种技术合成。网页是互联网内在精神的最初创、最纯正的体现,承载着互联网的发展历程。在移动终端市场不断壮大的历史现实下,PWA 实现了网页的终端自适应、移动APP化,给了网页第二次生命,绝对是网页技术一次浴火重生的传奇。PWA 会在未来的一两年内爆发,并且一定会是互联网的一个火热的风口。

Scroll to Top