PWA seems break ?

[OnlyFor]

Describe the bug
A clear and concise description of what the bug is.

PWA is not working

To Reproduce
Steps to reproduce the behavior:

1. open chrome
2. open console
3. goto https://photos.qpqp.dk/login (or self lastest build)
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

install pwa show and can install

Screenshots

in network console shows:

"index.f9413d49.js:224 Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://photos.qpqp.dk/') with script ('https://photos.qpqp.dk/service-worker.js'): The script has an unsupported MIME type ('text/html')."

Your environment:
Feel free to remove and add what you think might be useful.

• Are you using Docker? [yes / no] no
• Database [e.g. mariadb 10.5] sqlite
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 2.0.0] office site same as lastest build

Additional context
Add any other context about the problem here.

[kkovaletp]

@OnlyFor, I checked the image viktorstrate/photoview:master and don't see this error. The demo site is running the latest released image, which is pretty old. Can you please test the PWA installation from your side using the master tag for the image?

[OnlyFor]

docker is too heavy for my hosting, so i install manually according here:

https://photoview.github.io/en/docs/installation-manual/

it looks like this docs is out of date ?
for example, it said "cp -r ui/build/ app/ui/", but what i actually found is "cp -r ui/dist/ app/ui"

and after npm run build, this is no "service-worker.js" under ui/dist, which is used in serviceWorkerRegistration.ts,

I'm not good at front-end, so I don't know what's going on,

and I did a little test, if i delete "serviceWorkerRegistration.register()" in "src/index.tsc", i could install pwa in chrome desktop but without icon ? and it seems can't be installed in android chrome lastest still ?

I checked some other projects and said that upgrading dependencies solved this problem?

[kkovaletp]

Assuming that you used the source code from master (hope that pulled not too long time ago), it should work.

@jordy2254, can you please take a look, as I never built the project locally?

[OnlyFor]

i clone and test about 2 hours ago, and git clone https://github.com/photoview/photoview.git should be master of course

[jordy2254]

I believe this is the way that we serve files through go where it doesn't add the correct type onto the file when serving it thus the browser blocks it. It should be a straight forward fix, and the association for the serve handling in the go code can be found here; https://github.com/photoview/photoview/blob/master/api/server.go#L98
@OnlyFor Shouldn't be too complicated of a fix if you have the knowhow to controbute that would be great! If not thanks for raising the contribution and just raising bugs and helping identify replication steps is a great help!

[h4de5]

I do not think this is about file associations. the service-worker file is not there and its just the 404 error page that has the wrong mime-type.

[poisonnuke]

I have the same issue with the latest docker installation. Fresh Debian server with nginx as reverse-proxy and standard-configuration.

The serviceworker.js file cannot be found.

looks like the solution is here:
https://stackoverflow.com/questions/49566059/service-worker-registration-error-unsupported-mime-type-text-html

[kkovaletp]

The serviceworker.js file cannot be found.

its strange, but I cannot reproduce the issue. I've tried using the latest master image from the server in Chrome and Firefox, then from a remote host in the same browsers: in all cases I see in the Network tab of Dev Tools that the service-worker.js is loaded with 200 OK status.

I found the next line in the code:
const swUrl = '${import.meta.env.BASE_URL}service-worker.js'

If you have this issue in your setup, please make sure that the PHOTOVIEW_LISTEN_IP variable is set to the hostname of the photoview service in your docker-compose file. In my case it is the PHOTOVIEW_LISTEN_IP: "photoview"

[h4de5]

can you post the first few lines of content of that service-worker.js file from the Browsers dev tools?

[kkovaletp]

can you post the first few lines of content of that service-worker.js file from the Browsers dev tools?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/photoview-logo.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="/manifest.json" />

    <meta name="apple-mobile-web-app-title" content="Photoview" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white" />

    <script type="module" crossorigin src="/assets/index.9b57b0a0.js"></script>
    <link rel="stylesheet" href="/assets/index.0ac106ed.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run Photoview.</noscript>
    <div id="root"></div>
    
  </body>
</html>

[poisonnuke]

In my case the service-worker.js returns a 404 page. So I cannot share any code.

The LISTEN_IP is still unchanged and set to "photoview".
Ive tried different settings (just the subdomain of my host, or the entire domain (sub.domain.tld), but that didnt change anything. What is that value supposed to be?

[kkovaletp]

The LISTEN_IP is still unchanged and set to "photoview".

it depends on your deployment type:

• if you use docker, then it should be set to the Photoview service's hostname in the docker-compose file. In most cases that is "photoview"
• if you install Photoview on the host directly, then this should be the environment variable, set to the host IP or hostname. Try local network IP or name and test from the local network: if the issue is gone, then this is the cause and you need to find a way to configure it to work for all use cases

[poisonnuke]

it runs with docker compose. Therefore it was already correct with "photoview".
but if this is used to determine the URL for the service-worker shouldnt it be set to the actual domain thats being used even if everything runs inside Docker?

[kkovaletp]

shouldn't it be set to the actual domain

in my case it works fine with the "photoview" value in the compose file, but feel free to try)

then, I don't have any other thoughts as to why it doesn't work for you((

[h4de5]

can you post the first few lines of content of that service-worker.js file from the Browsers dev tools?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/photoview-logo.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="/manifest.json" />

    <meta name="apple-mobile-web-app-title" content="Photoview" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white" />

    <script type="module" crossorigin src="/assets/index.9b57b0a0.js"></script>
    <link rel="stylesheet" href="/assets/index.0ac106ed.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run Photoview.</noscript>
    <div id="root"></div>
    
  </body>
</html>

you see? this is not the service worker which should be a javascript file, but instead is just the file-not page that comes with status code 200.

the service worker seems not to bundled correctly and is therefore not in the production build and the deployment (at least not under that url).