go-app v10 does not work in MacOS Safari

[rtrzebinski]

I'm trying to upgrade go-app from v9 to v10 -> https://github.com/rtrzebinski/simple-memorizer-4/tree/go-app-v10

go-app v10 does not work in MacOS Safari browser

It works fine in Google Chrome.

I checked on 2 (Mac) computers - same result.

I use incognito mode to ensure it's no caching issue.

Error displayed in Safari -> TypeError: TypeError: Load failed.

In console I see it's related to this part:

loading wasm failed: TypeError: TypeError: Load failed

  try {
    const showProgress = (progress) => {
      loaderLabel.innerText = goappLoadingLabel.replace("{progress}", progress);
    };
    showProgress(0);

    const go = new Go();
    const wasm = await instantiateStreaming(
      fetchWithProgress("/web/app.wasm", showProgress),
      go.importObject
    );

    go.run(wasm.instance);
    loader.remove();
  } catch (err) {
    loaderIcon.className = "goapp-logo";
    loaderLabel.innerText = err;
    console.error("loading wasm failed: ", err);  // <<<--- error is printed here "loading wasm failed: TypeError: TypeError: Load failed"
  }
}

The file exists:

$ ls web/app.wasm 
web/app.wasm

Anyone has this problem before? Thanks in advance for any help.

[oderwat]

We also test with Safari on macOS and it works fine. I think there should be more information using the developer tools inside of Safari. Do you have a location, where I can check your version?

[rtrzebinski]

Hi @oderwat

You can replicate by checking out the branch go-app-v10 -> rtrzebinski/simple-memorizer-4#6

Then:

make dev
make run

I know you run this app before but for the reference dependencies are here -> https://github.com/rtrzebinski/simple-memorizer-4/wiki/Dev-documentation#prerequisites

[oderwat]

Just some comments:

• docker-compose is old, and you probably should switch to use docker compose (compose v2 plugin). I just removed the - everywhere.
• After that switch you should remove the version in the compose files.
• Waiting for the DB failed for me as it was slower that a second. We wrote some internal tool to do this which handles services, ports, docker, log file content and a lot more. But you can do that like follows:

dev: ## Prepare local dev environment (stop + start + migrate + seed)
	@echo "$(OK_COLOR)==> Prepare dev environment for $(SERVICE_NAME)... $(NO_COLOR)"
	@make stop
	@make start
	@echo "$(OK_COLOR)==> Waiting for the db to be ready... $(NO_COLOR)"
	@until docker exec dev-sm-db-1 pg_isready 2>&1 | grep -q "accepting connections"; do \
          sleep 0.1; \
         done
	@make migrate
	@make seed
	@echo "$(OK_COLOR)==> Completed $(NO_COLOR)"

Besides that it runs flawlessly in Safari on my (Intel) iMac - Sonoma 14.6.1 on "normal" mode, but fails with http://localhost in private browsing mode. I think this is the result of some security "feature" but I could not find a quick source for that. The error Safari gives for loading the WASM is "Die Ressource wurde auf nicht sichere Weise angefordert.". This is after a 200 response in the network tab.

Using a warp / reverse proxy that makes it an HTTPS connection makes it work. It then also worked on iPhone (iOS) when I was using this HTTPS "warped" setup.

In the past I made a "standard" server for our PWA development that was using SSL with a local certificate because I was aware of the problems with not having HTTPS and that production is always only on HTTPS.

I think you do not need to use "private" mode and could instead switch of the caching. Anyway, running the PWA setup without HTTPS is not really enough to test stuff.

[rtrzebinski]

@oderwat Thank you for all the tips! I'll apply them, but later in another PR, to keep this branch focused on the go-app v10 upgrade (so it can be useful for others at a reference).

In Safari in normal mode I still had the TypeError: import gojs:runtime.scheduleTimeoutEvent must be an object -> same error I reported in #989.

That made me think that my browser must have some left overs cached from go-app v9.

I checked local storage - empty.

Then I clicked Develop -> Empty Caches and.. everything works :D

Thank you so much!

[rtrzebinski]

Sadly I need to re-open this one.

I noticed that Safari will never fetch updated application until Develop -> Empty Caches is clicked.

(on Chrome it works fine)

Steps to reproduce:

Build and run version A -> make run.

Check version on a main page - for instance Tue Sep 3 17:43:40 CEST 2024.

Stop the process with ctrl+c.

Build and run version B -> make run.

Check version on a main page - it will stay the same Tue Sep 3 17:43:40 CEST 2024.

Does not matter for how long I refresh the old version will be cached.

Only Develop -> Empty Caches will force new version to be downloaded.

In Chrome when I refresh the page version B is loaded.

This was never a case in v9, only started since v10.

@oderwat can you please try to replicate on your machine?

[oderwat]

I think this is related to the removal of the automatic update checker in V10. As long as you do not implement the server update checks (see my diff, something with the update interval) you will not get updates. Refreshing the page actually is not supposed to (always) update the app. This is a misconception on how a PWA is supposed to work. Besides that, there are quite some quirks with PWAs in "Apple Products". I think Apple actively tries to hold them "at bay", because they harm their Apple Store sales and put a burden on their systems (push notifications) without them getting monetary compensations for running the infrastructure. They are also very conservative with checking for new versions, even if you use everything you "should" do. I fear there is not a lot that Go-App can do about that. I asked @maxence-charriere already if there could be support for a non PWA WASM setup could be added though.

[rtrzebinski]

This is sad.

I personally don't really care about PWA, just need a way to build a FE with GO only and without any JS at all.

@oderwat I tried to "borrow" your solution -> rtrzebinski/simple-memorizer-4@9f8a452

I see in logs it checks for update, but when I refresh the page a new version is not being loaded, I must be missing something.

[oderwat]

I personally don't really care about PWA, just need a way to build a FE with GO only and without any JS at all.

Well you could check out https://github.com/beego/bee, https://github.com/donseba/go-htmx or even https://www.cogentcore.org/core/

[gepengscu]

Try compiling only the go-app server and then run it to see if it can be updated. Perhaps it is because the version of BE is older than that of FE.

[maxence-charriere]

I don't think it will make a difference but I made a minor tweak here:

go get -u github.com/maxence-charriere/go-app/v10@0fcf1a1

Could you try it?

[maxence-charriere]

Safari behaves oddly when I'm working on localhost, so I avoid using it for development. My live service (https://murlok.io/) generally works well on Safari and updates as expected. Occasionally, it doesn't detect an update, but a reload usually resolves the issue.

[rtrzebinski]

@maxence-charriere Thank you, I tried your commit and it changed the version but I needed to refresh around 50+ times and it only happened after a long time (a minute at least).

While this is ok for production, it's not really usable for dev.

Would that be possible to have an instant(ish) reload of dev? Or at least so it works same way as in v9 (it was ok).

@oderwat Thank you for suggestions. I invested so much time in go-app that I don't really want to abandon it, also despite many issues I generally like the syntax and how it works.

@gepengscu Thank you. I believe I compile both FE and BE together so they should be same version. Not sure how to separate it and whether that would help.

[maxence-charriere]

Hi @rtrzebinski , I gave another try to a fix:

go get -u github.com/maxence-charriere/go-app/v10@e4002e9

Could you try it and let me know how it goes?

[rtrzebinski]

Hi @rtrzebinski , I gave another try to a fix:

go get -u github.com/maxence-charriere/go-app/v10@e4002e9

Could you try it and let me know how it goes?

Hi @maxence-charriere

I tried that version.

Safari -> After Empty Caches and reloading it always gives me errors:

FetchEvent.respondWith received an error: Load failed

Failed to load resource: FetchEvent.respondWith received an error: Load failed

loading wasm failed: 

TypeError: TypeError: FetchEvent.respondWith received an error: Load failed

Chrome -> Works fine, new version is loaded quickly (maybe few seconds delay max)

[maxence-charriere]

I have another one to try:

go get -u github.com/maxence-charriere/go-app/v10@c8599dd

[maxence-charriere]

Also do you use the handler.Fonts?

[maxence-charriere]

I think this should solve the problem on Safari:

go get -u github.com/maxence-charriere/go-app/v10@205d2de

[XenoPhex]

Is it possible to re-open this issue? I'm running into the same problem with 18.0.1 (20619.1.26.31.7) on MacOS 15.0.1.

[maxence-charriere]

Are you loading some javascript files in the goapp handler?

i got a similar issue with Safari and the problem was that my ads integration was doing a lot of request and was delaying the service worker update mechanism.

go-app required script (service worker and go wasm loader) are loaded with a defer attribute which ensure that those script are executed once the dom is loaded. If you add scripts without defer or with an async property, those might launch before the service worker update mechanism.

I solve the issue by defering the ads javascript file.

[rtrzebinski]

I think this should solve the problem on Safari:

go get -u github.com/maxence-charriere/go-app/v10@205d2de

Hi, I was on vacation and only now checked this.

Sadly it's not re-loading at all.

I don't think I have any external JS loading, no ads or anything like that.

The very only way to get a new version in Safari is Develop -> Empty Caches otherwise it will never load a new version.

[XenoPhex]

The very only way to get a new version in Safari is Develop -> Empty Caches otherwise it will never load a new version.

So here's the funny thing, I can't even get the "Hello World" page to come up the first time - let alone the changes. I tried going through Develop -> Empty Caches as well as disabling caching directly in developer tools, both still result in the same TypeError: TypeError: Load failed / TypeError: TypeError: FetchEvent.respondWith received an error: Load failed message. It only seems to "work" randomly when I Develop -> Empty Caches and then refresh a few times.

It only seems to "work" randomly when I refresh the site a few times.

[maxence-charriere]

Need to get go-app new version @rtrzebinski , that one was a try before i solve my issue on safari

[XenoPhex]

Need to get go-app new version @rtrzebinski , that one was a try before i solve my issue on safari

Did that, and that was my response after updating to the provided version.

EDIT: Sorry, I should note that I tried the hello world with both the version provided in that previous message and what was released on master. In both cases it's just a dice roll to see if the page loads properly.

[rtrzebinski]

Sadly I have a similar issue to @XenoPhex - I updated to v10.0.7 and Safari does not work at all (Chrome works fine), error:

TypeError: TypeError: FetchEvent.respondWith received an error: Load failed

In case you'd like to reproduce:

Branch -> rtrzebinski/simple-memorizer-4#6

Prerequisites -> https://github.com/rtrzebinski/simple-memorizer-4/wiki/Dev-documentation#prerequisites

Run:

make dev
make run

[maxence-charriere]

I m wondering if it is related on how safari works on lochalhost.

Actually this is the reason why I dont dev on safari. All my websites build with go-app work and update on safari when they are in prod though.

[rtrzebinski]

@maxence-charriere Do you think that it's possible to make go-app work on Safari and localhost?

[maxence-charriere]

@rtrzebinski I just gave another try to fix that but it is going nowhere so far. From what I read on and on is that safari is forcing https on localhost. I tried different things I gathered online and none worked for me. The .wasm loading keeps failing.

[XenoPhex]

So I updated the hello world example to use the ListenAndServeTLS with a trusted self-signed certificate and the example now consistently works.

The first few requests upon changing the hello world example still seemed to be cached, but a manual refresh quickly clears / updates the page.

Let me see if I can file a bug against Safari for this issue.

[rtrzebinski]

@XenoPhex Would you be so kind and share some more details or how to make it work with self signed certificate?

[XenoPhex]

@XenoPhex Would you be so kind and share some more details or how to make it work with self signed certificate?

Yeah sure, code change wise, it's pretty simple. Use the following instead of the http.ListenAndServe:

        if err := http.ListenAndServeTLS(":8080", certFile, keyFile, nil); err != nil {
                log.Fatal(err)
        }

Where the new address is now https://localhost:8080. (It's pretty standard to use 8080 when running HTTPS locally.)

The certFile and keyFile are paths to the raw certificate and raw private key files respectively.

To save you some time (as I had this book marked to share with others anyway), if you're looking to generate these cert + key files yourself, here's a list of links to help with that:

1. Generating the Certificate + Private Key via Key Chain - Once you've generated the leaf certificate, you only need to export the leaf certificate as a .p12.
2. Extract public/private key from PKCS12 file - You'll have to provide the -legacy flag to openssl when working with the p12 file.

[rtrzebinski]

@XenoPhex Thank you, it worked!

I switched to HTTPS with self signed certificate and go-app now refreshes normally in Safari.

I generated certificate with cli however:

# Create a private key
openssl genrsa -out localhost-key.pem 2048

# Create a certificate signing request (CSR)
openssl req -new -key localhost-key.pem -out localhost.csr -subj "/CN=localhost"

# Create the self-signed certificate (valid for 1 year)
openssl x509 -req -days 365 -in localhost.csr -signkey localhost-key.pem -out localhost-cert.pem

# Clean up the CSR file
rm localhost.csr

Commit for the reference -> rtrzebinski/simple-memorizer-4@912ca49