Simplify image support detection for SW

Instead of using extra files + a plugin to inline images, report image support from the main thread before caching assets.

lib/data-url-plugin.js

@@ -1,41 +0,0 @@
-/**
- * Copyright 2020 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { promises as fs } from 'fs';
-
-import { lookup as lookupMime } from 'mime-types';
-
-const prefix = 'data-url:';
-
-export default function dataURLPlugin() {
-  return {
-    name: 'data-url-plugin',
-    async resolveId(id, importer) {
-      if (!id.startsWith(prefix)) return;
-      return (
-        prefix + (await this.resolve(id.slice(prefix.length), importer)).id
-      );
-    },
-    async load(id) {
-      if (!id.startsWith(prefix)) return;
-      const realId = id.slice(prefix.length);
-      this.addWatchFile(realId);
-
-      const source = await fs.readFile(realId);
-      const type = lookupMime(realId) || 'text/plain';
-
-      return `export default 'data:${type};base64,${source.toString(
-        'base64',
-      )}';`;
-    },
-  };
-}

missing-types.d.ts

@@ -32,11 +32,6 @@ declare module 'css:*' {
   export default source;
 }
 
-declare module 'data-url:*' {
-  const url: string;
-  export default url;
-}
-
 declare var ga: {
   (...args: any[]): void;
   q: any[];

rollup.config.js

@@ -30,7 +30,6 @@ import emitFiles from './lib/emit-files-plugin';
 import featurePlugin from './lib/feature-plugin';
 import initialCssPlugin from './lib/initial-css-plugin';
 import serviceWorkerPlugin from './lib/sw-plugin';
-import dataURLPlugin from './lib/data-url-plugin';
 import entryDataPlugin from './lib/entry-data-plugin';
 
 function resolveFileUrl({ fileName }) {
@@ -82,7 +81,6 @@ export default async function ({ watch }) {
       'codecs',
     ]),
     urlPlugin(),
-    dataURLPlugin(),
     cssPlugin(resolveFileUrl),
   ];
 

src/client/lazy-app/sw-bridge/index.ts

@@ -1,6 +1,7 @@
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 
 import { get, set } from 'idb-keyval';
+import { canDecodeImageType } from 'client/lazy-app/util';
 
 import swUrl from 'service-worker:sw';
 
@@ -104,6 +105,12 @@ export async function mainAppLoaded() {
   // If the user has already interacted, no need to tell the service worker anything.
   const userInteracted = await get<boolean | undefined>('user-interacted');
   if (userInteracted) return;
+  await Promise.all(
+    ['avif', 'webp'].map(async (name) => {
+      let isSupported = await canDecodeImageType(`image/${name}`);
+      await set(`supports-${name}`, isSupported);
+    }),
+  );
   set('user-interacted', true);
   const serviceWorker = await getMostActiveServiceWorker();
   if (!serviceWorker) return; // Service worker not installing yet.

src/sw/to-cache.ts

@@ -1,6 +1,5 @@
 import { threads, simd } from 'wasm-feature-detect';
-import webpDataUrl from 'data-url:./tiny.webp';
-import avifDataUrl from 'data-url:./tiny.avif';
+import { get } from 'idb-keyval';
 
 // Give TypeScript the correct global.
 declare var self: ServiceWorkerGlobalScope;
@@ -105,7 +104,7 @@ import wp2EncMtWasm from 'url:codecs/wp2/enc/wp2_enc_mt.wasm';
 import * as wp2Enc from 'entry-data:codecs/wp2/enc/wp2_enc';
 import wp2EncWasm from 'url:codecs/wp2/enc/wp2_enc.wasm';
 
-export const theRest = (async () => {
+export const theRest = async () => {
   const [
     supportsThreads,
     supportsSimd,
@@ -114,15 +113,8 @@ export const theRest = (async () => {
   ] = await Promise.all([
     threads(),
     simd(),
-    ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => {
-      if (!self.createImageBitmap) return false;
-      const response = await fetch(dataUrl);
-      const blob = await response.blob();
-      return createImageBitmap(blob).then(
-        () => true,
-        () => false,
-      );
-    }),
+    get('supports-webp'),
+    get('supports-avif'),
   ]);
 
   const items = [
@@ -210,4 +202,4 @@ export const theRest = (async () => {
   }
 
   return [...new Set(items)];
-})();
+};

src/sw/util.ts

@@ -91,7 +91,7 @@ export async function cacheBasics(cacheName: string) {
 
 export async function cacheAdditionalProcessors(cacheName: string) {
   const cache = await caches.open(cacheName);
-  return cache.addAll(await theRest);
+  return cache.addAll(await theRest());
 }
 
 const nextMessageResolveMap = new Map<string, (() => void)[]>();