Google响应式网站脚手架 web-starter-kit 初探

Web Starer Kit 是一个来自Google于14年推出的一个便于快速构建响应式网站的脚手架。
由Gulp构建，官网简介如下：

Web Starter Kit 是用于 Web 开发的样板文件。在多台设备上构建卓越体验并且以性能为导向的工具。帮助您遵循 Google 的网页基础知识中介绍的最佳做法，以便保持工作效率。

可以看出，Google推出这个脚手架的目的重点有两个，一是规范网站开发流程，提供样板文件以保证一定的性能。而配套的网页开发基础知识也提供了一定支持。

将github仓库代码拷贝到本地，可以看到

目录结构

目录结构如上图， app内存放项目代码文件， dist文件夹内存放gulp编译打包后的文件。 docs内则是一些官方的教学markdown文档。先看看package.json的内容。

image.png

可以看到依赖还是非常常规的gulp全家桶。通过读他的依赖大概能猜到实现了以下功能：

• apache本地服务器
• babel编译es6
• browser-sync多终端同步调试
• eslint代码检查，js压缩
• sass编译及css处理
• 图片处理

以上功能都比较常规，唯一很少看到的就是psi以及，sw-precache，sw-toolbox

在psi的npm包介绍中，可以看出，它是一个测试网页性能速度的工具。

image.png

在gulpfile.js文件中将其类型设置为mobile移动端测试，即专门为移动端设置了一个速度测试。

再看sw-precache和sw-toolbox。
其中，sw-toolbox介绍为：

Service Worker Toolbox (or SW-Toolbox) provides some simple helpers for use in creating your own service workers.
为创建自己的service worker提供了一些简单的帮助

而sw-precache则是：

A node module to generate service worker code that will precache specific resources so they work offline.
一个生成可帮助预缓存特定资源以离线工作的service worker代码的包

通过介绍可以看出，这两个包都是为了将service worker集成进这个脚手架中，而service worker是什么呢，这里的介绍是可以缓存特定资源用以离线工作。
在谷歌开发者社区中，将Web Start Kit放在了介绍如何制作Progressive Web App。关于什么是Progressive Web App，可以看看这篇文章。总结一下，Progressive Web App主要的四个亮点就是

• Add To Homescreen，添加至主屏
• App shell ，数据填充的壳子，当异步加载到了数据之后再进行填充
• Offline 离线功能
• Re-engageable，目前来讲就是推送通知
  是不是很眼熟。。嗯，跟微信小程序简直。。

别的不说，如何实现Offline离线功能呢，就是通过Service Worker搞出来的，通过service worker这个可以在后台允许的线程，搭配上CacheStorage对资源进行缓存，并拦截请求使用Fetch API进行响应。

Follow Best Practices

这是谷歌开发者社区web首页的一个块，写着最好的实践方式就是使用Https，优化性能，以及响应式。
首先Https也是为了Service Worker，Service Worker目前只能在Https协议(或者localhost)下运行。优化性能也是为了提升PWA的使用体验，使其更像一个Native App，而响应式自然是为了在不同的设备上均能良好使用，也是PWA的必备技能点。

而这几点，在Start Web Kit 这个脚手架中，集成了Service Worker的运行和自动生成，一套响应式的模板，以及PageSpead速度测试，除此之外，还有 Web App Manifest文件 。方便开发者规范，高效的开发PWA。

这种场景就像，微信为了推他的微信小程序，做了一个小程序的开发测试工具，也定制了一堆规范，组件，自定义文件等等。而Start Web Kit也可以看成是Google为了推PWA而做的一个脚手架工具。

以上，笔者水平有限，欢迎提出指正