当前位置: 首页 > 知识库问答 >
问题:

Service Worker不缓存html文件

燕扬
2023-03-14

这是我的服务人员:

'use strict';


const CACHE_VERSION = 1;
let CURRENT_CACHES = {
  offline: 'offline-v' + CACHE_VERSION
};
const OFFLINE_URL = 'offline.html';

function createCacheBustedRequest(url) {
  let request = new Request(url, {cache: 'reload'});

  if ('cache' in request) {
    return request;
  }

  let bustedUrl = new URL(url, self.location.href);
  bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
  return new Request(bustedUrl);
}

self.addEventListener('install', event => {
  event.waitUntil(

    fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(response) {
      return caches.open(CURRENT_CACHES.offline).then(function(cache) {
        return cache.put(OFFLINE_URL, response);
      });
    })
  );
});

self.addEventListener('activate', event => {

  let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (expectedCacheNames.indexOf(cacheName) === -1) {

            console.log('Deleting out of date cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', event => {

  if (event.request.mode === 'navigate' ||
      (event.request.method === 'GET' &&
       event.request.headers.get('accept').includes('text/html'))) {
    console.log('Handling fetch event for', event.request.url);
    event.respondWith(
      fetch(createCacheBustedRequest(event.request.url)).catch(error => {

        console.log('Fetch failed; returning offline page instead.', error);
        return caches.match(OFFLINE_URL);
      })
    );
  }


});

它是标准的脱机缓存服务工作程序:https://googlechrome.github.io/samples/service-worker/custom-offline-page/

控制台中没有错误。

在Android Chrome上,将页面添加到主页效果很好(我有一个定义图标和URL的清单)。但是,当我关闭手机连接时,会收到一条错误消息:

 Not Found
 The requested URL/offline.html was not found on this server.

我该如何解决这个问题?

共有1个答案

段干楚青
2023-03-14

我认为这是我配置域的方式——我已经将我的/domain映射到了我的/www域。我更改了const OFFLINE\u URL='OFFLINE。html';保持脱机\u URL='0https://example.com/offline.html'; 它成功了。使用绝对URL一直有效。

 类似资料:
  • 我调用服务器数据通过使用ajax在index.html.它是完美的获取这些数据。现在,我正在和服务人员一起工作。我可以缓存所有的静态资产(图像,js,css),并在Chrome开发工具的应用程序选项卡中的缓存存储中检查这些缓存的资产。我可以在网络选项卡中看到这些资产也被缓存(磁盘缓存)。 现在,我想使用ServiceWorker缓存这些ajax响应(图像文件数组)。在“网络”选项卡中,我可以看到它

  • 我想创建一个网站,即使当它的服务器离线时也可以工作——我发现这就是服务工人的目的。 当我重新加载带有service worker且没有连接的页面时,它工作正常。但是,轮班重新加载(例如,绕过缓存)会解除服务工作人员的防护,并出现“无法连接到服务器”错误。 我的问题是-我是否可以以某种方式防止轮班重新加载(shift f5、ctrl f5等)破坏服务人员,或者至少在不恢复连接的情况下使其恢复?

  • 本文向大家介绍HTML缓存中单个URL有几个不同的缓存?,包括了HTML缓存中单个URL有几个不同的缓存?的使用技巧和注意事项,需要的朋友参考一下 您需要在列表的CACHE部分中提供的所有资源上使用远期到期日期。此外,在CACHE部分的每个文件中添加时间戳后缀- 当服务器上的任何文件更改时,要更改时间戳,您需要更新列表。下一次下载了带有修改后的时间戳的文件。

  • 按照一般app的设计,都是主应用,和用户目录下的缓存文件,把用户自定义的或使用生成的文件都放到缓存文件目录里。鉴于此,我们来找找code.app的缓存文件,或许能发现点有用的东西 可参照 https://code.visualstudio.com/docs/customization/userandworkspace 理解 缓存目录详情 目录是 /Users/sang/Library/Applic

  • 设置为和设置为in。 当我运行时,它显示,但我的目录中仍有236K个文件。 对此感到沮丧,我还使用从该目录手动删除了下的所有文件/目录。 现在,当我运行时,我得到 所以,我手上有两个问题。首先是:为什么Artisan没有删除所有缓存文件?如何安全地删除它们?第二个问题是:我如何从这恢复,以便PHP工匠队列:重启不会在我身上出错? 更新:我突然想到,如果设置为,我可能没有理由重新启动队列工作程序,因

  • 问题内容: 我有一个系统,其中将缓存最大使用率设置为0,并且在我对style.css进行了一些更改时出现问题。css失败,更改不会出现在客户端上。浏览器将使用旧的CSS缓存版本。我有一个简单的问题:将css文件命名为style.css?123是否会作为新缓存? 问题答案: 是的,在资源的URI中添加唯一的查询字符串将强制客户端获取“新”版本(因为客户端不知道这仅仅是对先前缓存的资源的 更新 )。这