Oh! Progressive Web Apps!

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

By Pete LePage from Google

很早就想动手搞个 PWA 了，不为别的，只是感觉这玩意儿好酷。 大概是在大一的时候，我便从网上了解到了渐进式 Web 应用这个东西，通过在 Chrome 中将 Web 添加到主屏幕的方式来模拟原生应用。

天呐！这简直酷毙了！那以后 Web App 岂不一统天下？这实在令人兴奋。 虽然那时候很少有公司在做这个，只有寥寥几个印度的互联网企业。 但我感觉这玩意儿绝对是颠覆性的，同时 Google 也在强推这个。

只不过那时候的我专业知识还不够，这在我眼中只是个遥不可及的技术。

到后来，我开始着手自己的博客，由于想要实现某种功能而接触了 CacheStorage， 再到后来的 Service Worker，最后阴差阳错地就把 PWA 给折腾出来了，连我自己都没想到。

要讲清 PWA，那就得先从 Service Worker 这个东西说起了。

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

By Matt Gaunt from Google

简单来说，Service Worker 的主要工作，就是在后台截取所有页面请求下来的资源并缓存起来，并在下次发起同样请求的时候直接扔给你数据，十分简单粗暴。（这才是缓存该有的样子啊）

得益于该特性，致使 Web App 可以做到在弱网下也能快速响应，并且具备了离线访问能力，这就构成了所谓的 Progressive Web Apps。

另外，PWA 所强调的 Progressive enhancement 是其最重要的一个特点，由于本质上还是 Web，不需要被安装，所以理论上 PWA 可以仅依靠一套代码在任何设备上运行，省去了大量的学习及开发成本。

再加上服务器内容推送以及后台数据同步等等特性，目前的 PWA 使用体验可谓直逼 Native App，而且在未来还会更加强大。

如何构建 PWA

首先，我们需要下面几个东西：

• HTTPS 支持
• 具备响应式设计的网页
• manifest.json 文件，包含：
  • short_name 字段，用于主屏幕显示
  • name 字段，用于安装横幅
  • start_url 字段，用于加载 App
  • icons 字段，并至少包含一个 192x192 png 图标
  • 其余可选字段可参考 MDN

然后，我们需要在 HTML 中引入该 manifest.json 文件：

<link rel="manifest" href="manifest.json" />

接着在 main.js 中注册 Service Worker：

if ('serviceWorker' in navigator) {
  // 由于注册 SW 需要耗费一定时间，所以一般在 onload 事件中执行
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(registration => {
      console.log('ServiceWorker registration successful.', registration)
    }).catch(error => {
      console.log('ServiceWorker registration failed: ', error)
    })
  })
}

最后在 App 根目录创建 sw.js （后台运行脚本），并尝试各种牛逼的 API， 至于用法还有原理不是我一两句话就能讲明白的，急于求成的话可以直接打开 DevTools 看我的代码，就在 Sources > sw.js 里面，其中大部分都是依照 Chrome 的 newtab-serviceworker.js 写的。

关于 icons，也就是添加到主屏幕后显示的图标，推荐去 RealFaviconGenerator 生成，种类非常全，能想到的它几乎都有。

全部完成之后，便可通过 DevTools 中的 Audits 来检测应用是否构建成功，即便没成功也会给你相应的提示。

PWA 的前景

在中国，几乎所有安卓机都不会预装 Chrome，iOS 则目前根本不支持这东西，这也是为什么 PWA 在我们这儿一直推行不起来。 再加上最近的微信小程序大行其道，PWA 目前的处境可谓十分尴尬。

但另一方面，PWA 所代表的设计理念则是小程序之流所不能比的。 而且它的各项技术也正在被列入 W3C 草案，并日渐标准化，同时支持的平台也日渐增多。

可以说，前者是整个行业的未来发展趋势，而后者仅仅迎合现今市场。

所以，我认为 PWA 是很难被历史所冲走的，必将在未来大放异彩，再不济也会对今后的 Web 设计产生深远影响。

最后，推荐一篇黄玄前辈写的下一代 Web 应用模型，写的非常好。 他的博客也做成了 PWA，其中 Service Worker 部分的代码我愣是没读懂，可能是我太菜了吧。。Orz

THE END