Creating a Firefox PWA for Discord on Linux
Posted by Elnu on#programming
In this tutorial, I’ll explain how to set up, install, and configure a Firefox PWA (Progressive Web Application) for Discord that integrates into your system, and some background on why you’d want to do so over the regular desktop version. I’ve tested these steps on Arch Linux and Xubuntu 20.04.
Background
If you’ve ever used Discord on Linux, you probably know that it is clunky and not nearly as polished or feature-complete as it is on, say, Windows.
Streaming has no audio, and while using Soundux as a workaround for audio passthrough is a solution, it can be annoying to use, and doesn’t always work. For example, in my experience, Soundux fails to pick up audio from Java Minecraft (and I believe by extension all Java applications). In addition, I’ve recently had issues with audio output, with no sound being produced other than voices in VC.
Another major issue with desktop Discord is the fact it isn’t sandboxed at all, meaning it has full access to your system at any time. In addition, if you’re desktop is using X.org, Discord (and any other application, for that matter) is able to snoop on all key inputs, even if they’re from applications. Make of this what you will.
Not to mention the issues with the updater, which has been excellently covered in this video by Brodie Robertson.
There is of course a second way to use Discord on Linux, which is simply the web application. It does everything that the desktop application does, including streaming (albeit without audio), and it doesn’t ever require being updated. The only potential downside is the lack of push-to-talk, but if like me this is something you don’t use, then this isn’t an issue. In addition, since it’s just a web page not a fully-fledged application it doesn’t have the security/privacy concern of being able to access your entire system like the desktop version.
The only frustration I have with the web version is the fact that it doesn’t look like a standalone application on your desktop, it’s just a tab in your browser. Being able to remove as much of the top bar as possible would be nice. This is where PWAs come into play.
Unfortunately, support for SSB (Site Specific Browser) mode and PWAs was dropped in Firefox 86 last year.
Luckily, Progressive Web Apps for Firefox (filips123/PWAsForFirefox) exists to fill the lapse in functionality.
This project creates a custom modified Firefox runtime to allow websites to be installed as standalone apps and provides a console tool and browser extension to install, manage and use them.
Installation
First, install the PWAs
for Firefox extension from the Firefox add-ons store. Once you
open it up, it will guide you through the installation process,
including installing the companion application. If you’re on Arch
Linux, it’s available on the AUR under firefox-pwa
and
firefox-pwa-bin
. (bin
for the binary
precompiled version, go for this one if you don’t want to compile
it yourself.)
If you are on Ubuntu or one of its derivatives, the snap version of Firefox that came with your system will not be able to communicate with the companion application, I’m assuming due to snaps’ containerization, at least in my testing on Xubuntu 22.04. See this Stack Overflow answer for a guide on switching to the standard Debian package version of Firefox.
Create the Discord PWA
Navigate to Discord https://discord.com (not the app, we need the root of the PWA to be the index page so all pages under the Discord domain are considered part of the PWA) and click on Install current site in the extension. Change the Name field of the PWA to just “Discord”, the default will include the tagline and be a bit overly long. Change the Start URL to https://discord.com/app so the PWA opens to the app page, not the landing page. And… you’re done! You can leave all the other fields as-is and press Install web app. You’ve created a PWA for Firefox, it’s as simple as that. You can now open it from within the extension by clicking on the external link button.
However, there’s more configuration to be done. Firefox PWA creates a Firefox profile for the PWAs that’s completely separate from your main profile, so we’re going to have to do some configuration there. (By default, all of your PWAs share a single Default profile under the Profiles tab of the extension, but if you want to have different PWAs have different profiles you can configure it there.)
Configure the PWA Firefox profile
It’s up to you how want to configure the profile, but here’s what I did and recommend.
- In the ⚙️ General portion, there’s a new settings section, Progressive Web Apps. For me I checked Open out of scope URLs in a default browser, which makes it so non-Discord links you visit within the PWA profile are opened in your main Firefox profile instead of within the PWA. This is also important considering any external sites you visit within the PWA aren’t otherwise going to be added to your main profile’s history.
- Under 🧩 Extensions & Themes, you You might also want to choose a theme that matches Discord’s theming.
- Under 🔒 Privacy & Security / History, set that history to Use custom settings for history and uncheck all the boxes. This will make it so the profile won’t keep any history (which is unnecessary in a PWA), but still will remember cookies so you don’t have to log in again each time you reopen it.
If you shut down your computer with the PWA open, Firefox will think that your previous session didn’t close properly and will reopen your old windows. I haven’t figured out a way to prevent this, but if you want to mess with advanced configuration, here’s how.
Within the PWA, we don’t have access to the URL bar, so to enter the preferences, press Ctrl + Shift + I to enter the developer tools. Enter the console and type in the following:
document.location.href = "about:config"
Firefox will make you type allow pasting
beforehand.
Launching the PWA from the command line
If you are using a distro with a desktop environment, Discord should already be in your applications drawer, so unless you want to be able to launch Discord from the command line, you can skip this step.
I have uninstalled the desktop Discord application
discord
, and I want to replace it with a shell script
that launches the PWA. This will enable you to launch the PWA from
the command line simply by typing discord
, and also
from an application launcher like rofi. This way, we don’t
have to rely on launching Discord from the PWAsForFirefox
extension.
Luckily, PWAs for Firefox provides a CLI. First, we need to find the ID of the Discord PWA:
firefoxpwa profile list
This will output the following. After the entry for Discord, the string of letters and numbers is the site ID. Your ID will be different.
========================= Default ==========================
Description: Default profile for all sites
ID: 00000000000000000000000000
Sites:
- Discord: https://discord.com/ (01G705MTCT1Q1HHFM7DVDFAPCY)
You can now launch the PWA using the following command.
firefoxpwa site launch 01G705MTCT1Q1HHFM7DVDFAPCY
Let’s create the launch script. Open
/usr/bin/discord
(if this exists already, uninstall
the desktop Discord application) with your favorite text editor.
You’ll need to use sudo
. Add the following to the
file, replacing the site ID with the one you found earlier:
#!/usr/bin/env bash
firefoxpwa site launch 01G705MTCT1Q1HHFM7DVDFAPCY
Finally, make it an executable:
sudo chmod +x /usr/bin/discord
You’re done! You’ve created a PWA for Discord that looks and behaves like a desktop application, but without a lot of the hassle involved with the actual desktop app.
Note that if you decide to reinstall the normal Electron-based
desktop Discord application, you’ll have to move/delete
/usr/bin/discord
first, as desktop Discord needs to
put its executable there.
Conclusion
Of course, this isn’t a perfect solution. Dragging and dropping files into the PWA doesn’t work for uploading, there might be some improved voice chat performance in the normal desktop version not available in the browser/PWA version, push-to-talk doesn’t work, and streaming still has no audio.
However, if you’ve already been using primarily the browser version of Discord, creating a PWA is a nice upgrade until Discord finally makes a good client. Here’s to hoping that day actually comes.
Anyhow, I hope this was helpful!