前兩天 angular.io 發(fā)布新版本炫隶，一開始以為只是界面樣式做了一些變動十嘿，后來為了查資料怎么發(fā)現(xiàn)打開的速度簡直牛B了（要知道在天朝打開angular.io多么費勁啊）秦忿。然后我到twitter中了解angular進(jìn)展凝赛，竟然這一次官網(wǎng)新版本是為了試驗 Service Worker宅静。
什么是Service Worker
一直對 Service Worker 很關(guān)注套利，離線體驗召嘶、定期同步、推送通知等這些光環(huán)多么久讓向往呀曲梗。
Service Worker 可以使你的應(yīng)用先訪問本地緩存資源回俐，所以在離線狀態(tài)時，在沒有通過網(wǎng)絡(luò)接收到更多的數(shù)據(jù)前稀并，仍可以提供基本的功能（一般稱之為 Offline First）。這是原生APP 本來就支持的功能单默，這也是相比于 web app碘举，原生 app 更受青睞的主要原因。
有關(guān)于更多關(guān)于Service Worker的定義請參與MDN搁廓。
Angular Service Worker
應(yīng)該說Angular一開始就對Service Worker的支持引颈，只不過受限于瀏覽器一些硬性，所以一直好像都沒有什么人談及境蜕。
直到這一次……
而本文會根據(jù)一個簡單的示例蝙场，讓我們一起了解Service Worker在Angular的運用。
1粱年、前提條件
Service Worker 需要一些前提條件售滤，大概是：
- 瀏覽器是否支持Service Worker。
- Service Worker 請求協(xié)議必須是 ＨＴＴＰＳ台诗。（但我實測使用http-server運行并無須https）
2完箩、安裝與運行
官網(wǎng)提供一個 @angular/service-worker 按官方大概會在 Angular4.3.0 時移入 @angular/core 中，可見這地位多少重要啊拉队。
當(dāng)然啦弊知，目前是試驗性，所以如果您體驗它粱快，需要以下設(shè)置：
npm install @angular/service-worker --save
ng set apps.0.serviceWorker=true
現(xiàn)在我們必須運行 ng build -prod 構(gòu)建生產(chǎn)版本秩彤，對于 ng serve 并不會啟動Service Worker，這樣 Service Worker 配置信息自動添加到我們的項目當(dāng)中事哭。
最后漫雷，利用靜態(tài)服務(wù)器，運行 ./dist慷蠕。
http-server ./dist
當(dāng)你首次打開 http://127.0.0.1:8080/ 后會自動緩存我們angular生產(chǎn)文件包珊拼，這一點，可以通過Chrome > dev tools > Application > Service Worker 加以驗證流炕。
那么澎现，接下來當(dāng)你斷點 http-server 服務(wù)后仅胞，依然能訪問 http://127.0.0.1:8080/。
3剑辫、我好像什么都沒有做干旧！
是的，我們的確什么都沒有做妹蔽，這一切 angular cli 都幫忙了椎眯。我們可以通過 ./dist 了解一些細(xì)節(jié)。
Service Worker配置
ngsw-manifest.json 是 Service Worker 配置文件胳岂。
{
"static": {
"urls": {
"/polyfills.a7151445bffeeb4c3ed1.bundle.js": "8562b2db4e35a23f44238e4f047e511f1a68c84d",
////////////////////all static files////////////////////
"/index.html": "0511d96f8521033a561c607afc9ec7f168e7d358"
},
"_generatedFromWebpack": true
}
}
這是Angular Cli默認(rèn)生成的配置信息编整，里面是將 ./dist 文件夾的所有（包括assets）的路徑寫入 urls 節(jié)點中。
不過這個配置文件我們可以進(jìn)行自定義乳丰，只需要創(chuàng)建 ./src/ngsw-manifest.json 文件掌测。當(dāng)然這樣我們可以配置更多細(xì)節(jié)的內(nèi)容。
當(dāng)前的Angular Cli 1.1.1/1.2.0-beta.1無法自定義ngsw-manifest.json #6654产园，所以只能期望工具的跟上汞斧，當(dāng)然這一切只是時間的問題。
static.urls（支持正則）
需要緩存的文件清單什燕。
static.ignore（支持正則）
忽略緩存的文件清單粘勒。
static.versioned（支持正則）
Service Worker 會根據(jù)此規(guī)則來判斷文件是否需要同步，像Webpack構(gòu)建的文件名中會有哈希值屎即，這樣 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技術(shù)宅虽另，那么這個名詞應(yīng)該不陌生暂刘。
PWAs是指2017年2月4日，谷歌推出的“小程序”增強(qiáng)型網(wǎng)頁應(yīng)用（ Progressive Web Apps捂刺，簡稱 PWAs）谣拣，它無需下載安裝，卻可以和本地APP一樣族展，放置在桌面上森缠。
而愿景交由你自己想象吧！
結(jié)論
在 Angular 世界里仪缸，我們只需要通過簡單的配置就能讓現(xiàn)有 Angular APP 快速贵涵、可靠的支持Service Worker，這是一件多么讓愉快的事情呀！
happy coding!
