Wanna know what kind of module i'm dealing with

when i import something from a script that has assertion type
aka:

import style from './style.css' assert { type: 'css' }
import config from './config.json' assert { type: 'json' }
import util from './util.js'

then i want to know what i'm dealing with when i'm listening to fetch events...
only using event.request.destination is not enough...

onfetch = event => {
  console.log(event.request.destination)
}

I wanna know about what kind of thing i'm dealing with.

On a bonus point. i would like to be able to polyfill unsupported assertion types if possible.
for instance... safari don't support assert { type: 'css' } so i would like to fetch the content of the code. construct a own stylesheet and export that a normal script with a default export.

cuz right now it dose not support it...

import('./fe.css', {assert: {type: 'css'}})
[Error] Unhandled Promise Rejection: TypeError: Import assertion type "css" is not valid

if i could polyfill it with service worker then i could fetch the source and convert it with something like this:

onfetch = evt => {
  if (
    evt.request.destination === 'script' &&
    evt.request.assertion?.type === 'css' &&
    and_not_natively_supported
  ) {
    evt.waitUntil(async function () {
      const { request } = evt
      const css = await fetch(request).then(res => res.text())

      return new Response(`
        const sheet = new CSSStyleSheet()
        await sheet.replace(${JSON.stringify(css)}, {
          baseURL: ${JSON.stringify(ctx.request.url)}
        })
        export default sheet
      `, {
        headers: { 'content-type': 'text/javascript' }
      })
    })
  }
}

but currently i can't do that... instead the workaround i have to do is omit the hole {assert: {type: 'css'}}) thing and only look at the url pathname.

i can only imagine more and more types being supported like:

import wasm from './xyz.wasm' assert { type: 'wasm' }
import uint8array from './cat.png' assert { type: 'uint8array' }
import blob from './cat.png' assert { type: 'blob' }
import webWorker from './havy.js' assert { type: 'worker' }
import bitmap from './cat.png' assert { type: 'bitmap' }

blob.arrayBuffer().then(console.log)

and more to come...
so there need to be a way to polyfill stuff even if they are not supported.
but to do that i need to know what kind of thing scripts are trying to import stuff as.

a file type assertion could be transformed like this:

onfetch = evt => {
  if (
    evt.request.destination === 'script' &&
    evt.request.assertion?.type === 'blob' &&
    and_not_natively_supported
  ) {
    evt.waitUntil(async function () {
      const url = JSON.stringify(evt.request.url)
      return new Response(`
        const blob = await fetch(${url}).then(res => res.blob())
        export default blob
      `, {
        headers: { 'content-type': 'text/javascript' }
      })
    })
  }
}

given a import statement with:

import blob from './cat.png' assert { type: 'blob' }

Start with the onfetch handler and event.request.destination examples in the issue, then review how fetch events expose request metadata. Define whether import assertion types can be surfaced to service workers and how unsupported types would be handled; done requires an agreed API design and corresponding specification tests.