How should import() work in service workers?

Option 1

Before the service worker is "installed", calls to import() are fetched, bypassing all service workers. These module resources are cached along with the service worker script.

After the service worker is installed, calls to import() will only use resources that are cached along with the service worker script, otherwise they will fail.

Eg:

addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open('static-v1');
    return Promise.all([
      cache.addAll(urls),
      import('./big-script.js'),
      import('./another-big-script.js'),
    ]);
  })());
});

addEventListener('fetch', (event) => {
  event.respondWith((async () => {
    if (whatever) {
      const { complicatedThing } = await import('./big-script.js');
      // …etc…
    }
  })());
});

• ✅ Compatible with classic and module service workers
• ✅ Promotes working offline
• ✅ Similar to how importScripts works
• ✅ Don't need to know the full import tree, except for dynamic imports
• ⚠️ Requires parsing (and maybe executing) stuff in the install phase that isn't actually used

Another idea:

Option 2

Before the service worker is "activated", calls to import() just go to the network, bypassing all service workers.

After the service worker is "activated", calls to import() will go via that service worker's "fetch" event.

addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open('static-v1');
    return cache.addAll([
      ...urls,
      './big-script.js',
      './big-script-dependency.js',
      './another-big-script.js',
      './another-big-script-dependency.js',
    ]);
  })());
});

addEventListener('fetch', (event) => {
  event.respondWith((async () => {
    if (whatever) {
      const { complicatedThing } = await import('./big-script.js');
    }
    return caches.match(event.request);
  })());
});

• ✅ Compatible with classic and module service workers
• ✅ Scripts can be cached without parsing them
• ⚠️ Need to list out all the module's dependencies
• ⚠️ It can work offline, via the same mechanism as pages, but it can also become network dependent. It's versatile, but folks might not test for it?
• ⚠️ Implementation complexities? I think it's the first time a request from a service worker will go through its own fetch event.

We could overcome the dependencies issue with something like cache.addModule('./big-script.js'), which would crawl the tree similar to modulepreload. That means we're having to parse the modules, but it doesn't need to execute them.

I preferred "option 2" when it was just in my head, but now I've written it down and thought it through, I don't think I like it. So, what about: