Adding offline support for playing games as a PWA

[brismuth]

It's running and fully functional here, on Github Pages: https://brismuth.github.io/N64Wasm/

Caveats:

• It looks like the Full Screen button doesn't work when the PWA is added to home screen on an iPad.
  • I'm guessing this is an iPadOS support issue, and not an issue with N64Wasm.
  • To compensate for this, I added CSS to the #maindiv element to allow the emulation window to go the full width side to side, without padding.
  • This also resolves a bug present in the emulator where it restores large widths/zoomed emulation windows on page load outside of the center of the screen, off to the right.
• Users will need to load at least one game while connected to the internet before it can work fully offline.
  • This is so assets.zip will be cached by the service worker, since it is only pulled into the page on game load.
• I needed to remove the query parameters you added to script.js and input_controller.js that were for preventing caching, otherwise the service worker can't serve them offline.
  • There are other ways for dealing with cache expiration though. I'd be happy to advise if there's a particular problem you're trying to solve with that approach.
• The icons were pulled off a google image search, and were not created by me.

Another benefit to this running as a PWA is that if iOS users save it to their home screen, Safari will not delete their save files after a period of disuse, which it will do if it is just running in the browser without being added to the home screen.

[nbarkhina]

This is really cool!! thank you for working on this - I tested this on my iPhone and it totally works, pretty amazing! I have not yet had a chance to look into PWA support so this gives me a really good starting point - There are a few things I wanted to work on first before releasing PWA capabilities as I want to play around with the tech and see some of the possibilities related to -

• ability to cache roms after use
• upgrade mechanism (how to trigger upgrade when everything is cached)?
• enable/disable PWA integration via the settings.js
  • this would give the option to the admin if they want to use the service worker or not

Some of these will also require some plumbing and UX work in the in JavaScript code. The reason I like the query parameters is it makes it easier to develop on without constantly clearing cache, So if you have some ideas around this I'd definitely love to hear it. Yeah in terms if icons I'll probably have to find some assets that I can use for that. In the meantime folks can definitely use your repo if they want to do offline install, like I did :)

thanks again!

[brismuth]

This is really cool!! thank you for working on this

My pleasure! Kudos to you for making the project open source and allowing community contribution. I'm happy to help.

ability to cache roms after use

This can be done independently of it being a PWA. IndexedDB is a great choice (and is what https://skyemu.app/ uses) for an in-browser key/value store with generous storage limits - it's basically only limited by the available storage on the device:
https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#other_web_technologies

upgrade mechanism (how to trigger upgrade when everything is cached)?

I currently have the service worker configured to do network first for every single file, and only pull from the service worker cache if the network connection is disabled / i.e. there is no internet connection. So I wouldn't anticipate this really being a problem. Check out the console.log statements I left in sw.js, they should help you see what's going on. Also happy to answer any questions you have.

enable/disable PWA integration via the settings.js

• this would give the option to the admin if they want to use the service worker or not

What would be the reason to disable it? It shouldn't interfere at all with regular functionality.
i.e. if you push an update out, and refresh the page, the change will immediately be visible to you in the page. That's how it's behaving on my GitHub Pages branch right now.

The reason I like the query parameters is it makes it easier to develop on without constantly clearing cache, So if you have some ideas around this I'd definitely love to hear it.

That makes sense, and it does guarantee that you always have the latest version. :)
My go-to for this is to open the Chrome Developer Tools, go to the Network tab, and then check the "Disable Cache" checkbox. As long as the Developer Tools pane is open, your browser will skip caches. Note that this doesn't apply to service worker caches, but as I stated above, I have the Service Worker configured to do network requests first, and only serve from cache as a fallback.

[nbarkhina]

Thanks for the info!! Yeah in general I will need to look into it, don't yet know what the downsides of having a service worker are (there may be none) but I do like making it as configurable as I can to give the user choice. I will also need to see what are the effects on cloud saves as there is also an option to host a backend for that. If things are always coming from cache that may not work so would have to see.

[BeezBumba]

@brismuth I have a problem with the emulator. I found that for some reason Super Mario 64 crashes on the when it transitions to the file select. And Paper Mario 64 just does not start up the title screen.

[brismuth]

@BeezBumba I'm not the maintainer of N64Wasm – @nbarkhina is. I just opened this pull request to add offline support for playing games.

If you're experiencing issues, you'll want to file a new separate issue, rather than comment on this one.