问题标签 [workbox]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1380 浏览

laravel - Workbox: cannot cache all files when build project

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!

->>picture-description

0 投票
5 回答
4422 浏览

caching - 使用工作箱时如何从缓存的 url 中忽略 url 查询字符串?

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

在尝试了 cachedResponseWillBeUsed 插件后:我没有看到插件被应用: 在此处输入图像描述

0 投票
2 回答
369 浏览

javascript - 如何对 workboxSW 预缓​​存项目使用 staleWhileRevalidate?

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

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

0 投票
1 回答
452 浏览

visual-studio - 从 Google 的 sw-toolbox 迁移到 Workbox SW (Visual Studio)

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

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

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

0 投票
0 回答
471 浏览

javascript - Workbox,staleWhileRevalidate 在图像上仅调用一次

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

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

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

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

service-worker.js

index.html

安装(不在本地主机中) 在此处输入图像描述

第一次重新加载(不在本地主机中) 在此处输入图像描述

第二次重新加载(以及更多次) 在此处输入图像描述

0 投票
1 回答
6423 浏览

javascript - 使用工作箱运行时缓存,请求不会显示在 chrome 上的缓存存储中

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

在此处输入图像描述

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

在此处输入图像描述

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

服务工作者代码:

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

0 投票
1 回答
50 浏览

javascript - ServiceWorker 离线 - HTML 中没有类名

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

普通版: 互联网连接示例

缓存版本 网站的缓存版本

此外,预取似乎也可以正常工作: 预取选项卡

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

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

编辑:

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

.js 文件找不到

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

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

0 投票
1 回答
8813 浏览

workbox - 如何缓存较大的文件以进行开发

我正在玩工作箱,但出现以下错误:

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

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

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

0 投票
1 回答
74 浏览

workbox - 如果网络在 Service Worker 缓存更新时出现故障,我会阻塞 PWA 吗?

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

0 投票
1 回答
2491 浏览

caching - 在 service worker 中使用 self.clients.claim() 和 self.skipWaiting() 可能会增加加载时间?

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

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