Caching 如何将Service Worker与Yeoman webapp generator一起使用？

我的项目结构如下所示：

.tmp
    scripts
        bundle.js
        bundle.map.js
app
    scripts
        main.js
    styles
        buttons.scss
        grid.scss
        ....
        main.scss
    index.html
    sw.js

我的服务人员注册：

// Register Service Worker
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log("Registration successful"))
    .catch(() => console.log("Registration failed"));
  }

我想使用Service Worker制作一个离线web应用程序，我缓存了资源并实现了代码，以便在

fetch

事件上为它们提供服务，但尽管它们没有被提供服务，而且我一直收到此错误

FetchEvent for“http://localhost:9000/"导致网络错误响应：承诺被拒绝。

和

无法获取

。我正在为开发人员使用localhost和

gulp service

。我认为服务人员应该放在其他地方，比如.tmp可能？？你觉得怎么样

我的sw.js文件：

const staticCache = "staticCache-v1";
const staticAssets = [
  //js
  "browser-sync/browser-sync-client.js?v=2.24.5",
  "index.html",
  "scripts/bundle.js",
  //css
  "styles/main.scss",
  //html
  "index.html",
  //fonts
  "https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2",
  "https://free.currencyconverterapi.com/api/v5/currencies"
];

self.addEventListener("install", event => {
  // Cache static resources
  event.waitUntil(
    caches.open(staticCache).then(cache => cache.addAll(staticAssets))
  );
});

self.addEventListener("activate", event => {
  // clean old SW
});

self.addEventListener("fetch", event => {
  // try placing the sw in .tmp
  console.log("fetch request :", event.request);
  event.respondWith(
    caches.match(event.request).then(cacheResponse => {
      return cacheResponse || fetch(event.request);
    })
  );
});