如何让Angular支持Service Worker

前两天 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!