Service Worker 无法离线获取资产答案

【问题标题】：Service worker can't fetch assets offlineService Worker 无法离线获取资产
【发布时间】：2019-07-17 09:59:04
【问题描述】：

我正在尝试使我的网站脱机运行，但它似乎不起作用。我的项目是基于node.js，外部js文件由angular生成。

似乎一切正常，当服务器正在运行并且我转到 localhost:3000 时，服务工作者已正确安装，然后如果我转到 Chrome Devtools 中的“应用程序”选项卡，然后检查“离线”和我重新加载页面，它也可以工作。

但如果我关闭服务器并重新加载页面，我会在控制台中收到以下错误：An unknown error occurred when fetching the script.

这是我的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="icon" type="image/x-icon" href="/dist/favicon.ico">
    <link href="/dist/assets/fontawesome.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500&display=swap" rel="stylesheet">
  </head>
  <body>
    {% block body %}{% endblock %}
  </body>
  <script src="/client.js"></script>
  <script src="/service-worker.js"></script>
  <script src="/dist/runtime-es2015.js" type="module"></script>
  <script src="/dist/polyfills-es2015.js" type="module"></script>
  <script src="/dist/runtime-es5.js" nomodule></script>
  <script src="/dist/polyfills-es5.js" nomodule></script>
  <script src="/dist/styles-es2015.js" type="module"></script>
  <script src="/dist/styles-es5.js" nomodule></script>
  <script src="/dist/vendor-es2015.js" type="module"></script>
  <script src="/dist/main-es2015.js" type="module"></script>
  <script src="/dist/vendor-es5.js" nomodule></script>
  <script src="/dist/main-es5.js" nomodule></script>
  </body>
</html>

client.js：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
}

service-worker.js：

var cacheName = 'myCacheVersion';
var filesToCache = [
    '/dist/favicon.ico',
    '/dist/runtime-es2015.js',
    '/dist/polyfills-es2015.js',
    '/dist/runtime-es5.js',
    '/dist/polyfills-es5.js',
    '/dist/styles-es2015.js',
    '/dist/styles-es5.js',
    '/dist/vendor-es2015.js',
    '/dist/main-es2015.js',
    '/dist/vendor-es5.js',
    '/dist/main-es5.js',
    '/client.js',
    '/service-worker.js',
];


self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

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

知道为什么它不起作用吗？

这是我在假脱机模式下时控制台中的内容：

这是我真正离线时所拥有的

【问题讨论】：

检查网络标签，哪个脚本加载失败。
无法获取我所在的路线 (localhost:3000/login)
是的，添加您的控制台和网络选项卡的屏幕截图
我已将它们添加到帖子中
你要杀死运行在 3000 上的服务器吗？

标签： node.js angular service-worker offline offline-caching

【解决方案1】：

首先：永远不要缓存 service-worker.js！将其从要缓存的文件中删除。浏览器有一个可用的本地副本，只要浏览器从服务器更新脚本，就会使用该副本。永远不应该将脚本放在由 SW 管理的缓存中。 <script src="/service-worker.js"></script>，这也是你不应该做的事情。 service-worker.js 不应通过常规脚本标签包含，而只能通过 navigator.serviceWorker.register(...) 调用包含，就像您在其他文件中所做的那样:)

您收到错误是因为您的浏览器通过 Service Worker 尝试加载服务器的根目录，但它不可用。加载会导致不可用错误，并且在您的 Service Worker 的缓存中也找不到它，因为您没有缓存它（未在要缓存的文件中列出）。

我真的很想知道您提供的这段代码实际上是如何离线工作的，因为它没有缓存您的根页面。它根本不应该离线工作——Service Worker 没有缓存根目录，因此离线时应该无法从缓存中获取任何内容。

毫无价值 浏览器没有连接（离线）和网站不可用（服务器关闭）是两个完全不同的场景。在前者中，SW 知道网络不可用，并且可以在决定如何响应时将其考虑在内（如果被告知）。然而，在后者中，浏览器试图从网络中获取一些东西——它本身正在工作——但目的地本身不可用。这是连接到站点的失败，而不是离线模式。在后者中，SW 必须决定如何处理，可能回退到offline.html 占位符页面，并且最明显的是不缓存响应。

【讨论】：