前两天 angular.io 发布新版本，一开始以为只是界面样式做了一些变动，后来为了查资料怎么发现打开的速度简直牛B了（要知道在天朝打开angular.io多么费劲啊）。然后我到twitter中了解angular进展，竟然这一次官网新版本是为了试验 Service Worker。
什么是Service Worker
一直对 Service Worker 很关注，离线体验、定期同步、推送通知等这些光环多么久让向往呀。
Service Worker 可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline First）。这是原生APP 本来就支持的功能，这也是相比于 web app，原生 app 更受青睐的主要原因。
有关于更多关于Service Worker的定义请参与MDN。
Angular Service Worker
应该说Angular一开始就对Service Worker的支持，只不过受限于浏览器一些硬性，所以一直好像都没有什么人谈及。
直到这一次……
而本文会根据一个简单的示例，让我们一起了解Service Worker在Angular的运用。
1、前提条件
Service Worker 需要一些前提条件，大概是：
- 浏览器是否支持Service Worker。
- Service Worker 请求协议必须是 ＨＴＴＰＳ。（但我实测使用http-server运行并无须https）
2、安装与运行
官网提供一个 @angular/service-worker 按官方大概会在 Angular4.3.0 时移入 @angular/core 中，可见这地位多少重要啊。
当然啦，目前是试验性，所以如果您体验它，需要以下设置：
npm install @angular/service-worker --save
ng set apps.0.serviceWorker=true
现在我们必须运行 ng build -prod 构建生产版本，对于 ng serve 并不会启动Service Worker，这样 Service Worker 配置信息自动添加到我们的项目当中。
最后，利用静态服务器，运行 ./dist。
http-server ./dist
当你首次打开 http://127.0.0.1:8080/ 后会自动缓存我们angular生产文件包，这一点，可以通过Chrome > dev tools > Application > Service Worker 加以验证。
那么，接下来当你断点 http-server 服务后，依然能访问 http://127.0.0.1:8080/。
3、我好像什么都没有做！
是的，我们的确什么都没有做，这一切 angular cli 都帮忙了。我们可以通过 ./dist 了解一些细节。
Service Worker配置
ngsw-manifest.json 是 Service Worker 配置文件。
{
"static": {
"urls": {
"/polyfills.a7151445bffeeb4c3ed1.bundle.js": "8562b2db4e35a23f44238e4f047e511f1a68c84d",
////////////////////all static files////////////////////
"/index.html": "0511d96f8521033a561c607afc9ec7f168e7d358"
},
"_generatedFromWebpack": true
}
}
这是Angular Cli默认生成的配置信息，里面是将 ./dist 文件夹的所有（包括assets）的路径写入 urls 节点中。
不过这个配置文件我们可以进行自定义，只需要创建 ./src/ngsw-manifest.json 文件。当然这样我们可以配置更多细节的内容。
当前的Angular Cli 1.1.1/1.2.0-beta.1无法自定义ngsw-manifest.json #6654，所以只能期望工具的跟上，当然这一切只是时间的问题。
static.urls（支持正则）
需要缓存的文件清单。
static.ignore（支持正则）
忽略缓存的文件清单。
static.versioned（支持正则）
Service Worker 会根据此规则来判断文件是否需要同步，像Webpack构建的文件名中会有哈希值，这样 Service Worker 就不需要获取文件后才知道是不是最新版本了。
externals
需要缓存的外部文件，比如我们 iconfont.cn 的在线文件。
routing
缓存路由。
"routing": {
"index": "/index.html",
"routes": {
"/(?!e?plnkr)[^/.]*$": {
"match": "regex" // or "exact"
}
}
}
dynamic
缓存策略配置。
{
"dynamic": {
"group": {
"name": "hi-service-worker",
"cache": {
"optimizeFor": "freshness",
"maxAgeMs": "3600000",
"maxEntries": "20",
"strategy": "lru"
}
}
}
}
PWAs
如果你是Google技术宅，那么这个名词应该不陌生。
PWAs是指2017年2月4日，谷歌推出的“小程序”增强型网页应用（ Progressive Web Apps，简称 PWAs），它无需下载安装，却可以和本地APP一样，放置在桌面上。
而愿景交由你自己想象吧！
结论
在 Angular 世界里，我们只需要通过简单的配置就能让现有 Angular APP 快速、可靠的支持Service Worker，这是一件多么让愉快的事情呀！
happy coding!
