渐进式Web应用程序在性能方面与普通Web应用程序的区别

Question

我一直在阅读关于渐进式网络应用程序，pwa使用服务工作者进行离线缓存以加快性能。但为什么我不能将localstorage用于与服务工作者相同的目的？因此，如果我们没有从api请求获得响应，我们可以从本地存储加载数据。和资产的普通浏览器缓存？

可能这是一个愚蠢的问题，但仍然想到问这个问题。任何建议表示赞赏。

Answer 1

首先，服务工作者运行在与主应用程序不同的线程上。这就是为什么你可以使用服务工作者来提高性能的原因，因为它的操作不会影响你的主应用程序。

您可以使用localstorage在客户端存储数据，但不能将其用于脱机缓存。要从localstorgage获取数据，您需要先加载一个脚本，然后尝试访问本地存储。

SeriveWorkers也存储在客户端中，它们可以拦截网络层。因此，在您的服务工作者中，您可以决定是先从缓存中加载特定路由还是尝试从网络请求它。

结帐此视频可以很好地解释概念：https://www.youtube.com/watch?v=OBfLvqA_E4A

Answer 2

您绝对可以使用localStorage来模拟服务工作者提供的缓存功能。大约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不受尊重。这是设计和渐进增强的一个很好的例子。

我将尽快发布有关此技术的更多信息并将其纳入我的PWA课程。