[翻译]Angular Service Worker 介绍

原文
Service workers 使用原生js代码增强了传统web应用，使用户体验到更高的可靠性与更好的体验。

Service worker只是一个运行在浏览器端并可为应用管理缓存的脚本

Service workers 是作为一个客户端代理。它们拦截所有应用的http请求，然后自定义如何去回复。例如：它们可以查询本地的缓存，可以直接把缓存作为回复内容。这些代理不限于api的请求，还包括在HTML里的资源请求还有index.html里的初始化请求。基于Service workers的缓存是完全可编程的，不依赖于服务器指定的缓存头。

不像如angular应用的bundle脚本，在关闭页面后就消失了，service worker 是可以一直保留的。下次在同一浏览器打开应用，service worker是首先加载的，并可以拦截所有的资源请求。如果你的service worker是如此配置的，它就可以在无网络的情况下完成应用的加载。

即使在一个快速可靠的网络中，往返延迟也会在加载应用程序时产生严重的延迟。使用service worker减少对网络的依赖并可显着改善用户体验。

Angular的Service workers

利用service workers的长处可很好改善如angular一样的单页面应用。从5.0.0开始，angular加入了service worker。angular开发人员可以利用service workers去提高应用的可靠性与性能，不再需要在低层面的API层去部署。

angular的service worker是设计去优化处于低网速或不稳定网络的终端用户的体验，同时也减少提供过期数据的风险

angular的service worker的行为遵循以下的设计目标：

• 缓存一个应用就像安装一个原生的应用。这应用是被作为一个整体去缓存并一同更新。

• 一个在执行的应用是会继续使用同一版本的所有文件。它不会突然从新版本中接收新的缓存，因为很可能会前后互相冲突

• 当用户刷新应用，他们能看到最近的缓存版本。新的tab页会加载最近的缓存脚本。

• 应用更改并发布后，缓存的更新是在后台执行，而且十分快速。在更新完成前，旧版本会一直继续服务。

• service worke尽可能的节省带宽。只会在资源被修改后重新下载资源。

要支持以上的行为，angular的service worker从服务中加载一个manifest 文件。这个文件定义了要缓存的资源表，同时包括各资源内容的hashes码。当应用更新了，manifest文件也会被修改，然后通知service worker去下载新版本并作缓存。这个manifest文件是根据用户提供的配置文件ngsw-config.json去生成，这一步可依靠如Angular CLI的工具去实现

加入 Angular service 是十分简单，只需要修改 NgModule。在里面注册service worker就好，然后angular会自动注入服务，然后service worker就可以获得应用的控制权。例如，应用可以在有可用更新时获得通知，或者应用可以要求service worker去检查是否有可用的更新。

前置配置

为了使用angular的service workers，你必须是以下的Angular 和 CLI 的版本:

• 不低于Angular 5.0.0r.
• 不低于Angular CLI 1.6.0.

你的应用必须运行在支持service workers的浏览器中。最新版本的Chrome 和 Firefox 都支持。可通过可以用吗 页面去看各浏览对service worker的支持情况。

相关资源

想了解service worker，请看介绍Service Workers.

关于浏览器的支持，请看浏览器的支持 、介绍Service Workers, Jake Archibald的 Serviceworker准备好了吗, and 可以用吗.

其余的文档会继续深入service worker

更多的关于Angular service workers

你可能对以下感兴趣

• service workers入门.

你们的赞赏是我的无限动力

如果觉得文章对你有点用的话，麻烦拿出手机，这里有一个你我都有的小福利（每天一次）： 打开支付宝首页搜索“8601304”，即可领红包。谢谢支持