没有服务器的自定义404错误

404错误是HTTP状态响应。因此,除非您试图使用HTTP请求/响应检索此文件,否则不会出现真正的404错误。你只能用你建议的方式模仿一个。任何处理404错误的“标准”方法都取决于您对web服务器的喜好。。。

404是一个HTTP响应代码,因此只能由使用它的服务器通过HTTP协议交付。file://扩展名本身并不是一个真正的协议响应,它是一种内置于客户端(如浏览器)中的黑客攻击,可以实现本地文件支持,但是浏览器/客户端自己决定是否从其file://实现中暴露任何响应代码。例如,理论上,它们可以在DOM中报告它们,但它们将是暴露于自身的响应代码,因此很少实现。大多数人没有,也没有一个标准的方法。你可以查看浏览器扩展,比如Firefox,看看他们是否支持它,但是,这是非常不标准的,如果你把它放到网上,它很可能会崩溃。

你为什么不想使用服务器呢?

.

无论何时加载网页,都会向服务器发出请求。因此,当您请求不存在的文件时,由服务器处理错误。常规HTML/CSS/JavaScript只有在服务器发回响应告诉您它找不到文件时才会出现。

史蒂夫

google cache lab ,工作文件如下所示:

const filesToCache = [
  '/',
  '404.html'
];

const staticCacheName = 'pages-cache-v1';

self.addEventListener('install', event => {
  console.log('Attempting to install service worker and cache static assets');

  event.waitUntil(
    caches.open(staticCacheName).then(cache => {
      return cache.addAll(filesToCache);
    });
  );
});

self.addEventListener('fetch', event => {
  console.log('Fetch event for ', event.request.url);

  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        console.log('Found ', event.request.url, ' in cache');
        return response;
      }
    
      console.log('Network request for ', event.request.url);
      
      return fetch(event.request).then(response => {
        console.log('response.status:', response.status);

        // fetch request returned 404, serve custom 404 page
        if (response.status === 404) {
          return caches.match('404.html');
        }
      });
    });
  );
});