Offline mode doesn't work in Firefox

[bgrgicak]

Offline mode works in Chrome and Safari, but throws an error in Firefox.

TypeError: NetworkError when attempting to fetch resource.

Recreate

• Go to Playground.WordPress.net in Firefox
• Click File > Work Offline (in the window header menu)
• Reload and see error

[brandonpayton]

The failure I'm seeing is for:

https://www.googletagmanager.com/gtag/js?id=G-SOME-IDENTIFIER

[brandonpayton]

The failure I'm seeing is for:

https://www.googletagmanager.com/gtag/js?id=G-SOME-IDENTIFIER

That may be a red herring. After locally removing the index.html dependency on googletagmanager.com and confirming it is no longer used by index.html in the browser, the error still occurs.

[brandonpayton]

@bgrgicak, I wanted to know more about the Offline work and spent more time looking at this, setting fetch breakpoints in the service worker and in the main page dev tools, and comparing request URLs with those satisfied from the cache. AFAICT, there don't appear to be any files not found in the cache.

Those logs are here. There are 28 entries, 14 fetches and 14 corresponding cache hits. And in the dev tools Network tab, there were 14 requests logged. I didn't notice any differences between the 14 file names but did not confirm entry by entry.

I also spent time trying to find the origin of the "NetworkError when attempting to fetch resource" error but haven't had any luck. I was eager to help out and have a fix waiting as you started your day, but it didn't work out. :) I'm curious what you will find here. It will be super interesting to learn the source of this issue.

[bgrgicak]

That may be a red herring. After locally removing the index.html dependency on googletagmanager.com and confirming it is no longer used by index.html in the browser, the error still occurs.

It's ok for GTM to fail. It also fails in Chrome because we don't cache it.

[bgrgicak]

I was eager to help out and have a fix waiting as you started your day, but it didn't work out. :)

Thank you! It felt really good seeing that you helped. 🙂

[bgrgicak]

When I check the network requests while offline and compare it to online, it stops before requesting the SQLite plugin.

This plugin isn't preached, so I assume that there is something different in how FF fetches these files from cache.

I can see the file in cache.

When online the file is fetched from the server and not returned by the service worker. In Chrome it's returned by the worker.

[brandonpayton]

Ah, good call, comparing between online and offline requests.

I poked at this a bit more at the end of the day but unfortunately don't have more to share.

[adamziel]

It seems like all fetch() requests in the web worker fail when offline:

I'm able to open both these files in a new tab, but somehow firefox cannot fetch them at the time the service worker requests them.

Two more issues I found in Firefox:

• The offline mode only works after the second time you visit playground.wordpress.net
• Firefox sometimes fails to cache specific files:

All of these seem like Firefox bugs. Perhaps we can work around them by poking around the worker lifecycle or claim() calls.

Aha, I am actually turning my wifi off. The "Work Offline" mode seems to be different from actually being offline so I am not using it.

Also, it is so weird this works on a localhost but not on playground.wordpress.net 🤔

[adamziel]

I wonder if these fetch() requests even make it to the service worker. It seems like that can only be debugged in Firefox nightly:

https://firefox-source-docs.mozilla.org/devtools-user/application/service_workers/index.html#debugging-service-workers

[adamziel]

One problem seems to be related to the service worker lifecycle. I'm testing on localhost as follows:

1. Start the Playground server (php -S 127.0.0.1:9996 -t dist/packages/playground/wasm-wordpress-net)
2. Open it in firefox
3. Refresh the page
4. Close the tab
5. Stop the Playground server
6. Go to 127.0.0.1:9996

This is what I see on the first page load:

If I navigate to admin and then back to the homepage, the CSS is there. This is what we've seen in Chrome before https://github.com/WordPress/wordpress-playground/pull/1643. It doesn't seem to be kicking in in Firefox.

This may or may not be related to the larger issue we're seeing on playground.wordpress.net.

[adamziel]

Idea for a short debugging feedback loop:

1. Create a local https:// setup
2. Serve the build Playground through that https domain
3. Hope it would break in the same way as playground.wordpress.net does
4. Edit the built files directly to avoid long waiting for the build

Alternatively, we could start a staging environment and do that there.

[brandonpayton]

I wonder if these fetch() requests even make it to the service worker. It seems like that can only be debugged in Firefox nightly:

https://firefox-source-docs.mozilla.org/devtools-user/application/service_workers/index.html#debugging-service-workers

@adamziel It's possible to debug Service Workers in Firefox today using dedicated dev tools opened via this page: about:debugging#/runtime/this-firefox. But debugging via web page dev tools (as supported by Firefox Nightly) looks like a huge UX improvement.

[brandonpayton]

Taking this one at @bgrgicak's request