当前位置: 首页 > Web前端 > HTML

通过ChromeDevTools中的网络选项模拟网站的离线访问模式

时间:2023-04-02 11:34:38 HTML

ServiceWorkerCachingAPI的主要优点之一是它为您提供比内置浏览器缓存更精细的控制。例如,ServiceWorker可以在用户第一次运行您的Web应用程序时缓存多个请求,包括他们尚未访问的资产。这将加快后续请求。您还可以实施自己的缓存控制逻辑,以确保被认为重要的资产保留在缓存中,同时删除较少使用的数据。如果缓存标头用于缓存页面上的元素,则用户触发的刷新将导致浏览器跳过HTTP缓存。然而,ServiceWorker的fetch事件将始终拦截请求,这意味着开发人员可以随时从缓存中为它提供服务,如果他们愿意的话。ServiceWorkers增强了传统的Web应用程序部署模型,并使应用程序能够提供与运行在最终用户操作系统和硬件上的本机应用程序相同的可靠性和性能的用户体验。将ServiceWorker添加到Angular应用程序是将应用程序转变为渐进式Web应用程序(也称为PWA)的步骤之一。简而言之,我们可以将ServiceWorker视为在Web浏览器中运行并管理应用程序缓存的脚本。ServiceWorkers充当网络代理。它们拦截应用程序发出的所有传出HTTP请求,并提供以编程方式指定ServiceWorker应如何响应这些请求的能力。例如,ServiceWorker可以查询本地缓存并提供缓存响应(如果可用)。这种拦截和代理不仅限于通过编程API发出的请求,例如fetch;它还包括在HTML中引用的资源,甚至是对index.html的初始请求。因此,基于ServiceWorker的缓存是完全可编程的,并且不依赖于服务器指定的缓存标头——它们是HTTP层的缓存,与ServiceWorker缓存是两个不同的层。与组成您的应用程序的其他脚本(例如Angular应用程序包)不同,ServiceWorker即使在用户关闭Chrome浏览器中的选项卡后也会保留。下次浏览器加载应用程序时,serviceworker将首先加载,并且可以拦截每个资源请求以加载应用程序。即使在快速可靠的网络上,请求之间的往返延迟也会导致加载应用程序的显着延迟。使用ServiceWorker降低对网络的依赖,可以显着提升用户体验。下图是一个网站请求被ServiceWorker响应的结果:即使在Chrome开发者工具中将浏览器临时设置为离线模式,这些HTTP请求也可以从ServiceWorker缓存中正常响应: