Add interceptors and proxies for dev server

[Dumeng]

Now, we can use yarn dev to start dev server

[Dumeng]

Now, we can only proxy the request seed by the axios. Audio and images retrieve by html elements directly cannot be handled.
We may need a global url replacer or a service worker to handle these request.
I will create another PR maybe later.

[mikelxk]

I tested using service worker without https under localhost, it works just fine.
Do we really need the boresome certificate and CA stuffs to make it work?

Also we need to provide an alternative to set/get/delete cookies since the chrome.cookie only exists in extension

[Dumeng]

If it works fine, then the cert is not necessary. But in some cases, you will get error when you are try to load HTTPS url in a HTTP page.

[Dumeng]

If the current dev server solution is enough to support UI development. I'd like moving on the create a new local playlist based on indexed DB. The cookies issue will be deprioritized.

[mikelxk]

If the current dev server solution is enough to support UI development. I'd like moving on the create a new local playlist based on indexed DB. The cookies issue will be deprioritized.

There's a builtin localforage currently uses indexDB in chrome extension, you might be interested in that as well.

[listen1]

very interesting pr to support dev in browser.

still testing it because it seems not working in my environment. (Mac, Chrome V93). It seems not easy for developers to setup. More docs may help. In my situation, console complains about this. I'm still try to figure out what does it mean.

An unknown error occurred when fetching the script.

:3000/#/:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://localhost:3000/') with script ('https://localhost:3000/sw.ts'): An unknown error occurred when fetching the script.

I'm sure proxy port is running at port 3001.

[mikelxk]

still testing it because it seems not working in my environment. (Mac, Chrome V93). It seems not easy for developers to setup. More docs may help. In my situation, console complains about this. I'm still try to figure out what does it mean.

I believe it's due to browser won't fetch service worker if the https certificate is not trusted. You can either trust the certificate or run vite without https because service worker still work under localhost.

[listen1]

still testing it because it seems not working in my environment. (Mac, Chrome V93). It seems not easy for developers to setup. More docs may help. In my situation, console complains about this. I'm still try to figure out what does it mean.

I believe it's due to browser won't fetch service worker if the https certificate is not trusted. You can either trust the certificate or run vite without https because service worker still work under localhost.

thanks. problem solved. Now in homepage it is working as expect.

But when you enter any playlist, or any function related to cookie API (we use chrome.cookie API), things broke. I think the reason is browser environment does not support chrome extension API, so if we need things work, in dev mode, we need to migrate chrome related api to dev server.

So I think this feature is still in experimental stage. The idea is good, more research is necessary.