Javascript 正在努力理解我的服务人员为什么不工作-未捕获（承诺中）类型错误：请求失败

我一直遵循的指示，使我的网站可以脱机使用。在控制台日志中，我收到消息，说明PWA已经安装，并且离线缓存，但是我在标题中得到了错误

我去过很多stackoverflow线程和其他网站，但我尝试的都没有效果。这不是我的强项，我是一个UX/UI设计师，可以编写简单的静态页面，但这比我目前的技能水平略高

我真的很难弄清楚如何解决这个问题，因为（对我来说）这个错误是相当模糊的。我想我错过了一些简单的事情。该网站的url是，但我也将链接清单和服务工人下面

manifest.json

{
    "dir": "ltr",
    "lang": "en",
    "name": "Our voice our community | Get involved in de…",
    "scope": "/",
    "display": "fullscreen",
    "start_url": "https://ovoc.netlify.com/",
    "short_name": "OVOC",
    "theme_color": "transparent",
    "description": "Our voice our community is a project run by BGC Wales to empower young people to engage in community decision making",
    "orientation": "any",
    "background_color": "transparent",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [{
    "src": "assets/icons/logo.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

这是服务人员

// This is the "Offline copy of pages" service worker

const CACHE = "pwabuilder-offline";

// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "index.html";
const offlineFallbackPage = "index.html";

// Install stage sets up the index page (home page) in the cache and opens a new cache
self.addEventListener("install", function (event) {
  console.log("[PWA Builder] Install Event processing");

  event.waitUntil(
    caches.open(CACHE).then(function (cache) {
      console.log("[PWA Builder] Cached offline page during install");

      if (offlineFallbackPage === "index.html") {
        return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
      }

      return cache.add(offlineFallbackPage);
    })
  );
});

// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
  if (event.request.method !== "GET") return;

  event.respondWith(
    fetch(event.request)
      .then(function (response) {
        console.log("[PWA Builder] add page to offline cache: " + response.url);

        // If request was success, add or update it in the cache
        event.waitUntil(updateCache(event.request, response.clone()));

        return response;
      })
      .catch(function (error) {
        console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
        return fromCache(event.request);
      })
  );
});

function fromCache(request) {
  // Check to see if you have it in the cache
  // Return response
  // If not in the cache, then return error page
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request).then(function (matching) {
      if (!matching || matching.status === 404) {
        return Promise.reject("no-match");
      }

      return matching;
    });
  });
}

function updateCache(request, response) {
  return caches.open(CACHE).then(function (cache) {
    return cache.put(request, response);
  });
}

我真的很挣扎，我的客户是一个慈善机构，所以我真的很想为他们做这件事，任何帮助都将不胜感激

如果您访问，您应该在Chrome DevTools的网络面板中看到以下内容：

这表示软件正在请求URL

https://ovoc.netlify.com/[对象%20Response]

，返回404响应

它还告诉您，此请求源自

pwabilder sw.js:17

，即服务人员脚本的第17行

该行对应于：

return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));

这似乎是一些需要更新的占位符代码，以便为脱机页面输入实际URL

此外，您的

标记还包括许多未定义的

URL：


看起来这些都是由生成的，因此您应该确保正确配置了它们。
@AdamElsbury，下面是在应用程序中缓存静态资产和动态资产的工作代码
注:
1） 安装service worker时，它会安装所有静态html、css和js文件
2） 用应用程序中可用的文件替换所有静态文件名
3） 动态缓存用于缓存频繁更新的图像
4） 如果您发布了一个需要更新到用户的新版本，只需将CACHE\u STATIC\u NAME更改为1 version up

var CACHE_STATIC_NAME = 'static-v1';
var CACHE_DYNAMIC_NAME = 'dynamic-v1';

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then(function(cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll([
          '/',
          '/index.html',
          '/src/js/app.js',
          '/src/js/feed.js',
          '/src/js/promise.js',
          '/src/js/fetch.js',
          '/src/js/material.min.js',
          '/src/css/app.css',
          '/src/css/feed.css',
          '/src/images/main-image.jpg',
          'https://fonts.googleapis.com/css?family=Roboto:400,700',
          'https://fonts.googleapis.com/icon?family=Material+Icons',
          'https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'
        ]);
      })
  )
});

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        } else {
          return fetch(event.request)
            .then(function(res) {
              return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());
                  return res;
                })
            })
            .catch(function(err) {

            });
        }
      })
  );
});

我用“index.html”更新了那个请求，但仍然收到相同的错误。另外，当我进入devtools中的网络面板时，它没有列出错误是由js文件的哪一行引起的。还有其他想法吗？我补充了一些信息。