Angular Service Worker 在线性能答案

【问题标题】：Angular Service Worker performance for onlineAngular Service Worker 在线性能
【发布时间】：2020-04-23 20:54:56
【问题描述】：

根据 Angular 官方文档https://angular.io/guide/service-worker-intro

Service Worker 充当网络代理。他们拦截所有应用程序发出的传出 HTTP 请求，并且可以选择如何回应他们。例如，他们可以查询本地缓存并交付如果有可用的缓存响应。代理不限于通过编程 API 发出的请求，例如 fetch；它也是包括 HTML 中引用的资源，甚至最初的请求索引.html。因此，基于 Service Worker 的缓存完全可编程并且不依赖于服务器指定的缓存头。

根据我上面的理解，它可以用于网络连接缓慢或网站离线时。

我想知道是否可以利用caching 机制，以便用户在第二次访问并且站点仍然在线时只会看到缓存页面。如果服务器端数据发生变化，则应更新页面。我想主要用于应用性能。

我得到的大多数示例，它仅适用于慢速网络或离线站点。

我正在使用Angular 7.2.11

【问题讨论】：

标签： angular performance caching

【解决方案1】：

我相信您正在寻找一个渐进式网络应用程序。基本上，您希望将一些数据存储在缓存中，而将其余数据存储在浏览器的网络存储中。根据您的应用程序的架构、数据大小和要求，您必须决定将数据存储在何处以及何时访问它。如果您需要更多详细信息，请查看下面的链接并发表评论:) https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook

【讨论】：

应用在线时是否可以获取缓存页面？
绝对可能，但您需要考虑在用户引用缓存版本时可能会更改数据的进程。例如，在我当前的通知开发任务中，我从当前 API 调用中获取了未读消息的数量，如果它与以前的数量相同，我只是简单地使用缓存版本来填充相应的组件。如果数据发生变化（例如管理员更改），号码会发生变化，并且它不会匹配最后一个 API 调用号码，因此会调用 update 方法用来自 API 的当前更新替换缓存。