web-dev-qa-db-ja.com

マニフェストstart_urlはサービスワーカーによってキャッシュされません

Lighthouseを使用してWebアプリケーションを監査しています。私は失敗に取り組んでいますが、私はこれで立ち往生しています：

失敗：マニフェストstart_urlはサービスワーカーによってキャッシュされません。

私のmanifest.json 私が持っています

"start_url": "index.html",

私のworker.js以下をキャッシュしています：

let CACHE_NAME = 'my-site-cache-v1';
let urlsToCache = [
    '/',
    '/scripts/app.js',
    '/index.html'
];

Chrome開発ツール：

enter image description here

だから...なぜ私に言っているのですかstart_urlはキャッシュされませんか？

これが私の完全なworker.jsファイル：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

let CACHE_NAME = 'my-site-cache-v1.1';
let urlsToCache = [
  '/',
  '/scripts/app.js',
  '/index.html'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
    .then(function(cache) {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});
service-workerprogressive-web-appsmanifest.jsonlighthouse
12
Devil's Advocate

Lighthouseの ソースコード を見てみましょう

static assessOfflineStartUrl(artifacts, result) {
  const hasOfflineStartUrl = artifacts.StartUrl.statusCode === 200;

  if (!hasOfflineStartUrl) {
    result.failures.Push('Manifest start_url is not cached by a service worker');
  }

}

キャッシュのチェックではなく、エントリポイントの応答であることがわかります。その理由は、サービスワーカーがフェッチ時に適切な応答を送信していないためです。

機能していることがわかります。DevToolsの最初のリクエストで、サイズカラムに（ServiceWorkerから）次のように表示されます。 enter image description here

指定したコードには2つの問題があります。

1つ目は、service workerコードをservice worker registrationコードで混乱させていることです。 Service Worker登録コードは、Webページで実行されるコードである必要があります。

そのコードはあなたのページに含まれるべきです：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

貼り付けた残りの部分はworker.jsコードでなければなりません。ただし、ファイルがキャッシュにあるため、Service Workerがインストールされます。これを誤って貼り付けたと思われます。

2番目の（実際の）問題は、Service Workerがこのキャッシュされたファイルを返さないことです。以前に証明したように、灯台からのエラーは、Service Workerがstart_urlエントリファイルを返さないことを意味します。

これを実現するための最も基本的なコードは次のとおりです。

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request));
});

Service Workerはイベント駆動型であるため、ページがリソースを取得しようとすると、Service Workerが反応し、キャッシュからリソースを提供します。現実の世界では、なんらかのフォールバックが必要なため、そのように使用したくないのです。セクションを読むことを強くお勧めします ここからキャッシュからファイルを提供する

編集：Lighthouseソースコードに pull request を作成して、そのエラーメッセージを明確にしました

6
Karol Klepacki

Chrome lighthouse（chrome v62）は一般的なfetch()を実行するようです。 https://github.com/GoogleChrome/lighthouse/ issues/2688＃issuecomment-315394447

私の場合、offline.htmlは "if (event.request.mode === 'navigate'){"の後に提供されます。 lighthouseの一般的なfetch()を使用しているため、lighthouseはこのoffline.htmlを提供されず、「マニフェストstart_urlがサービスワーカーによってキャッシュされていません」というエラーが表示されます。

私はこの問題を次のように置き換えることで解決しました：

if (event.request.mode === 'navigate'){

と

if (event.request.method === 'GET' ){
1
chris