blocks|key|4350750|text|使用此命令删除过期的缓存：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4350751|self.addEventListener('activate',+function(event)+{
++event.waitUntil(
++++caches.keys().then(function(cacheNames)+{
++++++return+Promise.all(
++++++++cacheNames.filter(function(cacheName)+{
++++++++++//+Return+true+if+you+want+to+remove+this+cache,
++++++++++//+but+remember+that+caches+are+shared+across
++++++++++//+the+whole+origin
++++++++}).map(function(cacheName)+{
++++++++++return+caches.delete(cacheName);
++++++++})
++++++);
++++})
++);
});|code-block|syntax|javascript|4350752|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use this to delete outdated caches:

<pre><code>self.addEventListener('activate', function(event) {
 event.waitUntil(
 caches.keys().then(function(cacheNames) {
 return Promise.all(
 cacheNames.filter(function(cacheName) {
 // Return true if you want to remove this cache,
 // but remember that caches are shared across
 // the whole origin
 }).map(function(cacheName) {
 return caches.delete(cacheName);
 })
 );
 })
 );
});
</code></pre>

blocks|key|4350797|text|如果您知道缓存名称，您可以简单地从worker中喜欢的任何位置调用caches.delete()：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4350798|caches.delete(/*name*/);|code-block|syntax|javascript|4350799|如果你想擦除所有缓存(而不是等待它们，假设这是一个后台任务)，你只需要add+this|4350800|caches.keys().then(function(names)+{
++++for+(let+name+of+names)
++++++++caches.delete(name);
});|4350801|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/delete|1|https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/keys^0|X|F|X|F|0|0|0|Z|8|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

If you know the cache name you can simply call <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/delete" rel="noreferrer"><code>caches.delete()</code></a> from anywhere you like in the worker:

<pre class="lang-js prettyprint-override"><code>caches.delete(/*name*/);
</code></pre>

And if you wanted to wipe all caches (and not wait for them, say this is a background task) you only need to <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/keys" rel="noreferrer">add this</a>:

<pre class="lang-js prettyprint-override"><code>caches.keys().then(function(names) {
 for (let name of names)
 caches.delete(name);
});
</code></pre>

blocks|key|4350832|text|这是唯一能为我工作的代码。这是我对Mozilla+documentation的改编：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4350833|//Delete+all+caches+and+keep+only+one
const+cachNameToKeep+=+'myCache';

//Deletion+should+only+occur+at+the+activate+event
self.addEventListener('activate',+event+=>+{
++++var+cacheKeeplist+=+[cacheName];
++++event.waitUntil(
++++++++caches.keys().then(+keyList+=>+{
++++++++++++return+Promise.all(keyList.map(+key+=>+{
++++++++++++++++if+(cacheKeeplist.indexOf(key)+===+-1)+{
++++++++++++++++++++return+caches.delete(key);
++++++++++++++++}
++++++++++++}));
++++++++})
.then(self.clients.claim()));+//this+line+is+important+in+some+contexts
});|code-block|syntax|javascript|4350834|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Deleting_old_caches^0|H|L|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

This is the only code that worked for me. 
It is my adaptation of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Deleting_old_caches" rel="nofollow noreferrer">Mozilla documentation</a> :

<pre><code>//Delete all caches and keep only one
const cachNameToKeep = 'myCache';

//Deletion should only occur at the activate event
self.addEventListener('activate', event =&gt; {
 var cacheKeeplist = [cacheName];
 event.waitUntil(
 caches.keys().then( keyList =&gt; {
 return Promise.all(keyList.map( key =&gt; {
 if (cacheKeeplist.indexOf(key) === -1) {
 return caches.delete(key);
 }
 }));
 })
.then(self.clients.claim())); //this line is important in some contexts
});
</code></pre>

blocks|key|4350873|text|最优雅的解决方案，具有异步/等待功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4350874|const+cacheName+=+'v2';

self.addEventListener('activate',+event+=>+{
//+Remove+old+caches
++event.waitUntil(
++++(async+()+=>+{
++++++const+keys+=+await+caches.keys();
++++++return+keys.map(async+(cache)+=>+{
++++++++if(cache+!==+cacheName)+{
++++++++++console.log('Service+Worker:+Removing+old+cache:+'%2Bcache);
++++++++++return+await+caches.delete(cache);
++++++++}
++++++})
++++})()
++)
})|code-block|syntax|javascript|4350875|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The most elegant solution, with async/await:
<pre class="lang-js prettyprint-override"><code>const cacheName = 'v2';

self.addEventListener('activate', event =&gt; {
// Remove old caches
 event.waitUntil(
 (async () =&gt; {
 const keys = await caches.keys();
 return keys.map(async (cache) =&gt; {
 if(cache !== cacheName) {
 console.log('Service Worker: Removing old cache: '+cache);
 return await caches.delete(cache);
 }
 })
 })()
 )
})
</code></pre>

So, I have an HTML page with service worker,
the service worker cache the index.html and my JS files.

The problem is when I change the JS, the change doesn't show up directly on the client browser. Of course in chrome dev-tools, I can disable cache. But in chrome mobile, how do I do that?

I tried to access the site settings and hit the CLEAR % RESET button.
But it still loads the old page/load from cache.
I tried to use other browser or chrome incognito and it loads the new page.

Then, I try to clear my browsing data (just cache) and it works.

I guess that's not how it should work right? my user won't know if the page is updated without clearing the chrome browser cache.

How to clear cache of service worker?

因此，我有一个包含服务工作者的超文本标记语言页面，服务工作者缓存index.html和我的JS文件。问题是，当我更改JS时，更改不会直接显示在客户端浏览器上。当然，在chrome dev-tools中，我可以禁用缓存。但是在chrome mobile中，我该怎么做呢？我尝试访问站点设置，然后点击了清除% RESET按钮...

问如何清除服务工作者的缓存？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何清除服务工作者的缓存？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何清除服务工作者的缓存？
EN