fix(): always prefer largest icons first

components/Download.vue

@@ -92,18 +92,21 @@ export default class extends Vue {
 
   async handleTWA() {
     this.isReady = false;
-    await this.getGoodIcon().then(goodIcon => {
-      if (goodIcon.message !== undefined) {
-        this.isReady = true;
-        this.errorMessage = goodIcon.message;
-      }
-      else {
-        this.callTWA(goodIcon);
-    }});
+
+    const goodIcon = await this.getGoodIcon();
+
+    if (goodIcon.message !== undefined) {
+      this.isReady = true;
+      this.errorMessage = goodIcon.message;
+    } else {
+      this.callTWA(goodIcon);
+    }
   }
 
   public async callTWA(goodIcon) {
-    const packageid = generatePackageId((this.manifest.short_name as string) || (this.manifest.name as string));
+    const packageid = generatePackageId(
+      (this.manifest.short_name as string) || (this.manifest.name as string)
+    );
 
     let startURL = (this.manifest.start_url as string).replace(
       `https://${new URL(this.siteHref).hostname}`,
@@ -158,35 +161,61 @@ export default class extends Vue {
           body: body
         }
       );
-      
-      if(response.status === 200) {
+
+      if (response.status === 200) {
         const data = await response.blob();
 
         let url = window.URL.createObjectURL(data);
         window.location.assign(url);
-      }
-      else {
+      } else {
         this.errorMessage = `Status code: ${response.status}, Error: ${response.statusText}`;
       }
 
       this.isReady = true;
     } catch (err) {
       this.isReady = true;
-      this.errorMessage = `Status code: ${err.status}, Error: ${err.statusText}` || err;
+      this.errorMessage =
+        `Status code: ${err.status}, Error: ${err.statusText}` || err;
     }
   }
 
-  public async getGoodIcon(): Promise<any> { 
+  public async getGoodIcon(): Promise<any> {
     return new Promise<any>(async resolve => {
-      var goodIcon = (this.manifest as any).icons.find(
-        icon => (icon.sizes.includes("512") || icon.sizes.includes("192")) && !icon.src.includes("data:image")
-      );
-      if(goodIcon) {
+
+      // make copy of icons so nuxt does not complain
+      const icons = [...(this.manifest as any).icons];
+
+      // we prefer large icons first, so sort array from largest to smallest
+      const sortedIcons = icons.sort((a, b) => {
+        // convert icon.sizes to a legit integer we can use to sort
+        let aSize = parseInt(a.sizes.split('x').pop());
+        let bSize = parseInt(b.sizes.split('x').pop());
+
+        return bSize - aSize;
+      });
+
+      let goodIcon = sortedIcons.find(icon => {
+          // look for 512 icon first, this is the best case
+          if (icon.sizes.includes("512") && !icon.src.includes("data:image")) {
+            return icon;
+          }
+          // 192 icon up next if we cant find a 512. This may end up with the icon on the splashscreen
+          // looking a little blurry, but better than no icon
+          else if (icon.sizes.includes("192") && !icon.src.includes("data:image")) {
+            return icon;
+          }
+          // cant find a good icon
+          else {
+            return null;
+          }
+      });
+
+      if (goodIcon) {
         await this.isValidUrl(goodIcon.src).then(
           function fulfilled() {
-              resolve(goodIcon);
+            resolve(goodIcon);
           },
-          
+
           function rejected() {
             // Continue to iterate icons collection to find a good icon.
           }
@@ -197,9 +226,8 @@ export default class extends Vue {
       for (i; i < (this.manifest as any).icons.length; i++) {
         goodIcon = (this.manifest as any).icons[i];
         var imageFound = false;
-        if (!goodIcon.src.includes("data:image"))
-        {
-          await this.isValidUrl(goodIcon.src).then(      
+        if (!goodIcon.src.includes("data:image")) {
+          await this.isValidUrl(goodIcon.src).then(
             function fulfilled() {
               imageFound = true;
             },
@@ -209,49 +237,45 @@ export default class extends Vue {
             }
           );
           if (imageFound) {
-              break;
+            break;
           }
         }
       }
 
-      if(i === (this.manifest as any).icons.length) {
-        resolve({'isValidUrl': false, 'message' : `${goodIcon.src} is not found`});
-      }
-      else {
+      if (i === (this.manifest as any).icons.length) {
+        resolve({ isValidUrl: false, message: `${goodIcon.src} is not found` });
+      } else {
         resolve(goodIcon);
       }
     });
   }
-  
 
   public async isValidUrl(url) {
     const imgPromise = new Promise(function imgPromise(resolve, reject) {
+      const imgElement = new Image();
 
-        const imgElement = new Image();
-
-        // When image is loaded, resolve the promise
-        imgElement.addEventListener('load', function imgOnLoad() {
-            resolve(this);
-        });
-
-        // When there's an error during load, reject the promise
-        imgElement.addEventListener('error', function imgOnError() {
-            reject();
-        })
+      // When image is loaded, resolve the promise
+      imgElement.addEventListener("load", function imgOnLoad() {
+        resolve(this);
+      });
 
-        imgElement.src = url;
+      // When there's an error during load, reject the promise
+      imgElement.addEventListener("error", function imgOnError() {
+        reject();
+      });
 
+      imgElement.src = url;
     });
 
     return imgPromise;
   }
 
   public imageFound() {
-      return {'isValidUrl': true };
+    return { isValidUrl: true };
   }
 
   public imageNotFound() {
-      return { 'isValidUrl': false};
+    return { isValidUrl: false };
   }
 
   public async buildArchive(
@@ -304,7 +328,7 @@ Vue.prototype.$awa = function(config) {
   if (awa) {
     awa.ct.capturePageView(config);
   }
-  
+
   return;
 };
 </script>