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

【问题标题】：how progressive web app differ from normal web application in terms of performance渐进式 Web 应用程序在性能方面与普通 Web 应用程序有何不同
【发布时间】：2017-11-11 11:09:21
【问题描述】：

我现在一直在阅读渐进式 Web 应用程序，pwa 使用 service worker 进行离线缓存以提高性能。但是为什么我不能将 localstorage 用于与 service worker 相同的目的？这样如果我们没有从 api 请求中得到响应，我们可以从本地存储中加载数据。资产的正常浏览器缓存？

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

【问题讨论】：

那么您问的是性能还是功能差异……？
范围很广，不适合问。这是为了帮助人们调试他们的代码。
@deceze，我对功能差异更感兴趣。我们不能将数据存储在本地存储中并加载它
@Jeremy SO 并不是专门调试代码，你知道的。
@deceze 你能详细说明一下吗？这种问题总是被标记为“太宽泛”。

标签： javascript web web-applications service-worker progressive-web-apps

【解决方案1】：

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

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

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

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

【讨论】：

js/html 文件可以用浏览器缓存本身缓存吗？那么在这种情况下，服务工作者的优势是什么
当离线并尝试加载网站时，您的浏览器尝试从网络加载资源并且会失败。如果您有一个拦截这些资源请求的服务工作者，它可以将其重定向到指向缓存。以pwa.rocks 为例
关于api请求的缓存，如何缓存尚未调用的api请求，即在app的另一个页面中？
你不能缓存你没有的数据。但是您可以拦截一个 api 请求（由请求 url 标识）并用您想要的任何内容进行响应。 here你会得到更多的信息
感谢破旧，我还有一个疑问。我已通过安装横幅将我的 pwa 添加到主屏幕。之后，我从主屏幕上删除图标。然后再次没有显示安装横幅。有什么办法可以证明吗？

【解决方案2】：

您绝对可以使用 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 不被尊重。这是设计使然，是渐进增强的一个很好的例子。

我将很快发布更多关于这项技术的信息，并将其包含在我的 PWA 课程中。

【讨论】：

感谢您的信息