原文
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
你可能对以下感兴趣
你们的赞赏是我的无限动力
如果觉得文章对你有点用的话,麻烦拿出手机,这里有一个你我都有的小福利(每天一次): 打开支付宝首页搜索“8601304”,即可领红包。谢谢支持