脱机时删除了Chrome应用程序缓存 [英] Chrome Application Cache deleted when going Offline

问题描述

我打算使用Service Worker使Web App脱机使用.当我有Internet连接时，缓存存储将显示文件.但是，如果我脱机，则缓存似乎消失了.我尚未启用Service Workers选项卡中的Reload on Reload复选框.

I intend using a Service Worker to make a Web App available offline. The cache Storage shows the files when I have Internet Connection. However if I go Offline the cache seems to disappear. I do not have enabled the checkbox of Update on Reload in the Service Workers tab.

我的服务人员的提取事件为:

The fetch event of my service worker is:

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);
    })
  );
});

当我在线时，控制台的打印内容是:

When I am Online the print for the console is:

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

An unknown error occurred when fetching the script. Failed to load resource: net::ERR_INTERNET_DISCONNECTED service-worker.js

但是，当我离线时，控制台输出如下:

However when I am offline the console ouptut is the following:

[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/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检测到慢速网络.后备字体将在加载时使用: https://cocoa.pythonanywhere.com/static/login/bootstrap/fonts/glyphicons-halflings-regular.woff2 app.js:2客户:服务人员注册正在进行中. app.js:4位客户:服务人员注册已完成.

[ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/bootstrap/CSS/bootstrap.css service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/logo.png cocoa.pythonanywhere.com/:1 Adding master entry to Application Cache with manifest https://cocoa.pythonanywhere.com/static/login/Offline/HTML/manifesto service-worker.js:113 [ServiceWorker] Fetch https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css service-worker.js:113 [ServiceWorker] Fetch https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/js/app.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/bootstrap/js/jquery-3.1.1.min.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/bootstrap/js/bootstrap.min.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/js/diem.js cocoa.pythonanywhere.com/:1 Slow network is detected. Fallback font will be used while loading: https://cocoa.pythonanywhere.com/static/login/bootstrap/fonts/glyphicons-halflings-regular.woff2 app.js:2 CLIENT: service worker registration in progress. app.js:4 CLIENT: service worker registration complete.

当我在线时，应用程序选项卡看起来如下:

When I am Online the application tab looks:

已对应用程序缓存进行了漏洞整理，并注册了Service Worker.

The Application Cache is poblated and the Service Worker registered.

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

When I am Offline it appears like this:

未对缓存进行缓存并且服务工作者未处于活动状态.

The Cache is not poblated and the service worker not active.

推荐答案

我在以下GitHub存储库中找到了服务工作者所需的代码:

I found the code that I needed for the service-worker in the following GitHub repository:

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

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

The only thing I did was updating the Cahce File requested. In:

const OFFLINE_URL = 'name_of_the_file';

这篇关于脱机时删除了Chrome应用程序缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！