web-dev-qa-db-ja.com

Service-Worker、 "TypeError：Request failed at <anonymous>"

あなたが私の問題で私を助けてくれることを願っています。現在、私はサービスワーカーと一緒にPWAを構築しています。登録は成功しましたが、インストールに問題があります。

「caches.open」-promiseはエラーになります：「TypeError：Requestfailedat」。 Chromeで、キャッシュは登録されているが空であることがわかります。私はすでにキャッシュURLを何千回もチェックしました。

これが私のサービスワーカーコードです

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が返されます。したがって、認証に問題があるようです。

多分誰かがすでに同じ問題を抱えていましたか？

htmlbrowser-cachebasic-authenticationservice-workerhttp-status-code-401
9
MaxWeb

これは、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',
];
7
Okku

これは、Windowsマシンでローカルに開発し、Linuxサーバーにデプロイしているときに発生しました。問題は、パスにあります。 '。'を追加する必要があります次のように「./」のようになるためのパスの前：

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

];

2
Damien Doumer

これは、キャッシュ用にファイル（指定されたパスに存在しない）を参照しているときに発生しました。ファイルへのパスを更新すると、問題はありませんでした。

0
Sasi Kumar M