服务工作者，"TypeError:请求在< anonymous>失败" [英] Service-Worker, "TypeError:Request failed at <anonymous>"

问题描述

希望您能帮助我解决我的问题. 目前，我与服务人员一起建立PWA.它注册成功，但是安装有问题.

I hope you can help me with my problem. Currently I build a PWA with a service-worker. It registerd successful, but something is wrong with the installation.

"caches.open"承诺导致错误:"TypeError:请求失败于".您可以在Chrome浏览器中看到缓存已注册，但为空. 我已经检查了缓存URL数千次.

The "caches.open"-promise result in an error: "TypeError: Request failed at ". You can see in Chrome, that the cache is registerd, but empty. I already checked the cache urls thousand times..

这是我的服务人员代码

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

我不明白..希望你有个主意:)

I didn't get it.. I hope you have an idea :)

我想我现在知道为什么它不起作用了.我已经为我的域进行了身份验证，所以并不是每个人都可以访问它. 当我的服务人员想要缓存数据时，它会返回401.因此，认证似乎是一个问题.

I think I know now why it don't work. I have a authentication for my domain, so not everybody can access it. While my serviceworker want to caching the data, it get 401 back. So it seems to be a problem with the authentication.

也许有人已经遇到了同样的问题?

Maybe someone had already the same problem?

推荐答案

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

This happens when your resourcesToCache includes something that returns a 404 response. Make sure you have everything typed correctly. Also make sure that the scope is correct. You can check your worker scope using:

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

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

If your project is not in your server domain root, doing something like this might help:

//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)，以提高性能.那些也可以被缓存:

As a side-note, you should be loading your libraries (jQuery, pouchdb), from a CDN to improve performance. Those can be cached too:

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',
];

这篇关于服务工作者，"TypeError:请求在< anonymous>失败"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！