渐进式 Web 应用程序在性能方面与普通 Web 应用程序有何不同

how progressive web app differ from normal web application in terms of performance

我目前一直在阅读有关渐进式网络应用程序的信息,pwa 使用 service worker 进行离线缓存以提高性能。但为什么我不能将 localstorage 用于与 service worker 相同的目的?因此,如果我们没有从 api 请求中得到响应,我们可以从本地存储加载数据。资产的普通浏览器缓存?

可能这是个愚蠢的问题,但还是想问这个问题。任何建议表示赞赏。

首先,service worker 运行在与主应用程序不同的线程上。这就是为什么您可以使用 service worker 来提高性能,因为它的操作不会影响您的主应用程序。

您可以使用本地存储在客户端存储数据,但不能将其用于离线缓存。要从 localstorage 获取数据,您需要先加载一个脚本,该脚本将尝试访问 localstorage。

SeriveWorkers也是存放在客户端的,可以拦截网络层。因此,在您的 service worker 中,您可以决定是先从缓存加载特定路由,还是尝试从网络请求它。

看看这个很好地解释了概念的视频:https://www.youtube.com/watch?v=OBfLvqA_E4A

您绝对可以使用 localStorage 来模仿 service worker 中提供的缓存功能。大约 6-7 年前,我开始这样做。 https://love2dev.com/blog/use-local-storage-to-make-your-single-page-web-application-rock/ 但是,我建议不要将 localStorage 作为您的缓存提供程序。而是使用 IndexedDB。当时 Safari 和 IE 不支持 IDB。今天所有当前的浏览器都支持 IDB。 如果浏览器不支持服务工作者,即 Safari,您可以回退到这种缓存策略。最大的区别是所有缓存都发生在 UI 线程上,而不是后台线程。它将离线工作——您需要向您的站点添加一个 appCache 清单。仅供参考,当支持服务工作者并且您有一个 appCache 清单时,服务工作者获胜。您的 appCache 未被接受。这是设计使然,也是渐进增强的一个很好的例子。

我将很快 post 详细介绍此技术并将其包含在我的 PWA 课程中。