Как с помощью ServiceWorker производить route (роутинг)

Question

Как с помощью ServiceWorker производить роутинг импортируемых библиотек/скриптов

хочу - конечная цель

хочу менять

это (someFile.js)

import('react')
import 'react'
import * as React 'react'

на это (обработка/роутинг - результат работы)

// например
import('https://unpkg.com/[email protected]/umd/react.production.min.js')

что имею

sw.js

/// <reference lib="DOM" />
/// <reference lib="WebWorker" />
const log = (...q) => console.log('sw:', ...q)

/** @type { Array<(self:ServiceWorkerGlobalScope) => void> } */
const fs = [];

test: {
    fs.push(self => {
        self.addEventListener('install', e => { log('install', e) })
        self.addEventListener('activate', e => { log('activate', e) })
        self.addEventListener('fetch', e => { log('fetch', e) })
    })
}
fetch: {
    fs.push(self => {
        self.addEventListener('fetch', e => {
            const { request } = e
            const { url } = request
            log('fetch', `url: ${url}`)
        })
    })
}
cacheAddRequests: {
    const cacheAddRequests = async () => {
        try {
            /**@type {(string | Request)[]} */
            const requests = [
                self.origin
            ]
            log({ requests })
            const cache = await caches.open('v1')
            await cache.addAll(requests)
        }
        catch (e) { console.warn(e) }
    }
    fs.push(self => {
        self.addEventListener('install', event => event.waitUntil(cacheAddRequests()))
    })
}

INIT: {
    fs.forEach(f => f(self))
}

index.html

<body>
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js')
                .then((reg) => {
                    // регистрация сработала
                    console.log('Registration succeeded. Scope is ' + reg.scope)
                    console.log({ reg })
                }).catch((error) => {
                    // регистрация прошла неудачно
                    console.log('Registration failed with ' + error)
                })
        }
    </script>
    <!-- <script src="index.js" type="module"></script> -->
    <script type="module">
        // fetch('/index.js')
        // fetch('index.js')
        // -,-
        // import('/index.js')
        // import('index.js')
        // -,-
        import '/index.js'
        // import 'index.js'
    </script>
</body>

ВОПРОС

оно как бы работает, но:

может велосипед уже изобрели (см. конечная цель)
прошу взгляд со стороны

оно как бы работает, но:

<script type="module">
    // fetch('/index.js')  // работает
    // fetch('index.js')   // работает
    // -,-
    // import('/index.js') // работает
    // import('index.js')  // нет // Err
    // -,-
    import '/index.js'     // работает
    // import 'index.js'   // нет // Err
</script>
<script src="index.js" type="module"></script>  // работает

под работает я понимаю что срабатывает log('fetch', `url: ${url}`) в блоке fetch

БЛОГ НА HUSL

Как с помощью ServiceWorker производить route (роутинг)

Как с помощью ServiceWorker производить роутинг импортируемых библиотек/скриптов

хочу - конечная цель

что имею

sw.js

index.html

ВОПРОС

Ответы (0 шт):