脱机时删除Chrome应用缓存

时间:2017-12-09 16:42:31

标签: javascript google-chrome-devtools service-worker offline-caching

我打算使用服务工作者使Web应用程序脱机。当我有Internet连接时,缓存存储显示文件。但是,如果我离线,缓存似乎消失了。我没有在“服务工作者”选项卡中启用“重新加载时更新”复选框。

我的服务工作者的获取事件是:

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

当我在线时,控制台的打印是:

获取脚本时发生未知错误。 无法加载资源:net :: ERR_INTERNET_DISCONNECTED service-worker.js

但是当我离线时,控制台ouptut如下:

[ServiceWorker]抓取https://cocoa.pythonanywhere.com/static/login/bootstrap/CSS/bootstrap.css service-worker.js:113 [ServiceWorker]获取https://cocoa.pythonanywhere.com/static/login/logo.png cocoa.pythonanywhere.com/:1使用清单https://cocoa.pythonanywhere.com/static/login/Offline/HTML/manifesto将主条目添加到应用程序缓存 service-worker.js:113 [ServiceWorker]获取https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css service-worker.js:113 [ServiceWorker]获取https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js service-worker.js:113 [ServiceWorker]获取https://cocoa.pythonanywhere.com/static/login/js/app.js service-worker.js:113 [ServiceWorker]获取https://cocoa.pythonanywhere.com/static/login/bootstrap/js/jquery-3.1.1.min.js service-worker.js:113 [ServiceWorker]获取https://cocoa.pythonanywhere.com/static/login/bootstrap/js/bootstrap.min.js service-worker.js:113 [ServiceWorker]获取https://cocoa.pythonanywhere.com/static/login/js/diem.js cocoa.pythonanywhere.com/:1检测到慢速网络。加载时将使用Fallback字体:https://cocoa.pythonanywhere.com/static/login/bootstrap/fonts/glyphicons-halflings-regular.woff2 app.js:2客户端:正在进行服务工作者注册。 app.js:4客户端:服务工作者注册完成。

当我在线时,应用程序选项卡显示:

The Application Cache is poblated

应用程序缓存已启用,服务工作者已注册。

当我离线时,它看起来像这样:

The Cache is not poblated and the service worker not active

缓存没有封闭,服务工作者也没有激活。

1 个答案:

答案 0 :(得分:0)

我在以下GitHub存储库中找到了service-worker所需的代码:

https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/custom-offline-page

我唯一做的就是更新所请求的Cahce文件。在:

const OFFLINE_URL = 'name_of_the_file';