时间:2021-05-25
简介
关于service worker,网络上已经有了较多的文章。总的来说它依靠缓存资源,拦截http请求,来帮助我们达到离线使用网站的效果。
而angular cli为了让使用service worker更加便利,为开发者提供了一个配置窗口(ngsw-config.json)和一个与service worker通讯的服务(SwUpdate)。
启用
1、新建项目后在项目根目录下键入ng add @angular/pwa。
会为你的项目添加一些文件,其中包括上文提到的ngsw-config.json,为了即刻感受离线应用的魅力,现暂不需配置。
2、安装http-server npm install http-server -g
将用http-server启用的服务器来加载应用,这么做是为了模拟真实的生产环境,因为ng serve环境下无法启用service worker。
3、键入ng build --prod进行打包。 打包完成后进入dist下的项目根目录下,键入http-server -p <port>将打包后的应用部署在http-server指定的端口上。
4、打开浏览器进入控制台,以chrome为例,在network选项卡上勾选offline模拟离线使用。
此时重新刷新网页发现页面依然能够在离线状态下显示,说明service worker已经工作了。
配置
以上并没有手动配置ngsw-config.json,然而初始的配置还有许多不足,比如无法拦截缓存api请求。因此需要对该文件的配置参数做一个大概了解(点击浏览官方配置说明)。
参考官方的说明,我们了解到可以配置静态资源的缓存策略(配置项中的assetGroups)以及动态资源的缓存策略(配置项中的dataGroups)。
静态资源配置(assetGroups)
这是该配置项的接口,下面对各个属性做一个简要的说明:
如何得知资源的版本发生了变化呢?angular service worker会对比资源内容的hash值。如果hash值不同则版本不同。选择'prefetch'会立即缓存更新的资源,选择'lazy'会在用到时在进行缓存。不过,这里要注意如果在installMode的配置中没有选择'lazy'模式,则这里的'lazy'模式也不会生效。
动态资源配置(dataGroups)
这是缓存动态资源的配置项,其实就是缓存的ajax、fetch的response,将这些api请求的响应体进行缓存后,就可以在离线状态下使用。其中:
与service worker通讯
与service worker通讯可以让我们主动做很多事情,而不是仅仅依赖于ngsw-config.json配置,通过依赖注入一个SwUpdate*服务,我们可以主动要求查询、更新、激活应用的版本,(这部分内容笔者还未投入应用,详见官网描述)
总结
这篇文章我们分享了如何在angular里面使用service worker 进行离线场景的增强,其中包括
相信今后angular框架能够在pwa应用方便给我们更多的方便。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Google近日宣布,他们将推迟Chrome浏览器原定强制要求ProgressiveWebApps(PWA)具备离线功能支持的计划。相对于普通网站,使用Prog
Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular2或其他框架开发的应用也有很多在使用Webpack。本节流程如图:
Angular是什么Angular是由谷歌开发与维护一个开发跨平台应用程序的框架,同时适用于手机与桌面。Angular有什么特点基于Angular我们可以构建适
本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能,分享给大家,具体如下:A:什么是HMR?Q:HMR(热替换)用于在运行的应用程
规范化设计下的网页,通常都会有系统的网页风格指南。如果你想确保你的网页设计能够更加一致,并确保每个参与者和使用者都能在规范的框架内设计、开发和使用,那么风格指南