All I wanted to do was play music on my Steam Deck.

To be honest, I’m not 100% sure this will actually be useful to me in the long term, but it seemed like a fun thing to try, you know?

I hunted and hunted for an application that would work nicely on the deck and would integrate with my Navidrome installation, but nothing satisfied. The closest I got was Supersonic, but it didn’t play nicely with Gamescope1

Eventually I concluded that my best bet would be to just run the Navidrome web application, but doing that with Chrome in gaming mode was clunky and a bit unsatisfying.

Then I remembered an experiment I ran a while back running web applications as a PWA with Firefox, and a light bulb went off.

Now, to be clear, this whole thing is a little silly, but it was fun and it worked well, so I figured I’d write it up just in case a) I needed it later, or b) someone else might want to give this a try.

For the uninitiated, a Progressive Web Application, or PWA, is really just a type of richly interactive website. Odds are very good that anyone reading this has interacted with a PWA at some point or another, and in fact a lot of desktop applications (e.g. Slack, Spotify, etc) these days are secretly PWAs under the covers, just running through a pre-packaged browser2.

Not too long ago there was a push to make PWAs a real thing, by which I mean you’d be able to go to a site via your browser, and if you liked that site, you could click an “install” button, and the site would be registered on your device as a separate application. When you run that “application”, it would then run your chosen browser in a way that hid all the browser-y bits and better integrated with the local environment. The theory was this could completely replace traditional app stores: you’d simply browse to the site you wanted to use, click “install”, and off you go.

Unfortunately, this technology never really took off for a variety of reasons3, and the major browser vendors have slowly removed direct support for PWAs.

Fortunately, a project lives on to make PWAs with Firefox a reality: PWAsForFirefox. Using this add-on, you can “install” web sites right onto your desktop, and then register them as applications in Steam.

The very first step to making this work is to switch over to desktop mode. You’ll be doing a lot of clicking and typing so a keyboard and mouse is highly recommended, here.

Next, to make this as easy as possible, I opted to install Firefox from a tarball rather than using flatpak4. Just unpack the archive wherever you’d like and then leave it there for now. We’ll get back to that in a bit.

Next comes the truly janky part: installing the connector. The PWAsForFirefox connector is available in a number of different package formats, but notably, not as a standalone tarball. And because of the way the Deck works, simply installing the RPM won’t work: we’d have to reinstall it every time an OS update came down. Yeah, no way I’m putting up with that.

So instead, we’re going to manually extract the contents of the RPM to our .local folder.

First, go download the latest connector RPM from the releases page.

Next, create a temporary directory in a location of your choosing, switch to that directory, and then extract that RPM as follows (I’m using 7zip, here, which I believe is installed by default on the Deck, but there’s a few different ways you can do this part):

7z x /path/to/firefoxpwa-<version>.x86_64.rpm
7z x firefoxpwa-<version>.x86_64.cpio
cp -r usr/* ~/.local/

(By the way, I don’t remember if the .local folder exists by default in /home/deck. If not, you’ll need to create it.)

Next, we need to set a couple of environment variables. Create a file called ~/.config/environment.d/firefoxpwa.conf and populate it as follows (note, you’ll need to create that directory first):

FFPWA_EXECUTABLES=/home/deck/.local/bin/
FFPWA_SYSDATA=/home/deck/.local/share/firefoxpwa

After that, create a file called ~/.mozilla/native-messaging-hosts/firefoxpwa.json and populate it with these contents (again, you’ll have to create that directory):

{
  "name": "firefoxpwa",
  "description": "The native part of the PWAsForFirefox project",
  "path": "/home/deck/.local/libexec/firefoxpwa-connector",
  "type": "stdio",
  "allowed_extensions": [
    "firefoxpwa@filips.si"
  ]
}

Alright, now that the native connector is installed, we can do the easy parts:

  1. Launch your new installation of Firefox
  2. Install the PWAsForFirefox add-on and complete the installation process
  3. Follow the add-on documentation to install a PWA of your choice
  4. Open up Steam and add your new PWA as a non-Steam game

Finally, you can switch back to gaming mode, find your new application, and:

  1. Set the resolution to Native
  2. Launch the application, and set the controller scheme to the Web Browser template

And that’s it! Repeat these steps for any web apps you’d like to have available on your Deck.

As bonus points, if you’re following these instructions to install a media player, you can install Decky Loader and use the MusicControl plugin to more easily control playback while in-game.

  1. Among other things, the mouse position never registered properly. ↩

  2. If you’ve heard of Electron, that’s basically what it is: a web application delivered to the desktop, complete with a full browser. And yes, that’s as ridiculous as it sounds. This is our world now. Look on the tech industry’s works, ye mighty, and despair! ↩

  3. Not least of which because eliminating the need for an app store would eliminate the need for Google and Apple to take a cut of app developers revenues… ↩

  4. Flatpak sandboxing introduces a bunch of complexity that I was not in the mood to tackle, but I suspect you could adapt this technique. I’d start by looking at my post on using KeePassXC with a Flatpak version of Zen for some inspiration. ↩