问题标签 [workbox]

对于 3.0 的当前版本，workbox 会生成带有文件名的清单文件，precache-manifest.[hash].js 但是这个文件将跟随我们publicPath在 webpack 中的内容。所以在我的情况下，它会在文件夹中生成文件/dist/precache-manifest.[hash].js。

问题：

有没有办法从工作箱配置中更改这个文件夹，假设我想把这个文件放在dist/static/precache-manifest.[hash].js.

非常感谢您的帮助。

我的构建会生成一个如下所示的预缓存清单：

在我的服务人员中，我在顶部有这个：

importScripts("/precache-manifest.14324d3ff39abcb589e6152671cf34d2.js", "https://storage.googleapis.com/workbox-cdn/releases/3.0.1/workbox-sw.js");

这在底部：

self.__precacheManifest = [].concat(self.__precacheManifest || []) workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

这可行，但是现在我想从服务人员调用内部的方法，/js/vendor.ea92339a.js我该如何完成呢？

额外信息：我使用的构建过程是 vue-cli 3，webpack 4 分支（仍处于测试阶段）

我正在尝试使用 Workbox 将服务人员集成到我的网络应用程序中。但是，我不太确定如何缓存现在在服务器端动态生成的 index.html 文件。我正在使用workbox-webpack-plugin以下配置。

我能够成功注册服务人员并缓存我的 JS 包。但是，我不确定缓存在服务器端生成的 index.html 的最佳做法是什么。

我正在使用带有 Webpack 的 Workbox 在运行时在我的站点上缓存多个资产，并使用 Service Worker 交付它们。我能够在缓存存储中成功查看来自外部 CDN 的图像，并确认它们是通过 SW 交付的。

但是，当涉及到 JS 和 CSS 文件等本地托管（同源）资产时，它们的命名缓存显示为空。加载页面后，这些资产被交付(from ServiceWorker)，并且没有来自 SW 的额外网络请求。刷新缓存存储或缓存本身并没有什么不同。

这是 Webpack 配置：

• 如果这些资产没有出现在缓存中，它们是如何由 SW 交付的？
• 是否有某种原因它们在缓存中不可见？

目前，我正在尝试使用服务人员缓存 api 调用。它确实缓存了 api 请求。但是，它似乎没有利用缓存。当我检查 devtool 上的网络选项卡时，我看到了来自 service worker 和 workbox 的请求，甚至比正常请求还要慢。

我用 webpack 3 尝试了旧版本，缓存的 api 几乎像 3ms 一样立即返回。

在没有第二次通话之前

工作箱-webpack-插件配置

})

服务人员请求创建某种瓶颈？

附带问题 - 网络请求中的两个时间段有什么区别？正如您从图像中看到的，第一次请求时有 3.53 秒和 2.01 秒

我相信我从一开始就错误地设置了我的服务人员，现在我无法重置所有内容。我现在的问题是用户解决问题的唯一方法是手动取消注册服务工作者和缓存文件，这不是很有帮助。我在 webpack 中添加了一个脚本来取消注册服务工作者并删除缓存的存储文件，但是由于捆绑文件无论如何都被用户的浏览器缓存，他们甚至看不到我对文件所做的更改，所以他们是坚持旧代码。

我已经尝试了我能想到的一切并开始耗尽资源，但似乎我不能为用户代理做很多事情，因为他们一直在接收旧文件，甚至看不到这些新的变化。

另外，我添加了缓存破坏，我认为它可以解决这个问题，但是，它没有。

有什么建议么？

我对预缓存根 URL 的正确方法（即“/”）有点困惑。

如果我使用 webpack-plugin-workbox 生成 precacheManifest，它不包含“/”条目。“/index.html”当然包括在内。现在，如果用户加载应用程序，预缓存启动，并且用户尝试在没有网络连接的情况下加载根 URL，则该站点将不会加载，因为预缓存对根 URL 没有任何作用。如果用户尝试加载“/index.html”，一切正常。但是用户不加载那个 url，他们加载的是根 url。那么如何缓存呢？

我是否应该使用navigateFallback: index.html选项，据我了解，该选项会将用户重定向到提供的 url，以防连接丢失和缓存未命中？

或者我应该使用templatedUrls: { "/": [ "index.html" ] }选项，据我了解，该选项基于 index.html 生成一个哈希，然后根据该哈希值的变化缓存“/”？

还是我应该使用一些完全不同的策略？

太感谢了！

我们有一个 SPA - 单页应用程序，通过 index.php 页面加载，然后所有交互/请求都是使用 jQuery 3.2.1 的 AJAX 调用。

在我们的服务工作者中，我们正在使用：

这有效 - 从服务器加载文件并创建缓存：

但是，从来没有不拾取任何版本的 JS 文件 - 我关闭 Web 选项卡并重新加载应用程序，然后将旧版本的 JS 文件呈现给应用程序。

我希望“staleWhileRevalidate”能够在异步请求中获取更新的 JS 文件并为下次更新缓存。

任何建议表示赞赏。

工作箱似乎没有清理旧缓存。例如，如果我指定这样的缓存版本：

...一旦新的服务工作者激活，我希望工作箱会清理旧版本的缓存，但我的缓存存储如下所示：

自己手动清理缓存是否安全？例如在我的服务人员中：

我刚开始制作 PWA。

我正在使用 Workbox 制作我的第一个 PWA，这是一个非常基本的新闻获取应用程序。

我正在使用newsapi.org获取新闻数据和工作箱来制作我的服务人员。

除了图像之外，我已经设法让所有东西都按照需要离线工作。

虽然图像被正确缓存，但在激活离线模式时它们不会显示。

这是我的app.js文件：

这是我的Service Worker 文件 (sw.js)：

问题的屏幕截图（可以看出，图像缓存已正确填充，但我似乎无法在离线时显示它们）

任何有关如何解决此问题的帮助将不胜感激。