问题标签 [workbox]

I use Vuejs and I use workbox-webpack-plugin in order to make my site offline, I want to cache a folder which contains all my files (3 files) like picture below, but when I build my project(using Laravel-mix). The main.js (which contains everything of Vue) cannot be cached in service-woker.js. I tried some ways to fix that but those didn't work. Does anybody face this issue, do you have any solution, many thanks!

->>

有没有办法使用工作箱从注册路由下方忽略查询字符串“？screenSize =”！如果我可以使用正则表达式，我将如何在下面的场景中编写它？基本上，无论 screenSize 查询字符串是什么，我都希望匹配缓存。

在尝试了 cachedResponseWillBeUsed 插件后：我没有看到插件被应用：

workboxSW.precache默认是cacheFirst，有没有办法改变它的策略？

或者有没有办法在预缓存项上定义缓存名称，因此可以通过指定路由来覆盖预缓存项？

我曾经sw-toolbox用于管理我的服务人员 - 小、简单、有效。现在谷歌已经发布Workbox SW（它取代了 sw-toolbox 和 sw-precache）我需要迁移，但我正在努力寻找：

a) Workbox 的单个 .js 依赖项，我可以将其包含在我的项目中
b) 用于构建单个 .js 依赖项的自定义构建工具
c) 在我的项目构建中包含 Workbox 构建的方法

我会以错误的方式解决这个问题吗？

我正在开发 PWA，我正在尝试使用工作箱来管理服务人员和资产缓存。

在我的 PWA 中，如果设备在线，我必须显示所有较新的图像，如果没有，则显示缓存中的图像。

当我尝试实现它时，我看到图像上的 staleWhileRevalidate 方法在每个图像的页面中只调用一次，如果我尝试多次刷新也是如此。我需要关闭网页，当我重新打开它时，图像会正确更新。它以这种方式工作是正常的吗？

当我使用 localhost 尝试时，每次重新加载页面时都会调用 staleWhileRevalidate，但是当我在远程服务器上加载网站时，应用程序不再以这种方式工作。

service-worker.js：

index.html：

安装（不在本地主机中）

第一次重新加载（不在本地主机中）

第二次重新加载（以及更多次）

我正在使用工作箱运行时缓存来缓存外部调用（materialize.css 就是其中之一）。在我的网络选项卡中，它显示请求来自 serviceWorker（看起来不错）：

但是在缓存存储上，我的运行时缓存看起来是空的：

您可以在 chrome 的应用程序选项卡上看到我的服务人员，这是网站：https ://quack.surge.sh/

服务工作者代码：

这是预期的行为吗？我对服务人员很陌生，我不确定正确的结果是什么。

我一直在尝试使用 Workbox 在我的 React 16 项目中实现缓存。它似乎正在缓存某些东西，因为页面仍在offline模式下呈现。但我似乎无法弄清楚，为什么我的缓存版本不包含元素上的任何类名。

普通版：

缓存版本

此外，预取似乎也可以正常工作：

我已经通过 Webpack 使用以下代码块实现了 Workbox：

这可能是什么原因？图像也没有被加载，即使也应该被缓存。

编辑：

似乎.js没有加载文件。main&文件包含分配类名所需的vendor .js内容。

如您所见，.js找不到文件。这是在 a 中preload，但删除它们只会将错误转移到<script />包含文件。此外，服务工作者注册的位置似乎并不重要。

旁注：我的类名是通过使用生成的import styles from './index.scss' => <div className={styles.container} />

我正在玩工作箱，但出现以下错误：

Skipping file 'app.js' due to size. [Max size supported is 2097152, this file is 4760833]

我理解为什么它会在生产中这样做，这在生产中不是问题，因为我的 app.js 文件被缩小并且远低于该限制。

但是如何生成一个可以在开发中使用的服务工作者，包括这些更大的文件？

假设您在更新 PWA 期间，网络中断并且刷新缓存失败。这会让应用程序处于什么状态？刷新时是否会更新某些应用程序文件而其他则不会？当连接返回时，它会重试吗？多常？多少次？

在阅读了许多教程之后，我发现self.skipWaiting()它用于立即将更新应用到现有的 serviceWorker，并self.clients.claim()用于在第一次加载时立即控制。

它是在每个请求上查找更新还是在内部如何工作？使用对负载或服务人员self.clients.claim()的self.skipWaiting()性能有何影响？