3

前两天 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 请求协议必须是 HTTPS。(但我实测使用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!


如果觉得我的文章对你有用,请随意赞赏
载入中...