Web Starer Kit 是一个来自Google于14年推出的一个便于快速构建响应式网站的脚手架。
由Gulp构建,官网简介如下:
Web Starter Kit 是用于 Web 开发的样板文件。在多台设备上构建卓越体验并且以性能为导向的工具。帮助您遵循 Google 的网页基础知识中介绍的最佳做法,以便保持工作效率。
可以看出,Google推出这个脚手架的目的重点有两个,一是规范网站开发流程,提供样板文件以保证一定的性能。而配套的网页开发基础知识也提供了一定支持。
将github仓库代码拷贝到本地,可以看到
目录结构如上图,app内存放项目代码文件,dist文件夹内存放gulp编译打包后的文件。docs内则是一些官方的教学markdown文档。先看看package.json的内容。
可以看到依赖还是非常常规的gulp全家桶。通过读他的依赖大概能猜到实现了以下功能:
- apache本地服务器
- babel编译es6
- browser-sync多终端同步调试
- eslint代码检查,js压缩
- sass编译及css处理
- 图片处理
以上功能都比较常规,唯一很少看到的就是psi以及,sw-precache,sw-toolbox
在psi的npm包介绍中,可以看出,它是一个测试网页性能速度的工具。
在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进行响应。
这是谷歌开发者社区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而做的一个脚手架工具。
以上,笔者水平有限,欢迎提出指正