Service-Worker，“TypeError：<anonymous> 处的请求失败”答案

【问题标题】：Service-Worker, "TypeError:Request failed at <anonymous>"Service-Worker，“TypeError：<anonymous> 处的请求失败”
【发布时间】：2018-07-27 11:43:43
【问题描述】：

我希望你能帮助我解决我的问题。目前，我与服务人员构建了一个 PWA。它注册成功，但安装有问题。

“caches.open”-promise 导致错误：“TypeError: Request failed at”。您可以在 Chrome 中看到缓存已注册，但为空。我已经检查过缓存网址一千次了..

这是我的 Service-worker 代码

var CACHE_NAME = 'surv-cache-1';

var resourcesToCache = [
    '/',
    '/index.html',
    '/jquery-3.2.1.min.js',
    '/pouchdb.min-6.4.1.js',
    '/styles/inline.css',
    '/scripts/app.js'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    // open the app browser cache
    caches.open(CACHE_NAME).then(function(cache) {
        console.log("Install succesfull");
        // add all app assets to the cache
        return cache.addAll(resourcesToCache);
    }).then(function(out){
        console.log(out);
    }).catch(function(err){
        console.log(err);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    // try to find corresponding response in the cache
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          // cache hit: return cached result
          return response;
        }

        // not found: fetch resource from the server
        return fetch(event.request);
      }).catch(function(err){
          console.log(err);
      })
  );
});

还有我的注册码：

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js').then(function(registration) {
            console.log('Service worker registered:'+registration.scope);
        }).catch(function(e) {
            console.log(e);
        });
    };

我没听懂..我希望你有一个想法:)

编辑：我想我现在知道为什么它不起作用了。我有我的域的身份验证，所以不是每个人都可以访问它。当我的服务人员想要缓存数据时，它得到了 401。所以这似乎是身份验证的问题。

也许有人已经遇到过同样的问题？

【问题讨论】：

同样的问题，还没找到解决办法。

标签： html browser-cache basic-authentication service-worker http-status-code-401

【解决方案1】：

当您的 resourcesToCache 包含返回 404 响应的内容时，就会发生这种情况。确保所有内容都输入正确。还要确保范围是正确的。您可以使用以下方法检查您的工作人员范围：

if("serviceWorker" in navigator) {
  navigator.serviceWorker
  .register(`worker.js`)
  .then(registration => {
    console.log("SW scope:", registration.scope);
  });
}

如果您的项目不在服务器域根目录中，执行以下操作可能会有所帮助：

//your main js
if("serviceWorker" in navigator) {
  navigator.serviceWorker
  .register(`${window.location.pathname}worker.js`)
  .then(registration => {
    //do your thing
  });
}


//your worker js
let resourcesToCache = [
  './',
  './index.html',
  './jquery-3.2.1.min.js',
  './pouchdb.min-6.4.1.js',
  './styles/inline.css',
  './scripts/app.js',
];
//...

附带说明，您应该从 CDN 加载库（jQuery、pouchdb）以提高性能。这些也可以缓存：

let resourcesToCache = [
  './',
  './index.html',
  'https://code.jquery.com/jquery-3.3.1.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/pouchdb/6.4.3/pouchdb.min.js',
  './styles/inline.css',
  './scripts/app.js',
];

【讨论】：

关于 404 响应的那一点非常适合我！

【解决方案2】：

当我在windows机器上本地开发并在linux服务器上部署时发生这种情况，问题出在路径上。您需要添加一个“。”在你的路径之前让它像“./”如下：

var resourcesToCache = [
'./',
'./index.html',
'./jquery-3.2.1.min.js',
'./pouchdb.min-6.4.1.js',
'./styles/inline.css',
'./scripts/app.js'

];

【讨论】：

【解决方案3】：

当我引用一个文件（指定路径中不存在）进行缓存时，这发生在我身上。当我更新文件的路径时，一切都很好。

【讨论】：