Lighthouse unable to fetch manifest.json, favicons in Canary 73.0.3654.0

[tmb-github]

Problem

Favicons and Manifest.json are not accessible to Lighthouse in Canary 73, but they are accessible to Lighthouse in Chrome 71. Failure to retrieve resources by clicking on corresponding hrefs in source view suggests the problem may be Canary itself, not Lighthouse.

OS, Browsers, URL

OS: Windows 8.1
Browsers: Chrome 71.0.3578.98 & Canary 73.0.3654.0
URL tested: https://ives-fourth-symphony.com

Lighthouse setup:

Incognito Mode, all browser extensions off
Device: Mobile
All Audits Selected
Throttling: Simulated Fast 3G
Clear Storage: checked

Chrome 71.0.3578.98

No PWA errors detected

Canary 73.0.3654.0

Multiple PWA errors, all from inability to fetch manifest.json:

3: "No usable web app manifest found on page"
6: Failures: No manifest was fetched
8: Failures: No manifest was fetched
9: Failures: No manifest was fetched

The problem may be the browser itself, not Lighthouse.

View source of page in each browser

Go to: view-source:https://ives-fourth-symphony.com/
Search for "href=manifest" and "href=favicon" in the view-source to select the manifest.json and the two favicons
Try clicking on the three links in the two browsers

Chrome 71.0.3578.98

Success: Each link opens in a new tab

Canary 73.0.3654.0

Failure: Neither resource is fetched by clicking on the links:

Theory: Something is wrong with Canary Version 73.0.3654.0

Please advise

[patrickhulce]

Thanks for filing @tmb-github! I can confirm this is a bug.

The issue here seems to be that Chrome has stopped returning the manifest in our offline pass when we test start URL even though it still returns in successfully in our Manifest gatherer in the online pass. Unclear so far if this was an intentional Chrome change we'll need to workaround, or if it's Chrome-side bug.

Either way, the fact that we need to fetch the manifest twice has always been a bit of unnecessary ugliness we can clean up to fix this.

[patrickhulce]

AFAICT this bug was already fixed in Chrome a bit ago, but it's still worth cleaning up our logic here.

[tmb-github]

I rewrote the service worker for that site, and the described problems have now vanished. As described, the previous version of the service worker--the one producing the errors on Canary 73--did not produce those errors in Chrome 71 or earlier. So... (1) Please verify that the described (and previously verified) problems are no longer occurring when you run the Canary 73 Lighthouse PWA audit; they are no longer appearing for me. (2) Would you like me to reinstall the previous service worker on that site or post its source code here so that you can determine what was causing the problem?

[patrickhulce]

I rewrote the service worker for that site, and the described problems have now vanished.

Oh I'm glad I asked then!

Would you like me to reinstall the previous service worker on that site or post its source code here so that you can determine what was causing the problem?

Yes this would be fantastic!

[tmb-github]

Let me start by posting the code alone. If this isn't helpful, I can replace the new-and-improved SW code with the previous version at my site so that you can test it against a live site. However, I wouldn't want to leave it up through the release of the next version of Chrome. But let's start here:

(function () {
  'use strict';
  var consoleLogDebug;
  var writeToConsole;
  const CACHE_NAME = '20190108234635';
  const CACHE_FILES = [
    'favicon.20180205072319.ico',
    'favicons/android-chrome-512x512.20180211120531.png',
    'favicons/android-chrome-192x192.20180211120531.png',
    'offline.html'
  ];
// for debugging:
  writeToConsole = false;
  consoleLogDebug = function (message) {
    if (writeToConsole) {
      console.log(message);
    }
  };
// https://stackoverflow.com/questions/37117933/service-workers-not-updating
  self.addEventListener('install', function (e) {
    e.waitUntil(
      Promise.all([caches.open(CACHE_NAME), self.skipWaiting()]).then(function (storage) {
        var static_cache = storage[0];
        return Promise.all([static_cache.addAll(CACHE_FILES)]);
      })
    );
  });
// https://github.com/react-boilerplate/react-boilerplate/issues/645
// intercept network requests:
  self.addEventListener('fetch', function (event) {
    consoleLogDebug('Fetch event for ' + event.request.url);
// SEE: https://github.com/paulirish/caltrainschedule.io/pull/51/commits/82d03d9c4468681421321db571d978d6adea45a7
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
      return;
    }
    event.respondWith(
      caches.match(event.request).then(function (response) {
        if (response) {
          consoleLogDebug('Found ' + event.request.url + ' in cache');
          return response;
        }
        consoleLogDebug('Network request for ' + event.request.url);
// add fetched files to the cache:
        return fetch(event.request.clone()).then(function (response) {
// Respond with custom 404 page
          if (response) {
            if (response.status === 404) {
              return caches.match('error?status=404');
            }
            return caches.open(CACHE_NAME).then(function (cache) {
              if (event.request.url.indexOf('test') < 0) {
  // brute-force method for excluding chrome and firefox extensions:
                if ((event.request.url.substring(0, 16) !== ('chrome-extension')) && (event.request.url.substring(0, 13) !== ('moz-extension'))) {
                  cache.put(event.request.url, response.clone());
                }
              }
              return response;
            });
          } else {
            throw new Error('Requested resource unavailable for caching');
          }
        }).catch(function (error) {
          consoleLogDebug('Error, ' + error);
        });
      }).catch(function (error) {
// respond with custom offline page:
        consoleLogDebug('Error, ' + error);
// Really need an offline page here:
        return caches.match('offline.html');
      })
    );
  });
// delete unused caches
// https://stackoverflow.com/questions/37117933/service-workers-not-updating
  self.addEventListener('activate', function (e) {
    e.waitUntil(
      Promise.all([
        self.clients.claim(),
        caches.keys().then(function (cacheNames) {
          return Promise.all(
            cacheNames.map(function (cacheName) {
              if (cacheName !== CACHE_NAME) {
                console.log('deleting', cacheName);
                return caches.delete(cacheName);
              }
            })
          );
        })
      ])
    );
  });
}());