core(installable-manifest): check for fetchable icon

lighthouse-cli/test/smokehouse/test-definitions/offline-local/offline-expectations.js

@@ -101,6 +101,22 @@ module.exports = [
     },
   },
   {
+    artifacts: {
+      WebAppManifest: {
+        value: {
+          icons: {
+            value: [
+              {value: {src: {value: 'http://localhost:10503/launcher-icon-0-75x.png'}}, warning: 'Error fetching icon'},
+              {value: {src: {value: 'http://localhost:10503/launcher-icon-1x.png'}}, warning: 'Error fetching icon'},
+              {value: {src: {value: 'http://localhost:10503/launcher-icon-1-5x.png'}}, warning: 'Error fetching icon'},
+              {value: {src: {value: 'http://localhost:10503/launcher-icon-2x.png'}}, warning: 'Error fetching icon'},
+              {value: {src: {value: 'http://localhost:10503/launcher-icon-3x.png'}}, warning: 'Error fetching icon'},
+              {value: {src: {value: 'http://localhost:10503/launcher-icon-4x.png'}}, warning: undefined},
+            ],
+          },
+        },
+      },
+    },
     lhr: {
       requestedUrl: 'http://localhost:10503/offline-ready.html',
       finalUrl: 'http://localhost:10503/offline-ready.html',

lighthouse-core/gather/gather-runner.js

@@ -13,6 +13,7 @@ const NetworkAnalyzer = require('../lib/dependency-graph/simulator/network-analy
 const NetworkRecorder = require('../lib/network-recorder.js');
 const constants = require('../config/constants.js');
 const i18n = require('../lib/i18n/i18n.js');
+const pageFunctions = require('../lib/page-functions.js');
 
 /** @typedef {import('../gather/driver.js')} Driver */
 
@@ -536,7 +537,24 @@ class GatherRunner {
   static async getWebAppManifest(passContext) {
     const response = await passContext.driver.getAppManifest();
     if (!response) return null;
-    return manifestParser(response.data, response.url, passContext.url);
+    const manifest = manifestParser(response.data, response.url, passContext.url);
+
+    // Add a warning for icons that aren't fetchable.
+    if (manifest.value && Array.isArray(manifest.value.icons.value)) {
+      const iconsToFetch = manifest.value.icons.value
+        .filter(icon => icon.value.src && icon.value.src.value);
+      const fetchPromises = iconsToFetch.map(async icon => {
+        const expression = `(${pageFunctions.fetchIsOkString})(
+          ${JSON.stringify(icon.value.src.value)}
+        )`;
+        if (!await passContext.driver.evaluateAsync(expression, {useIsolation: true})) {
+          icon.warning = 'Error fetching icon';
+        }
+      });
+      await Promise.all(fetchPromises);
+    }
+
+    return manifest;
   }
 
   /**

lighthouse-core/lib/icons.js

@@ -7,6 +7,14 @@
 
 const URL = require('./url-shim.js');
 
+/**
+ * Filter out icons that could not be fetched in the page.
+ * @param {NonNullable<LH.Artifacts.Manifest['value']>} manifest
+ */
+function getFetchableIcons(manifest) {
+  return manifest.icons.value.filter(icon => !icon.warning);
+}
+
 /**
  * @param {NonNullable<LH.Artifacts.Manifest['value']>} manifest
  * @return {boolean} Does the manifest have any icons?
@@ -15,7 +23,7 @@ function doExist(manifest) {
   if (!manifest || !manifest.icons) {
     return false;
   }
-  if (manifest.icons.value.length === 0) {
+  if (getFetchableIcons(manifest).length === 0) {
     return false;
   }
   return true;
@@ -29,7 +37,7 @@ function doExist(manifest) {
 function pngSizedAtLeast(sizeRequirement, manifest) {
   // An icon can be provided for a single size, or for multiple sizes.
   // To handle both, we flatten all found sizes into a single array.
-  const iconValues = manifest.icons.value;
+  const iconValues = getFetchableIcons(manifest);
   /** @type {Array<string>} */
   const flattenedSizes = [];
   iconValues

lighthouse-core/lib/manifest-parser.js

@@ -271,7 +271,7 @@ function parseIcon(raw, manifestUrl) {
     sizes = {...parsedSizes, value: undefined};
   }
 
-  return {
+  const result = {
     raw,
     value: {
       src,
@@ -281,6 +281,10 @@ function parseIcon(raw, manifestUrl) {
     },
     warning: undefined,
   };
+  // Hack to make warning be `string|undefined`, even though this function will always
+  // return undefined. Can be removed if Manifest is explicitly typed (see artifacts.d.ts).
+  const warning = /** @type {string=} */(undefined);
+  return {...result, warning};
 }
 
 /**

lighthouse-core/lib/page-functions.js

@@ -6,7 +6,7 @@
 // @ts-nocheck
 'use strict';
 
-/* global window document Node ShadowRoot */
+/* global window document Node ShadowRoot fetch */
 
 /**
  * Helper functions that are passed by `toString()` by Driver to be evaluated in target page.
@@ -303,6 +303,12 @@ function getNodeLabel(node) {
   return tagName;
 }
 
+/** @param {string} url */
+async function fetchIsOk(url) {
+  const response = await fetch(url);
+  return response.ok;
+}
+
 module.exports = {
   wrapRuntimeEvalErrorInBrowserString: wrapRuntimeEvalErrorInBrowser.toString(),
   registerPerformanceObserverInPageString: registerPerformanceObserverInPage.toString(),
@@ -318,4 +324,5 @@ module.exports = {
   getNodeLabel: getNodeLabel,
   getNodeLabelString: getNodeLabel.toString(),
   isPositionFixedString: isPositionFixed.toString(),
+  fetchIsOkString: fetchIsOk.toString(),
 };

lighthouse-core/test/lib/icons-test.js

@@ -36,6 +36,17 @@ describe('Icons helper', () => {
       assert.equal(icons.doExist(manifest.value), false);
     });
 
+    it('fails when a manifest contains no fetchable icons', () => {
+      const manifestSrc = JSON.stringify({
+        icons: [{
+          src: 'icon.png',
+        }],
+      });
+      const manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL);
+      manifest.value.icons.value[0].warning = 'Error fetching icon';
+      assert.equal(icons.doExist(manifest.value), false);
+    });
+
     it('succeed when a manifest contains icons', () => {
       const manifestSrc = JSON.stringify({
         icons: [{