blocks|key|3722469|text|更新:从Workbox+v4.2.0开始，新的Workbox生命周期回调可以帮助覆盖读写操作的默认缓存键：+|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3722470|原始响应：|3722471|您应该能够通过编写在配置策略时传入的cachedResponseWillBeUsed+plugin来做到这一点：|CODE|3722472|//+See+https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed
const+cachedResponseWillBeUsed+=+({cache,+request,+cachedResponse})+=>+{
++//+If+there's+already+a+match+against+the+request+URL,+return+it.
++if+(cachedResponse)+{
++++return+cachedResponse;
++}

++//+Otherwise,+return+a+match+for+a+specific+URL:
++const+urlToMatch+=+'https://example.com/data/generic/image.jpg';
++return+caches.match(urlToMatch);
};

const+imageCachingStrategy+=+workboxSW.strategies.cacheFirst({
++cacheName:+'mycache',
++cacheExpiration:+{
++++++maxEntries:+50
++},
++cacheableResponse:+{statuses:+[0,+200]},
++plugins:+[{cachedResponseWillBeUsed}]
});


workboxSW.router.registerRoute(
++new+RegExp('%5Ehttps://example\.com/data/'),
++imageCachingStrategy
);|code-block|syntax|javascript|3722473|entityMap|0|LINK|mutability|MUTABLE|url|https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed^0|0|N|U|N|0|0|5|0|I|O|I|V|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|J]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|K|3|L|5|M|7|1B|8|@]|D|@]|E|$N|O]]|$1|P|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

Update: As of Workbox v4.2.0, the new <code>cacheKeyWillBeUsed</code> lifecycle callback can help override the default cache key for both read and write operations: <a href="https://github.com/GoogleChrome/workbox/releases/tag/v4.2.0" rel="nofollow noreferrer">https://github.com/GoogleChrome/workbox/releases/tag/v4.2.0</a>

Original response:

You should be able to do this by writing a <a href="https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed" rel="nofollow noreferrer"><code>cachedResponseWillBeUsed</code> plugin</a> that you pass in when you configure the strategy:

<pre><code>// See https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed
const cachedResponseWillBeUsed = ({cache, request, cachedResponse}) =&gt; {
 // If there's already a match against the request URL, return it.
 if (cachedResponse) {
 return cachedResponse;
 }

 // Otherwise, return a match for a specific URL:
 const urlToMatch = 'https://example.com/data/generic/image.jpg';
 return caches.match(urlToMatch);
};

const imageCachingStrategy = workboxSW.strategies.cacheFirst({
 cacheName: 'mycache',
 cacheExpiration: {
 maxEntries: 50
 },
 cacheableResponse: {statuses: [0, 200]},
 plugins: [{cachedResponseWillBeUsed}]
});


workboxSW.router.registerRoute(
 new RegExp('^https://example\.com/data/'),
 imageCachingStrategy
);
</code></pre>

blocks|key|3722503|text|为了在other答案的基础上构建，caches.match有一个选项ignoreSearch，所以我们可以简单地使用相同的url重试：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3722504|cachedResponseWillBeUsed+=+({cache,+request,+cachedResponse})+=>+{
++if+(cachedResponse)+{
++++return+cachedResponse;
++}

++//+this+will+match+same+url/diff+query+string+where+the+original+failed
++return+caches.match(request.url,+{+ignoreSearch:+true+});
};|code-block|syntax|javascript|3722505|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/46283973/2124351|1|https://developer.mozilla.org/en-US/docs/Web/API/Cache/match^0|Y|C|3|5|0|H|C|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

To build on the <a href="https://stackoverflow.com/a/46283973/2124351">other</a> answer, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache/match" rel="nofollow noreferrer">caches.match</a> has an option <code>ignoreSearch</code>, so we can simply try again with the same url:

<pre><code>cachedResponseWillBeUsed = ({cache, request, cachedResponse}) =&gt; {
 if (cachedResponse) {
 return cachedResponse;
 }

 // this will match same url/diff query string where the original failed
 return caches.match(request.url, { ignoreSearch: true });
};
</code></pre>

blocks|key|5835320|text|ignoreURLParametersMatching参数适用于我：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5835321|https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters|5835322|entityMap|0|LINK|mutability|MUTABLE|url^0|0|R|0|0|2O|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<code>ignoreURLParametersMatching</code> parameter worked for me:

<a href="https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters" rel="nofollow noreferrer">https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters</a>

blocks|key|3722550|text|在v5中，基于AW04的答案，代码应该如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3722551|const+ignoreQueryStringPlugin+=+{
++++cachedResponseWillBeUsed:+async({cacheName,+request,+matchOptions,+cachedResponse,+event})+=>+{
++++++++console.log(request.url);
++++++++if+(cachedResponse)+{
++++++++++++return+cachedResponse;
++++++++}

++++++++//+this+will+match+same+url/diff+query+string+where+the+original+failed
++++++++return+caches.match(request.url,+{ignoreSearch:+true});
++++}
};|code-block|syntax|javascript|3722552|registerRoute(
++++new+RegExp('...'),
++++new+NetworkFirst({
++++++++cacheName:+'cache',
++++++++plugins:+[
++++++++++++ignoreQueryStringPlugin
++++++++],
++++})
);|3722553|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

As of v5, building on aw04's answer, the code should read as follows:

<pre class="lang-js prettyprint-override"><code>const ignoreQueryStringPlugin = {
 cachedResponseWillBeUsed: async({cacheName, request, matchOptions, cachedResponse, event}) =&gt; {
 console.log(request.url);
 if (cachedResponse) {
 return cachedResponse;
 }

 // this will match same url/diff query string where the original failed
 return caches.match(request.url, {ignoreSearch: true});
 }
};
</code></pre>

<pre class="lang-js prettyprint-override"><code>registerRoute(
 new RegExp('...'),
 new NetworkFirst({
 cacheName: 'cache',
 plugins: [
 ignoreQueryStringPlugin
 ],
 })
);
</code></pre>

blocks|key|5835385|text|您可以简单地使用cacheKeyWillBeUsed，修改保存的缓存键以完全忽略查询，并将每个对url的响应与任何查询进行匹配。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5835386|const+ignoreQueryStringPlugin+=+{
+cacheKeyWillBeUsed:+async+({request,+mode,+params,+event,+state})+=>+{
++//here+you+can+extract+the+fix+part+of+the+url+you+want+to+cache+without+the+query
++curl+=+new+URL(request.url);
++return+curl.pathname;

+}
};|code-block|syntax|javascript|5835387|并将其添加到策略中|5835388|workbox.routing.registerRoute(/\/(\?.%2B)?/,new+
+workbox.strategies.StaleWhileRevalidate({
++matchOptions:+{
+++ignoreSearch:+true,
++},
++plugins:+[
+++ignoreQueryStringPlugin
++],
}));|5835389|entityMap^0|8|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You can use the <code>cacheKeyWillBeUsed</code> simply, modifying the saved cache key to ignore the query at all, and matching for every response to the url with any query.
<pre><code>const ignoreQueryStringPlugin = {
 cacheKeyWillBeUsed: async ({request, mode, params, event, state}) =&gt; {
 //here you can extract the fix part of the url you want to cache without the query
 curl = new URL(request.url);
 return curl.pathname;

 }
};
</code></pre>
and add it to the strategy
<pre><code>workbox.routing.registerRoute(/\/(\?.+)?/,new 
 workbox.strategies.StaleWhileRevalidate({
 matchOptions: {
 ignoreSearch: true,
 },
 plugins: [
 ignoreQueryStringPlugin
 ],
}));
</code></pre>

Is there a way to ignore query string "?screenSize=" from below registered route using workbox! If I can use regex how would i write it in below scenario? Basically, I am looking to match the cache no matter what is the screenSize querystring.

<pre><code>workboxSW.router.registerRoute('https://example.com/data/image?screenSize=980',
workboxSW.strategies.cacheFirst({
 cacheName: 'mycache',
 cacheExpiration: {
 maxEntries: 50
 },
 cacheableResponse: {statuses: [0, 200]}
})
);
</code></pre>

After trying the cachedResponseWillBeUsed plugin:
I do not see the plugin is applied:
<a href="https://i.stack.imgur.com/PDCoh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PDCoh.png" alt="enter image description here"></a>

How to ignore url querystring from cached urls when using workbox?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有办法使用workbox忽略来自已注册路由下的查询字符串"?screenSize=“！如果我可以使用正则表达式，我该如何在下面的场景中编写它？基本上，无论screenSize查询字符串是什么，我都希望匹配缓存。workboxSW.router.registerRoute('https://example.com/d...

问如何在使用workbox时忽略缓存url中的url querystring？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用workbox时忽略缓存url中的url querystring？EN