[w3c/ServiceWorker] Wanna know what kind of script i'm dealing with (Issue #1685)

when i import something from a script that has assertion type
aka:
```js
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...
```js
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 return it as a normal script.

cuz right now it dose not support it...
```js
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:

```js
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 i have to 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:
```js
import wasm from './xyz.wasm' assert { type: 'wasm' }
import uint8array from './cat.png' assert { type: 'uint8array' }
import file from './cat.png' assert { type: 'file' }
import webWorker from './havy.js' assert { type: 'worker' }

file.arrayBuffer()
```
and more to come...
so there need to be a way to polyfill stuff even if they are not supported.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/ServiceWorker/issues/1685
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/ServiceWorker/issues/1685@github.com>

Received on Tuesday, 4 July 2023 23:42:09 UTC