Seneral / FlagPlayer

Music-oriented YouTube web-app - single-page, client-side, simple
https://flagplayer.seneral.dev
17 stars 5 forks source link

How to enable service worker for local project and why is it disabled? #15

Open NeuroCPP opened 2 years ago

NeuroCPP commented 2 years ago

image as said here image I have set up corsserver.bat as a service using NSSM

NeuroCPP commented 2 years ago

would be happy to know

Seneral commented 2 years ago

Oh, that's a browser limitation unfortunately, they don't allow service workers to run for local sites somehow

The service I mentioned refers to a service registered with the OS so the local cors server runs always and you can just open the site (whether local or remote). Local app really is only good for development. If you're worried about my site going down, if you use flagplayer.seneral.dev it already uses a local copy (downloads once and notifies you when an update is downloaded). So will work even if my website is down. If you want to use a custom app version, best bet is to fork it on github and set it up as a page yourself (should be very easy, a rename and maybe some settings). No need for a custom domain, so no costs. Local app is only really useful for development unfortunately

Note that the local cors server is a different story, you can use: Remote app + remote cors server Local app + local cors server Remote app + local cors server I use the latter personally

NeuroCPP commented 2 years ago

Remote app + local cors server I also use this configuration (overrides the issue of not being able to play copyrighted(supported) songs) I just said that to mark it up only

I have set up corsserver.bat as a service using NSSM

NeuroCPP commented 2 years ago

DID it Sort of just installed http server using node.js and then run it as local host running like a charm(NOT) but there is this message image let's test this out

NeuroCPP commented 2 years ago

works well

NeuroCPP commented 2 years ago

UPDATE: guess who the culprit was DRUM ROLL:ME run the http-server from the flagplayer-master folder (before i was running it from the page subfolder😅) BUT , but http-server screenshot image [2022-05-25T18:43:43.241Z] "GET /sw.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36" (node:4872) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated (Use node --trace-deprecation ... to show where the warning was created) [2022-05-25T18:43:43.251Z] "GET /sw.js" Error (404): "Not found"

THIS DOESN'T SEEM TO BOTHER THE SW THOUGH

M.IMPthe thing is my devtools now keeps popping up on any website😅😅 what to do

Seneral commented 2 years ago

Oh that's am idea, run it as a server, thanks. The public version is served from the ghpages branch, so I'd try running in that folder. Otherwise page folder sounds right tbh, that's all you should need. But does running in master root fix the service worker? that is odd, maybe a node.js thing then. If so, you could edit the reference to sw.js in index.js to page/sw.js and see if nothing else breaks.

NeuroCPP commented 2 years ago

Ok I will do that

WHERE THE HECK is the index.js file ?? --found it

image 😶😶 what is this

NeuroCPP commented 2 years ago

Ok there is some problem accessing CORS server ..sometimes it works and sometimes it doesn't

then my pc BSODed multiple times..😕😕

NeuroCPP commented 2 years ago

edit the reference to sw.js in index.js to page/sw.js and see if nothing else breaks

can't figure out which index.js file are you mentioning here there are nearly 5 of them in server folder/subfolder(s) and none of them actually mentioned specifically "sw.js" in them (YES, I checked all of them , just opened them in npp and searched for .js or sw.js in them)

Seneral commented 2 years ago

Oh, sorry, misremembered how service workers are implemented, though there was a direct reference to sw.js in the main script. Then I got no idea

NeuroCPP commented 2 years ago

Did again as u suggested but not in 'index.js' but in different main files

here's what I found

Search ".js" (8 hits in 3 files of 3 searched) E:\Software\FlagPlayer-master\page\index.html (1 hit) Line 589: E:\Software\FlagPlayer-master\page\page.js (6 hits) Line 257: navigator.serviceWorker.register("./sw.js").then(function(registration) { Line 1669: return response.json() Line 2312: console.error("Could not fined base.js URL!"); Line 2754: var jsID = config.assets.js; Line 2762: // Extract and cache signing transformation from large base.js (2MB download) Line 4966: return response.json(); E:\Software\FlagPlayer-master\page\sw.js (1 hit) Line 64: "./page.js"

NeuroCPP commented 2 years ago

So I accidentally Line 589: edited this from "./page.js" --> "page.js" and it stopped working took 10 min to figure out the mistake

Seneral commented 2 years ago

Line 257: navigator.serviceWorker.register("./sw.js").then(function(registration) { That's the line you're looking for, and the one I initially meant (though I mistakingly said index.js instead of page.js). Experiment with the path there, maybe the way you run your server influences the current workign directory in a way. e.g. if you run from the root and page.js is in "page/page.js", you may need to modify it to "page/sw.js" - honestly not sure, just experiment. Otherwise hosting the website as a local server instead of just opening the index.html is very promising.

NeuroCPP commented 2 years ago

Line 257: navigator.serviceWorker.register("./sw.js").then(function(registration) { That's the line you're looking for, and the one I initially meant (though I mistakingly said index.js instead of page.js). Experiment with the path there, maybe the way you run your server influences the current workign directory in a way. e.g. if you run from the root and page.js is in "page/page.js", you may need to modify it to "page/sw.js" - honestly not sure, just experiment. Otherwise hosting the website as a local server instead of just opening the index.html is very promising.

oh i tried running as fromt the master directory ... and was getting these errors

http-server screenshot image [2022-05-25T18:43:43.241Z] "GET /sw.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36" (node:4872) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated (Use node --trace-deprecation ... to show where the warning was created) [2022-05-25T18:43:43.251Z] "GET /sw.js" Error (404): "Not found"

as i mentioned here but the server works just fine ..

NeuroCPP commented 2 years ago

although i am getting these warning messages from the http-server and some warning and error from devtools console for manifest.webmanifest image image

NeuroCPP commented 2 years ago

Line 257: navigator.serviceWorker.register("./sw.js").then(function(registration) { That's the line you're looking for, and the one I initially meant (though I mistakingly said index.js instead of page.js). Experiment with the path there, maybe the way you run your server influences the current workign directory in a way. e.g. if you run from the root and page.js is in "page/page.js", you may need to modify it to "page/sw.js" - honestly not sure, just experiment. Otherwise hosting the website as a local server instead of just opening the index.html is very promising.

Line 257: navigator.serviceWorker.register("./sw.js").then(function(registration) { That's the line you're looking for, and the one I initially meant (though I mistakingly said index.js instead of page.js). Experiment with the path there, maybe the way you run your server influences the current workign directory in a way. e.g. if you run from the root and page.js is in "page/page.js", you may need to modify it to "page/sw.js" - honestly not sure, just experiment. Otherwise hosting the website as a local server instead of just opening the index.html is very promising.

okay i will try running the server from page folder and change the reference and see what happens

NeuroCPP commented 2 years ago

image worked! ..I was away from my pc for quite a time so was not able to check this but voila! it works without any warning message rn