Workbox缓存策略不能正常工作
Workbox是一个用于创建离线优先的Web应用程序的JavaScript库。它提供了一套缓存策略，可以帮助开发者更好地管理和控制网页的缓存行为。
Workbox的缓存策略包括以下几种：
- 网络优先策略：首先尝试从网络获取资源，如果网络不可用或请求失败，则从缓存中获取。
- 缓存优先策略：首先尝试从缓存中获取资源，如果缓存中不存在，则从网络获取。
- 离线优先策略：首先尝试从缓存中获取资源，如果缓存中不存在，则展示离线页面或错误页面。
- 路由策略：根据请求的URL路径匹配特定的缓存策略，可以自定义不同的缓存行为。
Workbox提供了一系列的API和工具，可以帮助开发者实现这些缓存策略。例如，通过使用Workbox的precache模块，可以在Service Worker安装阶段缓存静态资源，以便在离线时使用。另外，通过使用Workbox的routing模块，可以根据请求的URL路径匹配特定的缓存策略。
Workbox的优势在于其简单易用的API和丰富的功能。它可以帮助开发者轻松地实现离线访问、缓存管理和资源加载优化等功能，提升Web应用程序的性能和用户体验。
Workbox的应用场景包括但不限于：
- Progressive Web Apps (PWA)：Workbox可以帮助开发者将Web应用程序转变为离线可访问的PWA，提供类似原生应用的体验。
- 网页缓存管理：Workbox可以帮助开发者管理网页的缓存，提供更好的离线访问和资源加载性能。
- 资源加载优化：Workbox可以通过缓存策略和预加载等技术，优化网页的资源加载速度，提升用户体验。
腾讯云相关产品中，可以使用CDN加速服务来提供静态资源的缓存和分发，提升网页的加载速度和访问性能。具体可以参考腾讯云CDN产品的介绍：腾讯云CDN
总结：Workbox是一个用于创建离线优先的Web应用程序的JavaScript库，提供了一套缓存策略，可以帮助开发者更好地管理和控制网页的缓存行为。它的优势在于简单易用的API和丰富的功能，适用于构建离线可访问的PWA和优化网页资源加载等场景。在腾讯云中，可以使用CDN加速服务来提供静态资源的缓存和分发。
相关·内容
1回答
我正在尝试创建一个带有工作盒的PWA。我希望它能够缓存作为rest调用结果显示的图像。所以我得到链接并显示结果，但是这些图像没有被工作框缓存，我也不知道为什么。我对工作盒非常陌生，但我认为基本概念将非常简单。我增加了预缓存和以下路径：
workbox.routing.registerRoute(
/\.css$/,
new workbox.strategies.NetworkFirst()
);
workbox.routing.registerRoute(
/\.js$/,
new workbox.strategies.NetworkFirst()
);
workbox.r
浏览 0提问于2020-01-23得票数 0
回答已采纳
1回答
我正在尝试使用Workbox缓存整个页面，但它不能根据我的要求工作，我想缓存不只是html，我想缓存图像，Js，Css的整个页面，目前它只缓存html
workbox.routing.registerRoute('/about.html', new workbox.strategies.NetworkFirst());
上面的代码是我用来缓存页面的
浏览 4提问于2017-12-06得票数 0
我正在使用的一名服务人员为我的网站服务。
缓存第一网络服务工作者JS文件包含以下代码：
// This is the service worker with the Cache-first network
const CACHE = "pwabuilder-precache";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
self.addEventListener("message", (event) =&
浏览 0提问于2020-05-19得票数 0
回答已采纳
1回答
根据，跨域请求应该进行配置，以确保正则表达式与URL的开头匹配。但是，它不起作用。
服务工作人员代码如下所示。
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
workbox.routing.registerRoute(
/.*\.(png|jpg|jpeg|svg|gif)/,
workbox.strategies.cacheFirst()
);
workbox.routing.registerRoute(
new RegExp(
浏览 1提问于2018-03-15得票数 5
回答已采纳
我正在使用PWA创建一个应用程序，但是当我在数据库中更新主URL中的某些内容时，似乎没有发生任何更改，并且我必须清除服务工作者中的缓存，而在移动设备中，最终用户可能不必首先清除缓存即可使用应用程序。，有没有解决我的问题的办法？
我已经做了几种替代方法，例如屏蔽URL以避免缓存服务工作人员，但我知道这样做效率不高
这是我的服务工作者文件
importScripts('https://storage.googleapis.com/workboxcdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
workbox.setCo
浏览 16提问于2019-10-29得票数 0
1回答
我正在使用工作框缓存资源和资产的网站。我想知道这些资源是否有默认的过期时间？还是我必须设置一个？
这是我的一个缓存菜谱的示例。
/**
* Cache CSS
*/
workbox.routing.registerRoute(/cache\/css\/.+/, workbox.strategies.cacheFirst({
cacheName: 'styles',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
}),
],
}));
显示
浏览 2提问于2019-01-31得票数 2
回答已采纳
我们正在使用Workbox来预先缓存“下一步”页面的一些资源，但是我们的资源URL包含部署的日期和散列。例如"/css/2019-05-15/f00ba5/home.css“。 我们面临的问题是如何将URL的更改部分("2019-05-15/f00ba5")传递给服务工作者，并使Workbox预先缓存资产列表。 我们正在使用Workbox，我们尝试使用workbox-window从网页向SW发送消息，直到这里...啊，真灵! 但是既然SW知道了散列，我们就不知道如何利用它，因为如果我们从事件侦听器内部调用workbox.precaching.precacheAndRo
浏览 47提问于2019-05-17得票数 2
回答已采纳
1回答
现在我的sw.js看起来是这样的：
importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@4.3.1/workbox/workbox-sw.js')
// --------------------------------------------------
// Configure
// --------------------------------------------------
// Set workbox config
workbox.setConfig({
"debug": true
浏览 0提问于2019-09-03得票数 3
回答已采纳
2回答
我有一个Vue.js应用程序，我目前正在使用工作盒来缓存，所以它可以脱机工作。然而，视频似乎不适用于Safari。
我已经研究过了，所有的迹象都指向这一点：
但它似乎对我不起作用。
下面是我的代码：
Webpack
configureWebpack: {
plugins: [
new InjectManifest({
swSrc: './src/sw.js',
swDest: "sw.js",
maximumFileSizeToCacheInBytes: 5000000000
})
]}
sw.js (服务工作者)
import
浏览 10提问于2020-11-18得票数 0
回答已采纳
阅读Workbox ，我发现我无法想象在Workbox中使用“缓存优先”策略的情况。
有“过期后重新验证”的策略，首先使用缓存，然后在后台通过网络更新缓存文件。如果您更改了目标文件，这将非常有用，因为下次访问时，App将使用上次缓存的最新文件。如果你没有任何改变，我认为没有什么坏处。
在Workbox中使用“缓存优先”策略的主要目的是什么？
提前谢谢。
浏览 2提问于2018-09-06得票数 0
我正在使用Workbox使CMS网站具备脱机功能。我有服务工人疯狂和预缓存网站页面，资产和离线页面。问题是，使用预缓存时，似乎无法在不修改服务工作线程的情况下更新缓存。在我的例子中，它是一个CMS，所以作者在更新站点内容时不会重新构建这个服务工作者。我假设我可以只使用StaleWhileRevalidate策略，但令我沮丧的是，没有办法为"precacheAndRoute()“或"precache()”和"addRoute()“提供缓存策略。这似乎是Workbox团队的疏忽，但为了确认，我希望得到任何关于如何在站点页面更新时实现此解决方案而不更改服务工作者的反馈。
谢谢
浏览 4提问于2020-02-22得票数 0
我是第一次使用workbox使用serviceworker，没有任何经验。我希望当用户访问url时，相应的html必须保存到缓存中，这样当应用程序离线时，url的内容从缓存中提供。但我在浏览器devtool的缓存中看不到内容。这里我漏掉了什么？
import { registerRoute } from "workbox-routing";
import { precacheAndRoute } from "workbox-precaching";
import {skipWaiting} from 'workbox-core';
import
浏览 3提问于2020-04-25得票数 1
1回答
在我的服务工作者注册后，在第二次重新加载时，我能够缓存我想要做的响应，而不需要第二次刷新。
我使用的是Workbox版本3，即使在使用了workbox.core.skipWaiting和workbox.core.clientsClaim之后，我也无法缓存我的数据，我对渐进式web应用程序和服务工作者还很陌生，如果有任何帮助，我们将非常感谢，以下是我为服务工作者提供的代码片段-
即使在使用workbox.core.skipWaiting和workbox.core.clientsClaim之后，我也不能在第一次加载时缓存我的数据-
我的服务人员-
importScripts('https:
浏览 3提问于2019-04-10得票数 0
1回答
我正试着从workbox开始。我想把我的网站编码为PWA。它应该离线工作。为此，我想使用CacheFirst策略。我的问题是，workbox不能脱机工作。我甚至在缓存中找不到我的主html文件。
下面是我在主html文件中初始化我的ServiceWorker：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./s
浏览 10提问于2020-01-06得票数 0
2回答
我需要在每次发布后“清除”或“无效”Workbox软件缓存。
这就是我计划要做的(当然是虚拟版本)，但我没有足够的经验来理解这是否是正确的方法：
importScripts(...);
const version = 1;
const workboxSW = new WorkboxSW();
workboxSW.router.registerRoute(/\.(?:png|gif|jpg|svg|json|js|css|woff|mp3)$/,
workbox.strategies.cacheFirst({
cacheName: 'static-cache-
浏览 1提问于2018-01-29得票数 4
给定来自我的nodejs服务器的以下代码片段：
router.get('/page/:id', async function (req, res, next) {
var id = req.params.id;
if ( typeof req.params.id === "number"){id = parseInt(id);}
res.render('page.ejs' , { vara:a , varb:b });
});
我想要做我在nodejs服务器中正在做的事情，但是要从服务工作者开始。我已经使用workbox生成并构建了它，
浏览 1提问于2018-10-10得票数 0
我正在寻找如何使用这里演示的代码的最小可行示例：
我对使用Workbox (以及一般的服务人员)很陌生，并且对“workbox-食谱”库所基于的是什么感到困惑。我应该在调用warmStrategyCache({urls, strategy});之前创建服务工作人员吗？我以为这个方法调用会为我创建一个服务人员呢？
我最终试图“热情”地缓存(在运行时，而不是构建时，因为我使用的是内容)一组小型视频，以便在触发某些javascript事件时立即播放。
这些视频是在内容上托管的，因此它将是跨源请求，以防与此问题有关。
浏览 7提问于2022-07-13得票数 0
1回答
下面的配置抛出“Request method‘POST”不受支持的错误。我已经读到，存储api不使用POST作为缓存中的键的方法来请求对象，但我不知道如何添加路由，这体现了针对这些请求的networkOnly策略。
规范(从中获取的设置)
使用GenerateSW
webpack.settings.js (记住importScripts语句)
workboxConfig: {
swDest: "../sw.js",
precacheManifestFilename: "js/precache-manifest.[manifestHash].j
浏览 1提问于2018-12-05得票数 2
回答已采纳
1回答
我使用的代码来自这个站点：
我的代码如下：
workbox.routing.registerRoute(
new RegExp('http://localhost:64445.*/'),
workbox.strategies.staleWhileRevalidate({
cacheName:'Post-Run-time-cache'
}),
'POST'
);
它给了我一个错误：
Uncaught (in promise) TypeError: Request method 'POST' is unsupp
浏览 11提问于2018-09-07得票数 5
回答已采纳
我有一个vue应用程序，我更新了它以具有PWA功能。它使用了firebase消息传递服务，它用自己的firebase消息传递-sw.js文件覆盖了服务工作人员。服务工作人员是注册、活动和工作的，我已经在vue.config.js文件中添加了pwa，以便它生成manifest.json。当您构建应用程序的生产版本时，下面的代码将被添加到服务工作人员的顶部。
importScripts("precache-manifest.7b51ac9589a6dc8041a85d8f1792defa.js", "https://storage.googleapis.com/workbo
浏览 4提问于2020-02-27得票数 0
回答已采纳
1回答
我希望将来自API的一些数据保存在缓存中，以防失去显示数据的连接 我有一个工作部件的列表，所以如果我离线，我希望继续看到这些部件，因为当我再次进入组件时，它会调用API并再次将它们带回来，而且由于没有连接，它将它保留为白色，以便从缓存中带出它们 import {precacheAndRoute} from 'workbox-precaching';
import {clientsClaim, skipWaiting} from 'workbox-core';
import {registerRoute} from 'workbox-routing&
浏览 19提问于2021-07-20得票数 0
我有一个用vanilla js编写的SPA，它处理带有前缀- /mail的路由，我想在这里缓存应用程序外壳，并将其用于所有子路由，如/mail/settings，/mail/inbox……等，此SPA在登录后由app.html提供服务。所以我用了这个-
//this has to be precached for the below createHandlerBoundToURL
workbox.precaching.precacheAndRoute([{
url:"/mail"
}
])
var pagesRouteHandler = workbox.precachi
浏览 2提问于2020-04-17得票数 1
我在我的应用程序中添加了几个使用workbox.routing.registerRoute的staleWhileRevalidate，到目前为止，它已经通过了PWA下的大多数灯塔测试。我现在根本不使用预读。我的问题是，这是强制性的吗？如果没有预转换，我还缺少什么呢？workbox.routing.registerRoute已经在缓存我所需要的一切。谢谢!
浏览 1提问于2018-03-06得票数 5
回答已采纳
我使用Workbox来存储离线页面，除了URL需要匹配大小写之外，它工作得很好。如果工作框缓存有一个名为“mysite.com/offlinepage”的页面，而用户输入的是“mysite.com/offlinepage”，则缓存将找不到它。 我在离线页面上使用StaleWhileRevalidate，我想用'i‘参数做一个正则表达式，就像这样： RegisterStaleWhileRevalidate(new RegExp('/Login', 'i'), 'home');
function RegisterStaleWhileRev
浏览 23提问于2021-01-21得票数 0
回答已采纳
我在我的PWA中使用workbox和。我正在使用，但作为其中的一部分，为analytics.js文件设置了一个缓存路由。
该代码位于这里：。它使用了NetworkFirst策略，这将。
资源似乎没有CORS头，因此我们得到了一个不透明的响应，正如所说：
意外地高配额使用的一个常见来源是不透明响应的运行时缓存.
这意味着我的应用程序将使用7mb的存储仅仅因为我有GA包括在内。我不知道缓存analytics.js文件(一个特性)是否值7mb的代价，或者它是否是一个bug。
我已经从工作箱缓存中选择退出该脚本，方法是：
// make sure this it before the init
浏览 4提问于2019-10-18得票数 0
1回答
我正在为我的站点使用vue-pwa，并且我在我的站点中调用的API目前正在使用NetworkFirst策略。现在，我希望以某种方式检测服务工作者是否缓存了从API接收到的响应(在这种情况下，我想知道缓存的响应有多长时间)，或者请求是否正常获取。目标是在用户正在查看可能过期的内容时显示警告(响应是从缓存加载的，并且超过几个小时)。
这是我现在的sw.js
self.addEventListener('message', (e) => {
if (!e.data) {
return
}
switch (e.data) {
case 'sk
浏览 0提问于2021-03-05得票数 1
回答已采纳
1回答
我正在使用工作盒-webpack插件v5 (最新)与InjectManifest插件。以下是我的服务工作者源文件：
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { clientsClaim, setCacheNameDetails, skipWaiting } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import {
cle
浏览 2提问于2020-02-06得票数 1
我在基于工作箱的服务工作器中对NavigationRoute使用NetworkFirst策略，以便在用户离线时为导航请求提供缓存响应。
workbox.routing.registerRoute(
new workbox.routing.NavigationRoute(
new workbox.strategies.NetworkFirst({
cacheName: 'static-pages',
}),
),
);
当我导航到一个页面时，导航请求被缓存，然后我可以在脱机时再次访问它。到目前一切尚好。
但是
浏览 2提问于2021-03-31得票数 0
我在服务工作人员中使用Workbox，并且我使用来提供对一个路由的回退响应，当脱机和页面不在缓存中时，应该显示该路由：
const FALLBACK_URL = '/offline/';
const urlHandler = workbox.strategies.staleWhileRevalidate({
cacheName: 'page-cache'
});
workbox.routing.registerRoute(
/\/.+\//,
({event}) => {
return urlHandler.ha
浏览 3提问于2018-07-27得票数 3
当设备离线时，我试图让PWA使用offline.html页面进行响应，并且我认为在获取主页时失败是脱机的，但是由于我的服务人员缓存文本/html请求，所以我的PWA每次都使用缓存来获取主页。
我正在使用workbox来生成我的PWA，并且尝试从workbox-config.js文件中删除文档。
码
workbox-config.js
module.exports = {
globDirectory: 'build/',
globPatterns: [
'**/*.{png,ico,css,js}',
],
swDe
浏览 2提问于2019-06-16得票数 0
当我只使用从工作箱中预缓存插件时，服务工作者尝试从indexdb而不是缓存(browser-cache)中获取。
是的，service worker比从服务器获取更快。但是，如果它从内存中获取，则需要0秒。
我已经看到了workbox中的所有策略，但它没有尝试首先从内存中获取的策略。
这就是预缓存的一切。
new WorkboxPlugin.GenerateSW({
skipWaiting: true,
importWorkboxFrom: 'local',
})
service-worker.js
importScripts("/dist/wo
浏览 6提问于2018-11-27得票数 0
1回答
工作箱:清理缓存
、、
似乎工作箱不会清理旧的缓存。例如，如果我指定如下所示的缓存版本：
var version = 'v2';
workbox.core.setCacheNameDetails({
suffix: version
});
...I本来希望在新的服务工作人员激活后，工作箱会清除缓存的旧版本，但我的缓存存储如下：
手动清理缓存安全吗？例如，在我的服务工作者中：
self.addEventListener('activate', function(event) {
event.waitUntil(
caches
.keys()
浏览 2提问于2018-04-07得票数 10
回答已采纳
1回答
我是新来的服务工作者，我的页面中有没有扩展的图片( *.jpg、*.png等)--像这样的"www.domain.com/api/media/a2b93f21-1acf-4e5e-9b19-6d7c68aaadc2“，这是我从API中得到的。
下面的代码可以正常工作，但对于这种类型的图像不起作用。
workbox.routing.registerRoute(
// Cache image files.
/\.(?:png|jpg|jpeg|svg|gif)$/,
// Use the cache if it's available.
new wo
浏览 0提问于2019-04-17得票数 3
1回答
我最近把Cloudfront添加到了我的web应用程序中。我使用的是一个WorkBox服务工作人员，并得到了错误：
VM7 workbox-Stratgies.prod.js:1未登录(承诺) TypeError:未能获取
我从中发现了查看Network，以找出是什么资源导致了问题。
我查了一下，发现--它在尝试加载我自己的域名！
域在浏览器中加载很好。为什么服务工作人员要抛出这个获取错误？
浏览 0提问于2021-03-23得票数 2
回答已采纳
2回答
我正在尝试将现有的项目从手工管理的服务工作者转换为由workbox 3 (beta)管理的项目。
Precache工作得很好。但是，无论我尝试什么，routing.registerRoute方法都不能工作。下面的示例与文档中的示例完全相同，但是每次获取图像时，都不会生成image-cache，也不会缓存任何图像。
任何关于我在这里可能做错了什么的建议都会受到极大的赞赏。
其次，message和push的两个事件侦听器也不再工作了。
importScripts('workbox-v3.0.0-beta.0/workbox-sw.js');
/**
* The workboxSW
浏览 2提问于2018-02-03得票数 2
回答已采纳
1回答
我使用workbox generateSW方法生成服务工作人员，这是我使用的配置：
const workbox = require("workbox-build");
workbox.generateSW({
globDirectory: "./",
globIgnores: ["node_modules/**", "**/generator.js", "**/sw.js"],
globPatterns: ["**/*.{css,js}"],
swDest: "./sw.j
浏览 2提问于2021-07-09得票数 2
回答已采纳
1回答
我不能用工作箱进行预演。
现在，我正尝试在工作盒的injectManifest模式中缓存。
已经确认swSrc指定的文件中描述的运行时缓存正在工作。
但是，使用globDirectory和globPatterns命名的文件不受影响。具体来说，指定globPatterns: ['** / *. {Js, css, html, png}']会导致错误。
请告诉我如何消除这个错误。
工作箱使用工作箱-生成。
下面显示了每个版本。
workbox-build: 3.6.3 node: 11.11
它正在本地主机上运行。
injectManifest.js
const workboxBu
浏览 1提问于2019-06-04得票数 0
回答已采纳
在使用workbox对服务人员的性能进行基准测试时，我们发现了一个有趣的现象。
应用service worker时，workbox的网络优先策略比无service worker网络慢约30毫秒。然后，我们尝试跳过workbox，手动实现网络优先策略，它大约慢了20ms。
我的猜测是，如果服务工作者开始工作，所有的请求都必须由javascript代码处理。是JavaScript代码的执行使网络速度变慢。
然后，我检查了缓存优先策略，结果发现从缓存存储中获取内容比从磁盘缓存(http缓存)中获取内容慢，而不使用服务工作者。
因此，在我的理解中，即使service worker为我们提供了更多的缓存
浏览 5提问于2018-06-20得票数 1
1回答
我已经定义了到缓存映像的工作箱路由，但是它在缓存存储中不可见。但是，即使在脱机模式下，映像也是从disk cache缓存和服务的。
我跟踪了文档，并做了上面提到的每件事。但是，缓存仍然不可用。
编辑的
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg)$/,
new workbox.strategies.CacheFirst({
cacheName: 'images-cache'
})
);
workbox.routing.regist
浏览 0提问于2019-07-08得票数 0
回答已采纳
1回答
我对PWA、服务人员和工作箱都很陌生。我不明白为什么以及如何触发服务工作人员内部的fetch事件？
我看到工作框的日志，它是我作为数组提供的进进文件：
现在我将如何从缓存中服务，为什么我的fetch事件处理程序根本不会被触发？
我的服务人员档案：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js')
workbox.setConfig({
debug: true,
})
// To avoid async issues, we load
浏览 3提问于2022-03-04得票数 0
1回答
在我的React 应用程序中，我实现了服务工作人员(通过工作框)。它很好用。每次我更改代码、重新构建、运行服务器、转到浏览器时，我都会看到缓存被成功地更新了。
但是有一件事我不能理解。当我从本地服务器删除某些资产(js或css)并试图在浏览器中执行一些操作(这会调用该资产)时，我将得到一个块错误，该错误表示该文件不可用。
主要的问题是，如果该资产已经在缓存存储中，那么它不应该从那个缓存中加载，还是我遗漏了什么？
我使用的组件是
节点/快递(用于服务器)
@loadable/components(用于代码拆分)，结合webpack
Google工作盒插件
// my sw.j
浏览 6提问于2021-04-19得票数 0
1回答
更新:原来它是工作的，我只需要手动重新启动服务工作者，请求就会再次被触发。在另一篇文章里。
我有一个应用程序前端写成角，打算在iPads上使用，位于我们的家周围。后端是运行在常规web主机上的PHP内置api。当我使用Workbox注册服务工作者时，它在桌面上工作得很好。我能够完美地使用桌面Chrome上的背景同步。当我转到或Chrome时，服务人员似乎没有功能。
我已经通过android上的usb调试做了一些调试，它没有显示用于工作盒背景同步的indexdb数据库，但是用于预缓存。有什么想法吗？
服务-工人.：
importScripts('workbox-3.6.3/wor
浏览 0提问于2018-12-09得票数 0
回答已采纳
1回答
用户可以在离线时提交表单，该表单通过后台同步同步到我的数据库。这和预期的一样工作。我遇到的问题是，当用户离线并提交表单时，它会重定向到Chrome中的"site not found“错误页面。用户应该被重定向回其所有条目的列表。我已经确认它重定向到的页面是缓存的。 服务器工作文件： importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/6.1.2/workbox-sw.js"
);
const CACHE = "example-offline";
const QUE
浏览 17提问于2021-04-08得票数 0
我目前正在使用workbox模块，特别是generateSW模式来生成我的服务工作者脚本，以便将我的web应用程序部署到Netlify。我的网站是一个静态网站。
这里是我的员工-config.js：
module.exports = {
globDirectory: '_site/',
globPatterns: [
'**/*.{html,iml,css,xml,eot,svg,ttf,woff,woff2,jpg,webp,png,ico,xcf,js,json,txt}'
],
swDest: '
浏览 8提问于2022-03-20得票数 0
回答已采纳
我正在制作一个PWA，它使用Google Firebase作为后端。我已经设置了工作箱，使我的服务工作者，它正在提示所有的文件，我需要正确.除了来自gstatic.com的firebase JS文件。我使用的是Onsen和Workbox，它能够预先执行Onsen第三方文件，所以它必须与Firebase的文件有关。
这些HTML标记包括Firebase文件：
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script crossori
浏览 4提问于2019-10-06得票数 1
回答已采纳
我正在尝试为缓存中不可用的图片和文档实现脱机回退功能。其想法是，当所需的图片或文档不可用时，服务工作人员将提供预定义的回退图片或文档。我正在使用所描述的配方，但它不起作用。为了使用Chrome工具对其进行测试，我执行以下操作：
转到本地主机:3003/(应用程序提供服务的地方)
让浏览器注册服务工作人员
重新加载页面
转到“应用程序”选项卡和“服务工作人员”部分，并选中“脱机”复选框
重新加载页面
对于未保存在缓存中的图片和文档，请获取以下错误：GET http://localhost:3003/assets/img/Innomaps%20en%20el%20Hult%
浏览 2提问于2021-03-15得票数 2
我正在使用谷歌的workbox-cli工具，以预先在我的网站上的一些文件。默认情况下，是否可以在HTTP响应头中为所有文件设置all服务器返回以下内容：
cache-control: s-maxage=2592000, max-age=86400, must-revalidate, no-transform, public
但是，让But浏览器只在文件要由服务工作人员执行指令时才使用折叠：
cache-control: s-maxage=2592000, max-age=0, must-revalidate, no-transform, public
因此，我希望服务工作者在执行文件之前，将m
浏览 0提问于2018-07-03得票数 0
回答已采纳
1回答
我正在构建一个react应用程序，使用create-react-app和来处理workbox。
我想使用workbox的networkOnly策略，但不知何故它不起作用。即使我将网络设为离线，服务工作者也会使用缓存进行响应
我也尝试了其他策略，但workbox只使用其默认行为，并首先使用缓存进行响应。
self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
self.addEventListener('activate', event => eve
浏览 33提问于2019-07-16得票数 2
我正在尝试使一个站点离线可用，并缓存从AWS S3检索到的图像。我正在使用工作盒库：
var CACHE_VERSION = '2019-02-03'
// cf https://developers.google.com/web/tools/workbox/guides/get-started
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js')
workbox.routing.registerRoute(
// Cache im
浏览 2提问于2019-02-04得票数 1
回答已采纳
我试图从网络工作者导入json数据，使用importSctipts为我的网站创建一个工作人员，但是一次又一次地得到这个错误.我使用的是cloudflare，这里的任何人都可以解决这个问题。
Web工作代码在这里。需要帮助.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
if (workbox) {
workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.core.set
浏览 16提问于2022-01-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
