详解使用angular框架离线你的应用（pwa指南）
简介
关于serviceworker，网络上已经有了较多的文章。总的来说它依靠缓存资源，拦截http请求，来帮助我们达到离线使用网站的效果。
而angularcli为了让使用serviceworker更加便利，为开发者提供了一个配置窗口（ngsw-config.json）和一个与serviceworker通讯的服务（SwUpdate）。
启用
1、新建项目后在项目根目录下键入ngadd@angular/pwa。
会为你的项目添加一些文件，其中包括上文提到的ngsw-config.json，为了即刻感受离线应用的魅力，现暂不需配置。
2、安装http-servernpminstallhttp-server-g
将用http-server启用的服务器来加载应用，这么做是为了模拟真实的生产环境，因为ngserve环境下无法启用serviceworker。
3、键入ngbuild--prod进行打包。打包完成后进入dist下的项目根目录下，键入http-server-p
4、打开浏览器进入控制台，以chrome为例，在network选项卡上勾选offline模拟离线使用。
此时重新刷新网页发现页面依然能够在离线状态下显示，说明serviceworker已经工作了。
配置
以上并没有手动配置ngsw-config.json，然而初始的配置还有许多不足，比如无法拦截缓存api请求。因此需要对该文件的配置参数做一个大概了解（点击浏览官方配置说明）。
参考官方的说明，我们了解到可以配置静态资源的缓存策略（配置项中的assetGroups）以及动态资源的缓存策略（配置项中的dataGroups）。
静态资源配置（assetGroups）
interfaceAssetGroup{
name:string;
installMode?:'prefetch'|'lazy';
updateMode?:'prefetch'|'lazy';
resources:{
files?:string[];
/**@deprecatedAsofv6`versionedFiles`and`files`optionshavethesamebehavior.Use`files`instead.*/
versionedFiles?:string[];
urls?:string[];
};
}
这是该配置项的接口，下面对各个属性做一个简要的说明：
- resources属性下可配置本地的静态资源（resources.files）和通过cdn来的静态资源（resources.urls）
- name是需要编写的该资源集合的唯一的名字
- installMode配置的是你的网站应用第一次在当前浏览器加载后，serviceworker应该进行的缓存策略。选择'prefetch'会将resources列出的资源一股脑儿的预先缓存起来，不管当前是否有访问到。选择'lazy'则不会预先缓存，而是在用到时才会进行缓存。
- updateMode配置的是当检测到资源的版本改变之后，所进行的资源缓存策略。
如何得知资源的版本发生了变化呢？angularserviceworker会对比资源内容的hash值。如果hash值不同则版本不同。选择'prefetch'会立即缓存更新的资源，选择'lazy'会在用到时在进行缓存。不过，这里要注意如果在installMode的配置中没有选择'lazy'模式，则这里的'lazy'模式也不会生效。
动态资源配置（dataGroups）
exportinterfaceDataGroup{
name:string;
urls:string[];
version?:number;
cacheConfig:{
maxSize:number;
maxAge:string;
timeout?:string;
strategy?:'freshness'|'performance';
};
}
这是缓存动态资源的配置项，其实就是缓存的ajax、fetch的response，将这些api请求的响应体进行缓存后，就可以在离线状态下使用。其中：
- urls配置api的url
- cacheConfig配置具体的缓存策略：
- maxSize缓存的最大条目数或响应数，太多则会暂用系统资源
- maxAge过期时间，该项与下面提到的strategy策略配合，如果设置过长，容易呈现老资源给用户。
- timeout是指的应用发起真实网络请求后的等待时间，如果超时将会配合下面提到的strategy进行动作
- strategy策略，选择'performance'会直接拦截网络请求，返回缓存（前提是有缓存，并且没有超过maxAge的时间），选择'freshness'会在timeout超时的时候返回缓存。
与serviceworker通讯
与serviceworker通讯可以让我们主动做很多事情，而不是仅仅依赖于ngsw-config.json配置，通过依赖注入一个SwUpdate*服务，我们可以主动要求查询、更新、激活应用的版本，（这部分内容笔者还未投入应用，详见官网描述）
总结
这篇文章我们分享了如何在angular里面使用serviceworker进行离线场景的增强，其中包括
- 引入@angular/pwa
- 安装http-server，模拟生产环境
- 配置ngsw-config.json缓存策略
- 简单描述了与serviceworker通讯的概念
相信今后angular框架能够在pwa应用方便给我们更多的方便。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。